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: Home page] Wrong announcement of code editor #195289

Closed
L1nBra opened this issue Oct 7, 2024 · 1 comment · Fixed by #195922
Closed

[Stateful: Home page] Wrong announcement of code editor #195289

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

Comments

@L1nBra
Copy link

L1nBra commented Oct 7, 2024 •
edited
Loading

Description
Correct roles for elements should be used for user to understand with what type of element he/she is interacting.

Preconditions
Stateful Home page (Overview) is opened.
Switch enabled for Security Privileges and Security Privileges are expanded.
Use Screen Reader (NVDA).

Steps to reproduce

1.Navigate to New button while using only keyboard by pressing Tab key.
2.Press Enter.
3.Navigate while pressing Tab key to Code editor in Security Privileges section.
4.Observe Screen Reader announcement.

UI element code editor
Image

NVDA Speech Viewer
Image

Actual Result

  • This element is announced as button.
    Same behavior with Code Editor in Metadata section.

Expected Result

  • It is an an editable text area, so user should hear that it is an editor not a button.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 129.0.6668.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 Oct 7, 2024
@L1nBra L1nBra added WCAG A defect-level-2 Serious UX disruption with workaround defect-level-3 Moderate UX disruption or potentially confusing and removed defect-level-2 Serious UX disruption with workaround labels Oct 7, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 10, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 10, 2024
@botelastic botelastic bot removed the needs-team Issues missing a team label label Oct 10, 2024
@alexwizp alexwizp self-assigned this Oct 11, 2024
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 11, 2024
@alexwizp
fix: [Stateful: Home page] Wrong announcement of code editor
97e0a5c 
Closes: elastic#195289
@alexwizp alexwizp mentioned this issue Oct 11, 2024
Merged
alexwizp added a commit that referenced this issue Oct 15, 2024
@alexwizp
fix: [Stateful: Home page] Wrong announcement of code editor (#195922)
04efa04 
Closes: #195289
Closes: #195198
Closes: #195358

## Description 

- The text editor must be fully accessible and functional across all
devices, ensuring users can edit text using various input methods, not
just a mouse. This functionality should be available in both the
expanded and collapsed states.

- Appropriate aria-label attribute must be assigned to elements to
provide users with clear context and understanding of the type of
element they are interacting with. This enhances usability and
accessibility for all users.

## What was changed: 

- Updated the aria-label attribute for the editor button to improve
accessibility.
- Resolved an issue with the background color when activating
full-screen mode from the dialog.
- Fixed keyboard navigation for full-screen mode, enabling users to
activate Edit Mode using only the keyboard.

## Screen 


https://github.com/user-attachments/assets/af122fab-3ce9-4a7f-b8b1-d75d39969781
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 15, 2024
@alexwizp
fix: [Stateful: Home page] Wrong announcement of code editor (elastic…
01fafc9 
…#195922)

Closes: elastic#195289
Closes: elastic#195198
Closes: elastic#195358

## Description

- The text editor must be fully accessible and functional across all
devices, ensuring users can edit text using various input methods, not
just a mouse. This functionality should be available in both the
expanded and collapsed states.

- Appropriate aria-label attribute must be assigned to elements to
provide users with clear context and understanding of the type of
element they are interacting with. This enhances usability and
accessibility for all users.

## What was changed:

- Updated the aria-label attribute for the editor button to improve
accessibility.
- Resolved an issue with the background color when activating
full-screen mode from the dialog.
- Fixed keyboard navigation for full-screen mode, enabling users to
activate Edit Mode using only the keyboard.

## Screen

https://github.com/user-attachments/assets/af122fab-3ce9-4a7f-b8b1-d75d39969781
(cherry picked from commit 04efa04)
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
Development

Successfully merging a pull request may close this issue.

fix: [Stateful: Home page] Wrong announcement of code editor alexwizp/kibana
3 participants
@elasticmachine @alexwizp @L1nBra