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:WorkplaceSearch:API keys page]API key page modal dialog, flyout missing title from announcement #201570

Closed
L1nBra opened this issue Nov 25, 2024 · 1 comment · Fixed by #202716
Closed

[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout missing title from announcement #201570

L1nBra opened this issue Nov 25, 2024 · 1 comment · Fixed by #202716
Assignees
@alexwizp
Labels
defect-level-3 Moderate UX disruption or potentially confusing deprecated-in-9.0 Feature marked as deprecated in v9.0. This label is used within the a11y project Project:Accessibility Team:Search WCAG A

Comments

@L1nBra
Copy link

L1nBra commented Nov 25, 2024

Description
Dialog modal, flyout visible title should be announced for the users, especially using assistive technology to know what dialog modal, flyout opened.

Preconditions
Stateful Workplace Search -> API keys page is opened.
Use Screen Reader (NVDA).

Steps to reproduce

1.Using only keyboard navigate to Create key button by pressing Tab key.
2.Press Enter.
3.Observe screen reader.
4.Close the flyout.
5.Navigate to Delete button.
6.Press Enter.
7.Observe screen reader.

UI elements + NVDA Speech Viewer
Image

Image

Actual Result

  • Flyout, dialog modal is announced only as "dialog".

Expected Result

  • Flyout, dialog modal is announced with the title. For flyout: "Create a new key dialog", for dialog modal: "Delete API key dialog".

Meta Issue

Kibana Version: 8.17.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 25, 2024
@L1nBra L1nBra added WCAG A Team:Search defect-level-3 Moderate UX disruption or potentially confusing labels Nov 25, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Nov 25, 2024
@alexwizp alexwizp self-assigned this Dec 3, 2024
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 3, 2024
@alexwizp
fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,…
5376b57 
… flyout missing title from announcement

Closes: elastic#201570
@alexwizp alexwizp mentioned this issue Dec 3, 2024
Merged
@alexwizp alexwizp added the deprecated-in-9.0 Feature marked as deprecated in v9.0. This label is used within the a11y project label Dec 5, 2024
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 5, 2024
@alexwizp
Merge branch 'main' into elastic#201570
39751bc
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 6, 2024
@alexwizp
Merge branch 'main' into elastic#201570
54aee2c
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 9, 2024
@alexwizp
Merge branch 'main' into elastic#201570
8577608
alexwizp added a commit to alexwizp/kibana that referenced this issue Dec 11, 2024
@alexwizp
Merge branch 'main' into elastic#201570
dfff7d8
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Dec 11, 2024
@alexwizp
fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,…
75bed87 
… flyout missing title from announcement (elastic#202716)

Closes: elastic#201570

**Description**
Dialog modal, flyout visible title should be announced for the users,
especially using assistive technology to know what dialog modal, flyout
opened.

**Preconditions**
Stateful Workplace Search -> API keys page is opened.
Use Screen Reader (NVDA).

**Steps to reproduce**

1.Using only keyboard navigate to Create key button by pressing Tab key.
2.Press Enter.
3.Observe screen reader.
4.Close the flyout.
5.Navigate to Delete button.
6.Press Enter.
7.Observe screen reader.

## Changes made:

1. aria-labelledby={modalTitleId} attribute was added for mentioned
EuiModal

## Screen:

<img width="988" alt="image"
src="https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88">

<img width="1194" alt="image"
src="https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c">

(cherry picked from commit 791aff0)
kibanamachine added a commit that referenced this issue Dec 11, 2024
@kibanamachine @alexwizp
[8.x] fix: [Search:WorkplaceSearch:API keys page]API key page modal d…
c8f3163 
…ialog, flyout missing title from announcement (#202716) (#203848)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,
flyout missing title from announcement
(#202716)](#202716)

<!--- 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-11T16:52:17Z","message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116","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:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from
announcement","number":202716,"url":"https://github.com/elastic/kibana/pull/202716","mergeCommit":{"message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116"}},"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/202716","number":202716,"mergeCommit":{"message":"fix:
[Search:WorkplaceSearch:API keys page]API key page modal dialog, flyout
missing title from announcement (#202716)\n\nCloses:
#201570\r\n\r\n**Description**\r\nDialog modal, flyout visible title
should be announced for the users,\r\nespecially using assistive
technology to know what dialog modal,
flyout\r\nopened.\r\n\r\n**Preconditions**\r\nStateful Workplace Search
-> API keys page is opened.\r\nUse Screen Reader (NVDA).\r\n\r\n**Steps
to reproduce**\r\n\r\n1.Using only keyboard navigate to Create key
button by pressing Tab key.\r\n2.Press Enter.\r\n3.Observe screen
reader.\r\n4.Close the flyout.\r\n5.Navigate to Delete
button.\r\n6.Press Enter.\r\n7.Observe screen reader.\r\n\r\n## Changes
made:\r\n\r\n1. aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n## Screen:\r\n\r\n<img width=\"988\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88\">\r\n\r\n<img
width=\"1194\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c\">","sha":"791aff08e454f87199572e03b884eefd6cd0b116"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Dec 12, 2024
@alexwizp @CAWilson94
fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,…
f78ba0a 
… flyout missing title from announcement (elastic#202716)

Closes: elastic#201570

**Description**
Dialog modal, flyout visible title should be announced for the users,
especially using assistive technology to know what dialog modal, flyout
opened.

**Preconditions**
Stateful Workplace Search -> API keys page is opened.
Use Screen Reader (NVDA).

**Steps to reproduce**

1.Using only keyboard navigate to Create key button by pressing Tab key.
2.Press Enter.
3.Observe screen reader.
4.Close the flyout.
5.Navigate to Delete button.
6.Press Enter.
7.Observe screen reader.

## Changes made:

1. aria-labelledby={modalTitleId} attribute was added for mentioned
EuiModal

## Screen:

<img width="988" alt="image"
src="https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88">

<img width="1194" alt="image"
src="https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c">
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this issue Jan 13, 2025
@alexwizp @CAWilson94
fix: [Search:WorkplaceSearch:API keys page]API key page modal dialog,…
8c08547 
… flyout missing title from announcement (elastic#202716)

Closes: elastic#201570

**Description**
Dialog modal, flyout visible title should be announced for the users,
especially using assistive technology to know what dialog modal, flyout
opened.

**Preconditions**
Stateful Workplace Search -> API keys page is opened.
Use Screen Reader (NVDA).

**Steps to reproduce**

1.Using only keyboard navigate to Create key button by pressing Tab key.
2.Press Enter.
3.Observe screen reader.
4.Close the flyout.
5.Navigate to Delete button.
6.Press Enter.
7.Observe screen reader.

## Changes made:

1. aria-labelledby={modalTitleId} attribute was added for mentioned
EuiModal

## Screen:

<img width="988" alt="image"
src="https://github.com/user-attachments/assets/a1dc3586-a725-410c-be39-645bee637b88">

<img width="1194" alt="image"
src="https://github.com/user-attachments/assets/aa4fba8e-4683-4bee-a5bc-8d4d2e9bd63c">
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 deprecated-in-9.0 Feature marked as deprecated in v9.0. This label is used within the a11y project Project:Accessibility Team:Search WCAG A
Projects
None yet
Milestone
No milestone
3 participants
@elasticmachine @alexwizp @L1nBra