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

[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set dialog modal is announced by screen reader #202272

Closed
L1nBra opened this issue Nov 29, 2024 · 1 comment · Fixed by #202417
Closed

[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set dialog modal is announced by screen reader #202272

L1nBra opened this issue Nov 29, 2024 · 1 comment · Fixed by #202417
Assignees
@alexwizp
Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG A

Comments

@L1nBra
Copy link

L1nBra commented Nov 29, 2024

Description
Buttons which are behind dialog modals shouldn't be announced for the user using assistive technology.

Preconditions
Stateful App Search -> Engines -> Synonyms page is opened.
Engine is added.
Use Screen Reader (NVDA).

Steps to reproduce

1.Navigate to Manage button while using only keyboard by pressing Tab key.
2.Press Enter.
3.Delete only a row from the dialog.
4.Observe screen reader.

UI elements + NVDA Speech Viewer
Image

Actual Result

  • "button Manage" is announced which is behind the dialog.
    Same behavior when deleting a set.

Expected Result

  • Manage button is not announced.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 130.0.6723.70 (Official Build) (64-bit)

Screen reader: NVDA

WCAG or Vendor Guidance (optional)

Related to: https://github.com/elastic/search-team/issues/8256
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@botelastic botelastic bot added the needs-team Issues missing a team label label Nov 29, 2024
@L1nBra L1nBra added WCAG A Team:Search defect-level-3 Moderate UX disruption or potentially confusing and removed needs-team Issues missing a team label labels Nov 29, 2024
@alexwizp alexwizp self-assigned this Dec 2, 2024
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 2, 2024
@alexwizp
fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage syn…
ead50a7 
…onym set dialog modal is announced by screen reader

Closes: elastic#202272
@alexwizp alexwizp mentioned this issue Dec 2, 2024
Merged
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 2, 2024
@alexwizp
fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage syn…
7a0f71f 
…onym set dialog modal is announced by screen reader

Closes: elastic#202272
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 3, 2024
@alexwizp
Merge branch 'main' into elastic#202272
7df254d
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Dec 4, 2024
@alexwizp
fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage syn…
c0d68b3 
…onym set dialog modal is announced by screen reader (elastic#202417)

Closes: elastic#202272

## Description
Buttons which are behind dialog modals shouldn't be announced for the
user using assistive technology.

## Changes Made:
1. The DELETE_VALUE_BUTTON_LABEL translation was updated to include the
row index in its value.
2. A container with role="group" was created for input values. Now, the
container is focused when the "Delete row" item is pressed.

## Screen

<img width="1135" alt="image"
src="https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61">

(cherry picked from commit 258754d)
kibanamachine added a commit that referenced this issue Dec 4, 2024
@kibanamachine @alexwizp
[8.x] fix: [Search:AppSearch:Engines:Synonyms page]Button behind Mana…
5ccdaed 
…ge synonym set dialog modal is announced by screen reader (#202417) (#202871)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage
synonym set dialog modal is announced by screen reader
(#202417)](#202417)

<!--- 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-12-04T06:18:18Z","message":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen reader (#202417)\n\nCloses:
#202272\r\n\r\n## Description\r\nButtons which are behind dialog modals
shouldn't be announced for the\r\nuser using assistive
technology.\r\n\r\n## Changes Made:\r\n1. The DELETE_VALUE_BUTTON_LABEL
translation was updated to include the\r\nrow index in its value.\r\n2.
A container with role=\"group\" was created for input values. Now,
the\r\ncontainer is focused when the \"Delete row\" item is
pressed.\r\n\r\n## Screen\r\n\r\n<img width=\"1135\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61\">","sha":"258754d011d4fcc1be2ebe5834215e019c834949","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen
reader","number":202417,"url":"https://github.com/elastic/kibana/pull/202417","mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen reader (#202417)\n\nCloses:
#202272\r\n\r\n## Description\r\nButtons which are behind dialog modals
shouldn't be announced for the\r\nuser using assistive
technology.\r\n\r\n## Changes Made:\r\n1. The DELETE_VALUE_BUTTON_LABEL
translation was updated to include the\r\nrow index in its value.\r\n2.
A container with role=\"group\" was created for input values. Now,
the\r\ncontainer is focused when the \"Delete row\" item is
pressed.\r\n\r\n## Screen\r\n\r\n<img width=\"1135\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61\">","sha":"258754d011d4fcc1be2ebe5834215e019c834949"}},"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/202417","number":202417,"mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Synonyms page]Button behind Manage synonym set
dialog modal is announced by screen reader (#202417)\n\nCloses:
#202272\r\n\r\n## Description\r\nButtons which are behind dialog modals
shouldn't be announced for the\r\nuser using assistive
technology.\r\n\r\n## Changes Made:\r\n1. The DELETE_VALUE_BUTTON_LABEL
translation was updated to include the\r\nrow index in its value.\r\n2.
A container with role=\"group\" was created for input values. Now,
the\r\ncontainer is focused when the \"Delete row\" item is
pressed.\r\n\r\n## Screen\r\n\r\n<img width=\"1135\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61\">","sha":"258754d011d4fcc1be2ebe5834215e019c834949"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
hop-dev pushed a commit to hop-dev/kibana that referenced this issue Dec 5, 2024
@alexwizp @hop-dev
fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage syn…
8b7839a 
…onym set dialog modal is announced by screen reader (elastic#202417)

Closes: elastic#202272

## Description
Buttons which are behind dialog modals shouldn't be announced for the
user using assistive technology.

## Changes Made:
1. The DELETE_VALUE_BUTTON_LABEL translation was updated to include the
row index in its value.
2. A container with role="group" was created for input values. Now, the
container is focused when the "Delete row" item is pressed.

## Screen

<img width="1135" alt="image"
src="https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61">
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Dec 9, 2024
@alexwizp @CAWilson94
fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage syn…
a6f7f86 
…onym set dialog modal is announced by screen reader (elastic#202417)

Closes: elastic#202272

## Description
Buttons which are behind dialog modals shouldn't be announced for the
user using assistive technology.

## Changes Made:
1. The DELETE_VALUE_BUTTON_LABEL translation was updated to include the
row index in its value.
2. A container with role="group" was created for input values. Now, the
container is focused when the "Delete row" item is pressed.

## Screen

<img width="1135" alt="image"
src="https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61">
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Dec 12, 2024
@alexwizp @CAWilson94
fix: [Search:AppSearch:Engines:Synonyms page]Button behind Manage syn…
6e26ca3 
…onym set dialog modal is announced by screen reader (elastic#202417)

Closes: elastic#202272

## Description
Buttons which are behind dialog modals shouldn't be announced for the
user using assistive technology.

## Changes Made:
1. The DELETE_VALUE_BUTTON_LABEL translation was updated to include the
row index in its value.
2. A container with role="group" was created for input values. Now, the
container is focused when the "Delete row" item is pressed.

## Screen

<img width="1135" alt="image"
src="https://github.com/user-attachments/assets/919a547c-f878-430b-b187-1273e698bb61">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@alexwizp alexwizp

Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG A
Projects
None yet
Milestone
No milestone
3 participants
@elasticmachine @alexwizp @L1nBra