Skip to content

Conversation

@jzempel
Copy link
Member

@jzempel jzempel commented Apr 4, 2024

Description

Currently the structure detailed below currently fails WCAG accessibility by violating the following:

Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies

This PR ensures that the <Pane.SplitterButton> will be rendered as a sibling after <Pane.Splitter> rather than a child. The updated positioning logic prevents the ::before pseudo backing "dish" hack behind the transparent <ChevronButton>. As a result positioning, box-shadow, stacking, and opacity CSS was moved from StyledPaneSplitterButton to a new backing StyledPaneSplitterButtonContainer div. The result is an overall simplification of the styling structure.

Detail

The JSX structure remains the same (non-breaking)

<Pane>
  <Pane.Content>...</PaneContent>
  <Pane.Splitter>
    <Pane.SplitterButton />
  <Pane.Splitter>
</Pane>

Checklist

  • 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
  • 🌐 demo is up-to-date (npm start)
  • ⬅️ renders as expected with reversed (RTL) direction
  • 🤘 renders as expected with Bedrock CSS (?bedrock)
  • 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
  • ♿ tested for WCAG 2.1 AA accessibility compliance
  • 📝 tested in Chrome, Firefox, Safari, and Edge

@jzempel jzempel requested a review from a team as a code owner April 4, 2024 12:10
@jzempel jzempel changed the title fix(pane): ensure Pane.SplitterButton is rendered as a sibling, rather than child, of Pane.Splitter fix(grid): ensure Pane.SplitterButton is rendered as a sibling, rather than child, of Pane.Splitter Apr 4, 2024
Copy link
Contributor

@geotrev geotrev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Smooth as butta'

@jzempel jzempel merged commit 02ca31d into main Apr 4, 2024
@jzempel jzempel deleted the jzempel/splitter-a11y branch April 4, 2024 14:40
jzempel added a commit that referenced this pull request Apr 4, 2024
jzempel added a commit that referenced this pull request Apr 4, 2024
* chore(deps): update non-major shared dependencies (#1765)
* chore(deps): update typescript-eslint monorepo to v7 (#1769)
* chore(deps): update dependency @storybook/addon-designs to v8 (#1766)
* chore(deps): update dependency @zendeskgarden/eslint-config to v39 (#1767)
* fix(dropdowns.next): prevent combobox `Option` and menu `Item` overflow (#1777)
* chore(deps): update non-major shared dependencies (#1772)
* fix(forms): `InputGroup` toggle button stacking (#1778)
* fix(grid): ensure `Pane.SplitterButton` is rendered as a sibling, rather than child, of `Pane.Splitter` (#1776)
* chore(changelog): add v8.75.1
@coveralls
Copy link

Coverage Status

coverage: 96.348% (+0.2%) from 96.194%
when pulling 1a683bc on jzempel/splitter-a11y
into 44ad08f on main.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.

5 participants