Re: [csswg-drafts] [css-display] create a display property value for visually hiding an element while making it available for AT (#560)

This is stale for a while now, but I want to build upon what has been said.
In my case I'm building a `Pills` input field. Like your email client `Send to` field. 

Selected items are visible
To add an item you use a `combobox` and select the desired item. 
To remove an item you click on the pill.

Selected items are not included in the `combobox/listbox`, that would make them appear twice.

For someone visually impaired whom have to use screen reader it is to change the selected items using this component. You have two navigation trees, one for selected items, one for available items. So I would like to make the selected items non-focusable and the `listbox` include the selected items, but only for screen readers.

```html
<ul role="listbox">
  <li role="option">Option 1</li>
  <li role="option" aria-selected="true">Option 2</li> <!-- This should be not focusable/selectable by a non-screen-reader -->
</ul>
```

This goes further than just visibility ; current visibility hacks such as `sr-only` won't do the trick, the element will still be focusable and when using keyboard navigation we would meet a "dead" position.

-- 
GitHub Notification of comment by JesusTheHun
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/560#issuecomment-1214307631 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 14 August 2022 08:07:08 UTC