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

[EuiCodeBlock] Check and improve accessibility of expanding code blocks #8175

Open
2 tasks
mgadewoll opened this issue Nov 22, 2024 · 0 comments · May be fixed by #8195
Open
2 tasks

[EuiCodeBlock] Check and improve accessibility of expanding code blocks #8175

mgadewoll opened this issue Nov 22, 2024 · 0 comments · May be fixed by #8195
Assignees

Comments

@mgadewoll
Copy link
Contributor

mgadewoll commented Nov 22, 2024

🔗 Caused by: elastic/kibana#196339

Description

When expanding an EuiCodeBlack it opens a fullscreen overlay with focus trap. This does not announce any change for screen readers currently.
We should ensure that the change is announced to users and DOM elements are marked semantically.

Additionally the EuiCodeBlock is focusable to provide means to scroll overflown content by keyboard when a height is set (related listbox pattern) but the element does not have any semantic role announced to users.

Acceptance criteria

  • (focusable) code blocks provide semantic information about what they are (code block)
  • expanded code block is perceivable as such and the movement from the expand button to the expanded code block is clear
@mgadewoll mgadewoll self-assigned this Nov 22, 2024
@mgadewoll mgadewoll linked a pull request Nov 28, 2024 that will close this issue
19 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant