Segmented control interface guidelines #276
Conversation
simurai
left a comment
simurai
left a comment
There was a problem hiding this comment.
Just a few minor comments, but otherwise these guidelines are great. 👏
|
|
||
| ### Button label text | ||
|
|
||
| Segmented control button labels should be nouns or noun phrases that succinctly describe the choice. Button labels may not wrap to multiple lines. |
There was a problem hiding this comment.
👍 I still have to fix the wrapping in PCSS.
vdepizzol
left a comment
vdepizzol
left a comment
There was a problem hiding this comment.
Excited for this! Let a couple of quick comments! 🙇
| > | ||
| <div> | ||
|
|
||
| A segmented control is treated like a [toolbar](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role), not a [radio group](https://developer.mozilla.org/en-US/docs/web/accessibility/aria/roles/radiogroup_role). |
There was a problem hiding this comment.
What's the recommendation when a SegmentedControl is used as a tab (akin to TabNav/UnderlineNav behavior)?
What about when a SegmentedControl is a a setting option (emoji skin tone picker)?
There was a problem hiding this comment.
I'm bringing this to a11y office hours today: https://github.com/github/accessibility/issues/1556#issuecomment-1204047337
I'll keep you posted.
There was a problem hiding this comment.
The recommendation was to not use a segmented control like a tab: https://github.rewatch.com/video/jlbodxdruw5bzc8b-accessibility-office-hours-august-3-2022?t=475.87
cc @simurai
There was a problem hiding this comment.
@mperrotti Thanks for bringing this up in the a11y office hour.
The recommendation was to not use a segmented control like a tab
As I understood it, SegmentedControl should behave like a list of buttons where each tab keypress moves to the next button and you can make it active by pressing enter or space.
But switching between "Write/Preview" in the comment box should use what they call a "composite widget". Where only one tab-stop exists and then you would use the arrow keys to toggle between "Write" and "Preview". Basically keep the current TabNav. Also keep using tabs should make it more clear that the two options are mutually exclusive.
| <DoDontContainer> | ||
| <Do> | ||
| <img | ||
| src="https://user-images.githubusercontent.com/2313998/180624830-b91217ae-7c79-4698-a71a-a482576e5df9.png" |
There was a problem hiding this comment.
The hover style shown in this image is looking a little squished. Is that also in the implementation?
There was a problem hiding this comment.
Yes, it's a 32x32 square with a 44px high click area on devices with a
"coarse" pointer: https://primer.style/react/storybook/?path=/story/segmentedcontrol-examples--icons-only
| Segmented controls must have a text label, even if the label is only accessible to screen readers. However, a | ||
| visible text label is preferred. |
There was a problem hiding this comment.
This is a little confusing. Can we list when a visual label is preferred? There are a number of scenarios where the context/location of the SegmentedControl are enough to understand what's it for.
There was a problem hiding this comment.
Can we list when a visual label is preferred?
I think we generally prefer visible labels for everything because it adds clarity. cc @alliethu or @ichelsea to keep me correct or add a better explanation.
There are a number of scenarios where the context/location of the SegmentedControl are enough to understand what's it for.
Great point. I'll make sure to directly mention that in this part of the docs
| A segmented control's width can stretch each button evenly to fill the width of the control's parent. This option is | ||
| intended to make the segmented control easier to adapt into different layouts. |
There was a problem hiding this comment.
When should we use full-width vs left-aligned?
There was a problem hiding this comment.
I had a hard time explaining this because I don't have any specific examples yet. Here are two slightly less vague use-cases:
- A designer might choose to use a full-width segmented control to make a cleaner layout where elements align to the left and right edges
- To make sure each button has an even width. If the text of one button is very long, that button would be very wide and have a heavier visual weight than the other buttons.
I think that extra information would just add confusion, and it's better not to try and specify use cases until we have a better example. What do you think?
Co-authored-by: simurai <[email protected]>
Co-authored-by: simurai <[email protected]>
|
I have to update the keyboard navigation video based on feedback from @jscholes. During a11y office hours, I learned that a segmented control's keyboard navigation should be like a list (use tabs to focus buttons), not a toolbar (use arrows to focus buttons). |
…esign into mp/segmented-control-guidelines
No description provided.