SegmentedControl Fixing the line between buttons #2205
Conversation
|
jonrohan
changed the title
| display: inline-flex; | ||
|
|
||
| // stylelint-disable-next-line selector-max-compound-selectors | ||
| &:has([aria-current='true']) + li .SegmentedControl-button::before { |
There was a problem hiding this comment.
:has has very low browser support: https://caniuse.com/css-has
Are you intentionally making the dividers a progressive enhancement?
There was a problem hiding this comment.
Can't really think of a way to replace has(), except maybe moving the aria-current='true' to the parent li or some negative margin hack.
Just curious about comment primer/design#276 (comment)
a segmented control's keyboard navigation should be like a list (use tabs to focus buttons)
@mperrotti did you mean to literally use a <ul> and wrap the buttons in <li>s, or did you mean that the focus should just move from one button to the next (like in a list) when pressing tab. If the later, could we also just change the role="toolbar" to role="list" instead?
There was a problem hiding this comment.
I changed it to semantically be a <ul> in Primer React. Would you propose different markup?
There was a problem hiding this comment.
I tried at first relying on role only, but axe didn't like role="list" > button buttons being direct descendants of role list, and I couldn't apply role=listitem to the button
There was a problem hiding this comment.
Yea, buttons should stay role="button", and we shouldn't have descendants of role="list" that aren't role="listitem"
|
Now the selected button doesn't have the expected styles. I think this is probably because I'm still on Chrome 104 and I don't have
I'm going to ask whether |
|
I'm in a11y office hours now, and they said that |
|
closing this in favor of #2208 |
What are you trying to accomplish?
Fixes #2204
This fixes the selectors to correctly show the line after the component markup changed.
Before
Screen.Recording.2022-08-15.at.1.37.09.PM.mov
After
Screen.Recording.2022-08-15.at.1.35.37.PM.mov
What approach did you choose and why?
For the direct sibling of the currently selected button, I used
:haswhich doesn't have much support yet, but is growing quickly.In browsers that don't support
:hasyet, it's not too noticeable.What should reviewers focus on?
I'm open to suggestions on other ways to fix the line issue.
Can these changes ship as is?