Comments (6)
@Regine-Lambrecht This is the behavior I am seeing, what interaction is not matching? It may be a browser-specific issue, and in that case, could you provide the browser you're encountering this behavior?
This link may be easier for testing: https://react.carbondesignsystem.com/iframe.html?args=&id=components-select--default&viewMode=story
from carbon-website.
For instance, if you tab until you reach the Selector, and then uses the down arrow, it will change the selected option. The accessibility description says it should open the list of options instead.
Then, according to the accessibility description, you should be able to navigate the options without selecting them one after the other, via the down arrow. If you want to change the selection, then you should click ENTER. On the contrary, in the demo, using the down arrow once the list of options is displayed changes the selection one after the other already.
My setting: WIN 11, Chrome 115.0.5790.171. No screen reader ON.
from carbon-website.
Wondering if this is a Windows-specific behavior? Do other <select>
elements behave this way on your machine? We are just rendering the browser/os native select
element, and do not implement any extra keystroke functionality.
I'm only able to test on Mac at the moment, but this is what I am getting.
from carbon-website.
Yes, the SELECT behaves differently on Windows, apparently ;( I found documentation of that lack of support.
You can see it here
There has been a study that still recommends using the SELECT, but it does not consider the usability issue of having to memorize the currently selected option and come back to it if you want to escape the list of options without modifying. That is the same issue as with radio buttons: you cannot discover the options without selecting each one you just wanted to hear, and you have to come back to the first if this is finally what you wanted. You also lose track of any default selection once you discovered the other options. But ok, there is no alternative for radio buttons, and they all behave like that until the W3C created a custom one based on ARIA that could behave better :).
For the select feature, all other clickable components that also display a list of options with unique selection after user interaction, do have a "browse" only interaction, like the SELECT on Mac:
- an action button with focus,
- an action button with descendant ,
- a navigation menu with sub-menu (you expand, your browse the options, you click ENTER to select)
- editor menu bar
- all navigation menus of links "behind" a clickable entry
We have to remember that the visitor doesn't know which HTML is behind the scene. He just sees/hear something that is clickable and displays a list of choices. Why not coding them so that they all behave the same: arrow down opens, other arrow down puts focus/reads aloud without selecting, ENTER selects, ESC closes without changing the initial value ?
To get that keyboard interaction for MacOS AND Windows, one should use the ARIA Select-only Combobox pattern:
See also https://github.com/microsoft/sonder-ui/tree/master/src/components/select
from carbon-website.
@Regine-Lambrecht I would recommend trying the Dropdown
component then, as that should implement the select-only combobox pattern shown here. The Select
component is intentionally left untouched and is simply the browser's native implementation without any added styling (except the unopened display)
from carbon-website.
We are planning the OS handle the Select component, since it is not a issue in Carbon.
If you like a consitent behavior you can try the Dropdown component.
from carbon-website.
Related Issues (20)
- [Feature Flags] Revise documentation direction with feedback from playback
- Make UI gallery available for non IBMers
- [Slider] Add usage docs for slider with custom label HOT 1
- [Tabs] Add vertical variant to tab live demo
- [Icon & Pictogram] Alignment issue with "No results found" and description
- Remove AI Icon from Icon library search
- [UI Content Design Guild] Notification component topic is missing content HOT 4
- [Tabs] Add vertical tab variant to live demo component
- Location of sitemap listed in `robots.txt` file is incorrect
- Compliance: Replace all Vimeo videos
- AI documentation: Add AI tag to component overview page HOT 1
- Button: add guidance for not having danger icon only buttons
- Data viz: additional docs needed for color usage
- [Content templates] Usage template: Add new optional sections
- [Content templates] Style template: for components with multiple variants HOT 1
- [Feature request]: Carbon Innovation added to IA HOT 4
- [Tile] update a11y tab content for the Tile component
- [Feature flags] Narrow down iterations and create final designs
- [Bug] Links not working under "Get started > Step 2: Access the tools" in Designing section
- [Pagination, Pagination Nav] update content on the Accessibility tab
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from carbon-website.