[Obs Services > Create Service Group modal][KEYBOARD]: Focus should not be auto-set on first input when modal appears #194965
Assignees
Labels
defect-level-2
Serious UX disruption with workaround
obs-accessibilty
A11Y issues in the Obs. solution.
Project:Accessibility
Team:obs-ux-infra_services
Observability Infrastructure & Services User Experience Team
WCAG A
Comments
smith
added
the
Team:obs-ux-infra_services
alexwizp
referenced
this issue
in alexwizp/kibana
Oct 2, 2024
…uld not be auto-set on first input when modal appears Closes: https://github.com/elastic/observability-accessibility/issues/25 Closes: https://github.com/elastic/observability-accessibility/issues/26
2 tasks
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Oct 7, 2024
…uld not be auto-set on first input when modal appears (elastic#194696) Closes: elastic#194965 Closes: elastic#194966 # Description - [x] elastic#194965 <br /> Focus is currently being set on the first input in the "Create group" modal. Screen reader users will hear the input name, but not get the title of the modal read aloud this way, and it could be confusing. We should be letting the EuiModal set focus naturally on the modal or close button so screen reader users hear the title as expected. - [x] elastic#194966 <br /> Focus must be returned properly when I cancel the "Create group" workflow in Services > Create service group modal. # Changes Made 1. Removed: ```diff - inputRef.current?.focus(); // autofocus on initial render ``` 2. Added `aria-labelledby={modalTitleId}` for `EuiModal`. See https://eui.elastic.co/#/layout/modal. 3. Slightly updated `Name` and `Color` validation. # Screen https://github.com/user-attachments/assets/6636f2dc-b9b7-4d4d-8144-90249f8327e7 (cherry picked from commit d576365)
kibanamachine
added a commit
that referenced
this issue
Oct 7, 2024
…Focus should not be auto-set on first input when modal appears (#194696) (#195235) # Backport This will backport the following commits from `main` to `8.x`: - [fix: [Obs Services > Create Service Group modal][KEYBOARD]: Focus should not be auto-set on first input when modal appears (#194696)](#194696) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-07T12:04:39Z","message":"fix: [Obs Services > Create Service Group modal][KEYBOARD]: Focus should not be auto-set on first input when modal appears (#194696)\n\nCloses: #194965 \r\nCloses: https://github.com/elastic/kibana/issues/194966\r\n\r\n# Description \r\n\r\n- [x] #194965 <br /> Focus is\r\ncurrently being set on the first input in the \"Create group\" modal.\r\nScreen reader users will hear the input name, but not get the title of\r\nthe modal read aloud this way, and it could be confusing. We should be\r\nletting the EuiModal set focus naturally on the modal or close button so\r\nscreen reader users hear the title as expected.\r\n\r\n\r\n- [x] #194966 <br /> Focus must\r\nbe returned properly when I cancel the \"Create group\" workflow in\r\nServices > Create service group modal.\r\n\r\n# Changes Made\r\n\r\n1. Removed:\r\n\r\n```diff \r\n- inputRef.current?.focus(); // autofocus on initial render\r\n```\r\n\r\n2. Added `aria-labelledby={modalTitleId}` for `EuiModal`. See\r\nhttps://eui.elastic.co/#/layout/modal.\r\n3. Slightly updated `Name` and `Color` validation.\r\n\r\n\r\n# Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6636f2dc-b9b7-4d4d-8144-90249f8327e7","sha":"d5763658c39856aefb5e15fa9e3e771f8bb0d613","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","apm:review"],"title":"fix: [Obs Services > Create Service Group modal][KEYBOARD]: Focus should not be auto-set on first input when modal appears","number":194696,"url":"https://github.com/elastic/kibana/pull/194696","mergeCommit":{"message":"fix: [Obs Services > Create Service Group modal][KEYBOARD]: Focus should not be auto-set on first input when modal appears (#194696)\n\nCloses: #194965 \r\nCloses: https://github.com/elastic/kibana/issues/194966\r\n\r\n# Description \r\n\r\n- [x] #194965 <br /> Focus is\r\ncurrently being set on the first input in the \"Create group\" modal.\r\nScreen reader users will hear the input name, but not get the title of\r\nthe modal read aloud this way, and it could be confusing. We should be\r\nletting the EuiModal set focus naturally on the modal or close button so\r\nscreen reader users hear the title as expected.\r\n\r\n\r\n- [x] #194966 <br /> Focus must\r\nbe returned properly when I cancel the \"Create group\" workflow in\r\nServices > Create service group modal.\r\n\r\n# Changes Made\r\n\r\n1. Removed:\r\n\r\n```diff \r\n- inputRef.current?.focus(); // autofocus on initial render\r\n```\r\n\r\n2. Added `aria-labelledby={modalTitleId}` for `EuiModal`. See\r\nhttps://eui.elastic.co/#/layout/modal.\r\n3. Slightly updated `Name` and `Color` validation.\r\n\r\n\r\n# Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6636f2dc-b9b7-4d4d-8144-90249f8327e7","sha":"d5763658c39856aefb5e15fa9e3e771f8bb0d613"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194696","number":194696,"mergeCommit":{"message":"fix: [Obs Services > Create Service Group modal][KEYBOARD]: Focus should not be auto-set on first input when modal appears (#194696)\n\nCloses: #194965 \r\nCloses: https://github.com/elastic/kibana/issues/194966\r\n\r\n# Description \r\n\r\n- [x] #194965 <br /> Focus is\r\ncurrently being set on the first input in the \"Create group\" modal.\r\nScreen reader users will hear the input name, but not get the title of\r\nthe modal read aloud this way, and it could be confusing. We should be\r\nletting the EuiModal set focus naturally on the modal or close button so\r\nscreen reader users hear the title as expected.\r\n\r\n\r\n- [x] #194966 <br /> Focus must\r\nbe returned properly when I cancel the \"Create group\" workflow in\r\nServices > Create service group modal.\r\n\r\n# Changes Made\r\n\r\n1. Removed:\r\n\r\n```diff \r\n- inputRef.current?.focus(); // autofocus on initial render\r\n```\r\n\r\n2. Added `aria-labelledby={modalTitleId}` for `EuiModal`. See\r\nhttps://eui.elastic.co/#/layout/modal.\r\n3. Slightly updated `Name` and `Color` validation.\r\n\r\n\r\n# Screen\r\n\r\n\r\nhttps://github.com/user-attachments/assets/6636f2dc-b9b7-4d4d-8144-90249f8327e7","sha":"d5763658c39856aefb5e15fa9e3e771f8bb0d613"}}]}] BACKPORT--> Co-authored-by: Alexey Antonov <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Point of contact
@petrklapka
Description
Focus is currently being set on the first input in the "Create group" modal. Screen reader users will hear the input name, but not get the title of the modal read aloud this way, and it could be confusing. We should be letting the
EuiModalset focus naturally on the modal or close button so screen reader users hear the title as expected. Screenshots attached below.Steps to recreate
Environment
Screenshots or Trace Logs
WCAG or Vendor Guidance (optional)
The text was updated successfully, but these errors were encountered: