Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiAccordion] Update component logic to retain focus on <button> when clicked #7696

Merged
merged 5 commits into from
Apr 18, 2024
Merged

[EuiAccordion] Update component logic to retain focus on <button> when clicked #7696

merged 5 commits into from
Apr 18, 2024

Conversation

1Copenut
Copy link
Contributor

@1Copenut 1Copenut commented Apr 17, 2024 •
edited by cee-chen
Loading

Summary

This PR updates the EuiAccordion component to not move focus to the child component when the expand/collapse button is clicked. This came about from an accessibility audit that moving focus in this instance is in violation of SC 3.2.2: On Input (Level A).

Specifically, moving focus to the child container caused a change of context by resetting focus.

I don't believe this is a breaking change, but would ask reviewers to speak up early and loudly if they feel it might be a breaking change.

QA

Remove or strikethrough items that do not apply to your PR.

Manual QA

I checked in all four browsers. I reviewed the EuiAccordion and EuiCollapsibleNavGroup in the local staging site, and the beta collapsible nav in Storybook. I reviewed for axe-core violations, keyboard navigation, and screen reader usability with VoiceOver in Safari and Firefox. Reviewed NVDA (Firefox, Chrome) and JAWS (Chrome). All had consistent behavior and announcement.

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA - N/A
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)

@1Copenut 1Copenut self-assigned this Apr 17, 2024
@1Copenut 1Copenut requested a review from a team as a code owner April 17, 2024 21:45
@1Copenut 1Copenut requested a review from cee-chen April 17, 2024 21:48
1Copenut
1Copenut commented Apr 17, 2024
View reviewed changes
src/components/accordion/accordion_children/accordion_children.tsx
role={role}
tabIndex={-1}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It felt safe to remove the tabindex here because the only time it was being called was from our parent component to set focus programmatically. Given that's what we don't want anymore, seemed the right play.

@1Copenut
Copy link
Contributor Author

I mocked up a quick <details> / <summary> this morning to validate we are following standard pattern to keep focus on the trigger. Confirmed this to be accurate.

Screenshot 2024-04-18 at 9 21 28 AM

@cee-chen
Copy link
Member

This looks really great, awesome work Trevor! I'm going to push up some minor test cleanups (the entire describe block doesn't really make sense now that we're removing focus handling) and then merge

cee-chen
cee-chen approved these changes Apr 18, 2024
View reviewed changes
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

🚀

@cee-chen cee-chen changed the title [CHORE][EuiAccordion]: Update component logic to retain focus on <button> when clicked [EuiAccordion] Update component logic to retain focus on <button> when clicked Apr 18, 2024
@cee-chen cee-chen enabled auto-merge (squash) April 18, 2024 21:25
@kibanamachine
Copy link

Preview staging links for this PR:

@cee-chen cee-chen merged commit 860764b into elastic:main Apr 18, 2024
7 checks passed
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

cc @1Copenut

