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

[Stateful: Indices Overview page] Inaccurate announcement for programming language buttons #196282

Closed
L1nBra opened this issue Oct 15, 2024 · 1 comment · Fixed by #197428
Closed

[Stateful: Indices Overview page] Inaccurate announcement for programming language buttons #196282

L1nBra opened this issue Oct 15, 2024 · 1 comment · Fixed by #197428
Assignees
@alexwizp
Labels
defect-level-3 Moderate UX disruption or potentially confusing impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Project:Accessibility Team:Search WCAG A

Comments

@L1nBra
Copy link

L1nBra commented Oct 15, 2024

Description
Button elements should be clear and understandable for the users, using assistive technology as well.

Preconditions
Stateful Indices Overview page is opened.
Use Screen Reader (NVDA).

Steps to reproduce

1.Navigate to cURL button while using only keyboard by pressing Tab key (in Getting Started with Elastic API section).
2.Navigate through the buttons while pressing Tab key.
3.Observe screen reader announcement.

UI elements
Image

NVDA Speech Viewer
Image

Actual Result

  • Screen reader announces name of the button, heading level and that it is a button "cURL heading level 5 button".
    Same with all these buttons.

Expected Result

  • It should only be announced as button: name of the button and that it is a button element "cURL button".

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 129.0.6668.101 (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 Oct 15, 2024
@L1nBra L1nBra added WCAG A Team:Search defect-level-3 Moderate UX disruption or potentially confusing labels Oct 15, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 15, 2024
@L1nBra L1nBra added the impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. label Oct 17, 2024
@alexwizp alexwizp self-assigned this Oct 22, 2024
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 23, 2024
@alexwizp
fix: [Stateful: Indices Overview page] Inaccurate announcement for pr…
992871b 
…ogramming language buttons

Closes: elastic#196282
@alexwizp alexwizp mentioned this issue Oct 23, 2024
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Nov 5, 2024
@alexwizp
fix: [Stateful: Indices Overview page] Inaccurate announcement for pr…
71c921e 
…ogramming language buttons (elastic#197428)

Closes: elastic#196282

## Summary

Button elements should be clear and understandable to users, including
those using assistive technologies. `h5` tag looks unnatural inside a
button.

## What was changed?:

1. `h5` -> `strong`

## Screen:

<img width="1190" alt="image"
src="https://github.com/user-attachments/assets/ea02864f-4091-4cc9-a674-ebf1f4ee7499">

(cherry picked from commit 7f97c80)
kibanamachine added a commit that referenced this issue Nov 5, 2024
@kibanamachine @alexwizp
[8.x] fix: [Stateful: Indices Overview page] Inaccurate announcement …
f96bec2 
…for programming language buttons (#197428) (#199011)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Indices Overview page] Inaccurate announcement for
programming language buttons
(#197428)](#197428)

<!--- 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-11-05T15:38:44Z","message":"fix:
[Stateful: Indices Overview page] Inaccurate announcement for
programming language buttons (#197428)\n\nCloses: #196282\r\n\r\n##
Summary\r\n\r\nButton elements should be clear and understandable to
users, including\r\nthose using assistive technologies. `h5` tag looks
unnatural inside a\r\nbutton.\r\n\r\n## What was changed?: \r\n\r\n1.
`h5` -> `strong`\r\n\r\n## Screen: \r\n\r\n<img width=\"1190\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/ea02864f-4091-4cc9-a674-ebf1f4ee7499\">","sha":"7f97c8074f7d6c2adf4a7a35fa7ac96b25f6cfe4","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.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:
[Stateful: Indices Overview page] Inaccurate announcement for
programming language
buttons","number":197428,"url":"https://github.com/elastic/kibana/pull/197428","mergeCommit":{"message":"fix:
[Stateful: Indices Overview page] Inaccurate announcement for
programming language buttons (#197428)\n\nCloses: #196282\r\n\r\n##
Summary\r\n\r\nButton elements should be clear and understandable to
users, including\r\nthose using assistive technologies. `h5` tag looks
unnatural inside a\r\nbutton.\r\n\r\n## What was changed?: \r\n\r\n1.
`h5` -> `strong`\r\n\r\n## Screen: \r\n\r\n<img width=\"1190\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/ea02864f-4091-4cc9-a674-ebf1f4ee7499\">","sha":"7f97c8074f7d6c2adf4a7a35fa7ac96b25f6cfe4"}},"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/197428","number":197428,"mergeCommit":{"message":"fix:
[Stateful: Indices Overview page] Inaccurate announcement for
programming language buttons (#197428)\n\nCloses: #196282\r\n\r\n##
Summary\r\n\r\nButton elements should be clear and understandable to
users, including\r\nthose using assistive technologies. `h5` tag looks
unnatural inside a\r\nbutton.\r\n\r\n## What was changed?: \r\n\r\n1.
`h5` -> `strong`\r\n\r\n## Screen: \r\n\r\n<img width=\"1190\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/ea02864f-4091-4cc9-a674-ebf1f4ee7499\">","sha":"7f97c8074f7d6c2adf4a7a35fa7ac96b25f6cfe4"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
mgadewoll pushed a commit to mgadewoll/kibana that referenced this issue Nov 7, 2024
@alexwizp @mgadewoll
fix: [Stateful: Indices Overview page] Inaccurate announcement for pr…
a12683a 
…ogramming language buttons (elastic#197428)

Closes: elastic#196282

## Summary

Button elements should be clear and understandable to users, including
those using assistive technologies. `h5` tag looks unnatural inside a
button.

## What was changed?: 

1. `h5` -> `strong`

## Screen: 

<img width="1190" alt="image"
src="https://github.com/user-attachments/assets/ea02864f-4091-4cc9-a674-ebf1f4ee7499">
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 impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. Project:Accessibility Team:Search WCAG A
Projects
None yet
Milestone
No milestone
3 participants
@elasticmachine @alexwizp @L1nBra