Revisions to New Focus Styles & Updated Styling for Button Groups

Link

edited Apr 27 at 1:00

Community Bot

1

Question Protected by CommunityBot

occurred Mar 29 at 15:26

Added link to new stacks docs

Source Link

edited Mar 28 at 15:27

Carrott Staff

2.8k
1
13
19

We’ve released a design update to focus styles across the many components within our design system and as well as a new design for our button group component. See more details on how we approach accessibility in our Stacks documentation.

Wrong word was used

Source Link

edited Mar 26 at 19:06

Sonic the Anonymous Hedgehog

99.3k
17
201
425

Prior to these recent changes, we would commonly apply a custom focus ring around elements to indicate an element was focused. There were several issues with this approach. For one, this focus ring was usually well below the 3:1 contrast ratio needed to meet WCAG (Level AA) standards. Also, the focus ring was always rendered as a ring outside of the focused element, meaning it would often be obscured when it exceeded the boundaries of its parent element. Additionally, we often set outline: none on elements that have this custom focus ring so an outline would not clash with our custom style, and since OS-level forced color modes often rely on applying an outline to indicate focus, our explicit removal of any outline meant that these force color modes couldwould not indicate that an element was focused.

TopbarTop bar

Prior to these recent changes, we would commonly apply a custom focus ring around elements to indicate an element was focused. There were several issues with this approach. For one, this focus ring was usually well below the 3:1 contrast ratio needed to meet WCAG (Level AA) standards. Also, the focus ring was always rendered as a ring outside of the focused element, meaning it would often be obscured when it exceeded the boundaries of its parent element. Additionally, we often set outline: none on elements that have this custom focus ring so an outline would not clash with our custom style, and since OS-level forced color modes often rely on applying an outline to indicate focus, our explicit removal of any outline meant that these force color modes could not indicate that an element was focused.

Topbar

Prior to these recent changes, we would commonly apply a custom focus ring around elements to indicate an element was focused. There were several issues with this approach. For one, this focus ring was usually well below the 3:1 contrast ratio needed to meet WCAG (Level AA) standards. Also, the focus ring was always rendered as a ring outside of the focused element, meaning it would often be obscured when it exceeded the boundaries of its parent element. Additionally, we often set outline: none on elements that have this custom focus ring so an outline would not clash with our custom style, and since OS-level forced color modes often rely on applying an outline to indicate focus, our explicit removal of any outline meant that these force color modes would not indicate that an element was focused.