@cee-chen cee-chen mentioned this pull request Apr 29, 2024
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request May 3, 2024
@cee-chen @tkajtoch
Upgrade EUI to v94.2.1 (#182023)
31e8c54 
`v94.1.0-backport.0` ⏩ `v94.2.1-backport.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

##
[`v94.2.1-backport.0`](https://github.com/elastic/eui/releases/v94.2.1-backport.0)

**This is a backport release only intended for use by Kibana.**

- Reverted the `EuiFlexGroup`/`EuiFlexItem` `component` prop feature due
to Kibana typing issues

## [`v94.2.1`](https://github.com/elastic/eui/releases/v94.2.1)

**Bug fixes**

- Fixed an `EuiTabbedContent` edge case bug that occurred when updated
with a completely different set of `tabs`
([#7713](elastic/eui#7713))
- Fixed the `@storybook/test` dependency to be listed in
`devDependencies` and not `dependencies`
([#7719](elastic/eui#7719))

## [`v94.2.0`](https://github.com/elastic/eui/releases/v94.2.0)

- Updated `getDefaultEuiMarkdownPlugins()` to allow excluding the
following plugins in addition to `tooltip`:
([#7676](elastic/eui#7676))
  - `checkbox`
  - `linkValidator`
  - `lineBreaks`
  - `emoji`
- Updated `EuiSelectable`'s `isPreFiltered` prop to allow passing a
configuration object, which allows disabling search highlighting in
addition to search filtering
([#7683](elastic/eui#7683))
- Updated `EuiFlexGroup` and `EuiFlexItem` prop types to support passing
any valid React component type to the `component` prop and ensure proper
type checking of the extra props forwarded to the `component`.
([#7688](elastic/eui#7688))
- Updated `EuiSearchBar` to allow the `@` special character in query
string searches ([#7702](elastic/eui#7702))
- Added a new, optional `optionMatcher` prop to `EuiSelectable` and
`EuiComboBox` allowing passing a custom option matcher function to these
components and controlling option filtering for given search string
([#7709](elastic/eui#7709))

**Bug fixes**

- Fixed an `EuiPageTemplate` bug where prop updates would not cascade
down to child sections
([#7648](elastic/eui#7648))
- To cascade props down to the sidebar, `EuiPageTemplate` now explicitly
requires using the `EuiPageTemplate.Sidebar` rather than
`EuiPageSidebar`
- Fixed `EuiFieldNumber`'s typing to accept an icon configuration shape
([#7666](elastic/eui#7666))
- Fixed `EuiFieldText` and `EuiFieldNumber` to render the correct
paddings for icon shapes set to `side: 'right'`
([#7666](elastic/eui#7666))
- Fixed `EuiFieldText` and `EuiFieldNumber` to fully ignore
`icon`/`prepend`/`append` when `controlOnly` is set to true
([#7666](elastic/eui#7666))
- Fixed `EuiColorPicker`'s input not setting the correct right padding
for the number of icons displayed
([#7666](elastic/eui#7666))
- Visual fixes for `EuiRange`s with `showInput`:
([#7678](elastic/eui#7678))
  - Longer `append`/`prepend` labels no longer cause a background bug
  - Inputs can no longer overwhelm the actual range in width
- Fixed a visual text alignment regression in `EuiTableRowCell`s with
the `row` header scope
([#7681](elastic/eui#7681))
- Fixed `toolTipProps` type on `EuiSuperUpdateButton` to use
`Partial<EuiToolTipProps>`
([#7692](elastic/eui#7692))
- Fixes missing prop type for `popperProps` on `EuiDatePicker`
([#7694](elastic/eui#7694))
- Fixed a focus bug with `EuiDataGrid`s with `leadingControlColumns`
when moving columns to the left/right
([#7701](elastic/eui#7701))
([#7698](elastic/eui#7698))
- Fixed `EuiSuperDatePicker` to validate date string with respect of
locale on `EuiAbsoluteTab`.
([#7705](elastic/eui#7705))
- Fixed a visual bug with `EuiSuperDatePicker`'s absolute tab on small
mobile screens ([#7708](elastic/eui#7708))
- Fixed i18n of empty and loading state messages for the
`FieldValueSelectionFilter` component
([#7718](elastic/eui#7718))

**Dependency updates**

- Updated `@hello-pangea/dnd` to v16.6.0
([#7599](elastic/eui#7599))
- Updated `remark-rehype` to v8.1.0
([#7601](elastic/eui#7601))

**Accessibility**

- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes
to have unique aria-labels per row
([#7672](elastic/eui#7672))
- Added `aria-valuetext` attributes to `EuiRange`s with tick labels for
improved screen reader UX
([#7675](elastic/eui#7675))
- Updated `EuiAccordion` to keep focus on accordion trigger instead of
moving to content on click/keypress
([#7696](elastic/eui#7696))
- Added `aria-disabled` attribute to `EuiHorizontalSteps` when status is
"disabled" ([#7699](elastic/eui#7699))

---------

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
mgadewoll pushed a commit to mgadewoll/eui that referenced this pull request May 3, 2024
@1Copenut @cee-chen @mgadewoll
[EuiAccordion] Update component logic to retain focus on <button> w…
a51d62e 
…hen clicked (elastic#7696)

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cee-chen cee-chen cee-chen approved these changes

Assignees

@1Copenut 1Copenut

Labels
accessibility - keyboard accessibility - WCAG A Level A WCAG Accessibility Criteria accessibility chore
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@1Copenut @cee-chen @kibanamachine @elasticmachine