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.

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

[Stateful: Home page] Additional elements and words announced when expanding Code editor #195358

Closed
L1nBra opened this issue Oct 8, 2024 · 2 comments · Fixed by #195922
Closed
Assignees
Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG A

Comments

@L1nBra
Copy link

L1nBra commented Oct 8, 2024

Description
Only elements which are a part of Code editor should be announced for the user as not to confuse him/her.

Preconditions
Stateful Home page (Overview) is opened.
Switch for Security Privileges is enabled.
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 switch button in Security Privileges section.
4.Press Enter or Space bar key.
5.Navigate to Expand button in Code editor.
6.Press Enter key.

NVDA Speech Viewer
Image

Actual Result

  • Screen reader announces New button (which is directly on Home page, but not on the expanded Code editor), no announcement that Code editor is expanded and for Copy button it is announced that it is clickable.
    Same behavior with Code editor for Metadata.

Expected Result

  • After clicking Expand button it should be announced as expanded and because focus on the expanded editor is on Copy button, Copy button should be announced without word clickable, because it is a button and user can understand that he/she needs to click it. No announcement of New 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 8, 2024
@L1nBra L1nBra added WCAG A defect-level-2 Serious UX disruption with workaround and removed needs-team Issues missing a team label labels Oct 8, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 8, 2024
@L1nBra L1nBra added defect-level-3 Moderate UX disruption or potentially confusing and removed defect-level-2 Serious UX disruption with workaround labels Oct 9, 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 14, 2024
@alexwizp
Copy link
Contributor

@L1nBra the broken background threw you off a bit. In full-screen mode Expand + Copy button also should be available. I think it will be more clear after merging #195922

kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 15, 2024
…#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
Labels
defect-level-3 Moderate UX disruption or potentially confusing Project:Accessibility Team:Search WCAG A
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants