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] Not checked radio button receive focus as first element in radio group. #195190

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

[Stateful: Home page] Not checked radio button receive focus as first element in radio group. #195190

L1nBra opened this issue Oct 7, 2024 · 1 comment · Fixed by #195745
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
According to ARIA Authoring Practices Guide, focus should be on the checked radio button when the user reaches radio group while navigating using only keyboard. As of now, because all the time first radio button in the group receives focus, even if it is not checked, it may cause confusion and could potentially lead users to unintentionally change their selection without checking all checkboxes which exist in the group.

Preconditions
Stateful Home page (Overview) is opened.
In days radio button is checked.

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 radio buttons for Expires.
4.Press Tab key.

Radio buttons element
Image

Actual Result

  • Focus is on the first radio button Never.
    Similar behavior when navigating from down to top while pressing Shift + Tab and if Never radio button is checked - focus is on in days radio button not on the checked one.

Expected Result

  • Focus should go to the checked radio button, in this case in days.

Meta Issue

Kibana Version: 8.16.0-SNAPSHOT

OS: Windows 11 Pro

Browser: Chrome Version 129.0.6668.70 (Official Build) (64-bit)

WCAG or Vendor Guidance (optional)

Relevant ARIA spec: Radio Group Pattern(https://www.w3.org/WAI/ARIA/apg/patterns/radio/)

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 and removed needs-team Issues missing a team label labels Oct 7, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 7, 2024
@L1nBra L1nBra added defect-level-2 Serious UX disruption with workaround and removed needs-team Issues missing a team label labels Oct 7, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Oct 7, 2024
@alexwizp alexwizp self-assigned this 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 added a commit to alexwizp/kibana that referenced this issue Oct 10, 2024
@alexwizp
fix: [Stateful: Home page] Not checked radio button receive focus as …
ac61eb5 
…first element in radio group.

Closes: elastic#195190
@alexwizp alexwizp mentioned this issue Oct 10, 2024
Merged
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 10, 2024
@alexwizp
Merge branch 'main' into elastic#195190
444218a
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 11, 2024
@alexwizp
Merge branch 'main' into elastic#195190
fb9388a
alexwizp added a commit to alexwizp/kibana that referenced this issue Oct 14, 2024
@alexwizp
Merge branch 'main' into elastic#195190
55deee2
@L1nBra L1nBra mentioned this issue Oct 15, 2024
Closed
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 15, 2024
@alexwizp
fix: [Stateful: Home page] Not checked radio button receive focus a f…
ba7788c 
…irst element in radio group. (elastic#195745)

Closes: elastic#195190

## Description

According to ARIA Authoring Practices Guide, focus should be on the
checked radio button when the user reaches radio group while navigating
using only keyboard. As of now, because all the time first radio button
in the group receives focus, even if it is not checked, it may cause
confusion and could potentially lead users to unintentionally change
their selection without checking all checkboxes which exist in the
group.

## What was changed:
1. Added name attribute for `EuiRadioGroup`.

## Screen:

https://github.com/user-attachments/assets/20db2394-b9db-4c40-9e72-53ee860cd066
(cherry picked from commit 2c1d5ce)
kibanamachine added a commit that referenced this issue Oct 15, 2024
@kibanamachine @alexwizp
[8.x] fix: [Stateful: Home page] Not checked radio button receive foc…
68ca739 
…us a first element in radio group. (#195745) (#196273)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Stateful: Home page] Not checked radio button receive focus a
first element in radio group.
(#195745)](#195745)

<!--- 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-10-15T10:33:30Z","message":"fix:
[Stateful: Home page] Not checked radio button receive focus a first
element in radio group. (#195745)\n\nCloses: #195190\r\n\r\n##
Description \r\n\r\nAccording to ARIA Authoring Practices Guide, focus
should be on the\r\nchecked radio button when the user reaches radio
group while navigating\r\nusing only keyboard. As of now, because all
the time first radio button\r\nin the group receives focus, even if it
is not checked, it may cause\r\nconfusion and could potentially lead
users to unintentionally change\r\ntheir selection without checking all
checkboxes which exist in the\r\ngroup.\r\n\r\n## What was changed:
\r\n1. Added name attribute for `EuiRadioGroup`. \r\n\r\n## Screen:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/20db2394-b9db-4c40-9e72-53ee860cd066","sha":"2c1d5ce08fa55275148e61012aa49061f01c3dd9","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.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: Home page] Not checked radio button receive focus a first
element in radio
group.","number":195745,"url":"https://github.com/elastic/kibana/pull/195745","mergeCommit":{"message":"fix:
[Stateful: Home page] Not checked radio button receive focus a first
element in radio group. (#195745)\n\nCloses: #195190\r\n\r\n##
Description \r\n\r\nAccording to ARIA Authoring Practices Guide, focus
should be on the\r\nchecked radio button when the user reaches radio
group while navigating\r\nusing only keyboard. As of now, because all
the time first radio button\r\nin the group receives focus, even if it
is not checked, it may cause\r\nconfusion and could potentially lead
users to unintentionally change\r\ntheir selection without checking all
checkboxes which exist in the\r\ngroup.\r\n\r\n## What was changed:
\r\n1. Added name attribute for `EuiRadioGroup`. \r\n\r\n## Screen:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/20db2394-b9db-4c40-9e72-53ee860cd066","sha":"2c1d5ce08fa55275148e61012aa49061f01c3dd9"}},"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/195745","number":195745,"mergeCommit":{"message":"fix:
[Stateful: Home page] Not checked radio button receive focus a first
element in radio group. (#195745)\n\nCloses: #195190\r\n\r\n##
Description \r\n\r\nAccording to ARIA Authoring Practices Guide, focus
should be on the\r\nchecked radio button when the user reaches radio
group while navigating\r\nusing only keyboard. As of now, because all
the time first radio button\r\nin the group receives focus, even if it
is not checked, it may cause\r\nconfusion and could potentially lead
users to unintentionally change\r\ntheir selection without checking all
checkboxes which exist in the\r\ngroup.\r\n\r\n## What was changed:
\r\n1. Added name attribute for `EuiRadioGroup`. \r\n\r\n## Screen:
\r\n\r\n\r\nhttps://github.com/user-attachments/assets/20db2394-b9db-4c40-9e72-53ee860cd066","sha":"2c1d5ce08fa55275148e61012aa49061f01c3dd9"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>
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
3 participants
@elasticmachine @alexwizp @L1nBra