Skip to content

Commit

Permalink
fix: [Stateful: Home page] Not checked radio button receive focus a f…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
alexwizp authored Oct 15, 2024
1 parent 0ccfb70 commit 2c1d5ce
Showing 1 changed file with 1 addition and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ export const BasicSetupForm: React.FC<BasicSetupFormProps> = ({
'data-test-subj': 'create-api-key-expires-days-radio',
},
]}
name="create-api-key-expires-group"
idSelected={expires === null ? 'never' : 'days'}
onChange={(id) => onChangeExpires(id === 'never' ? null : DEFAULT_EXPIRES_VALUE)}
data-test-subj="create-api-key-expires-radio"
Expand Down

0 comments on commit 2c1d5ce

Please sign in to comment.