fix(uui-radio): keyboard navigation does not work as intended #870
Conversation
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
1 similar comment
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
1 similar comment
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
iOvergaard
changed the title
There was a problem hiding this comment.
This aaaaalmost works. I tested in Storybook and there is just one case: When a group already has a value, and you tab into it, you invariably end up on the first element, and if that element is not selected, and you move with the keyboard, you end up selecting the next element after that and so on.
I think before it detected if a value was already preselected, it would put tabindex -1 on the others.
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-870.westeurope.azurestaticapps.net |
* remove tabindex * fix wrapping keyboard nav * Improve keyboard navigation by emulating native radio group behavior * remove unused code * fix double keypress issue * cleanup * fix selection bug * rename function * change focus outline functionality to pure css * remove aria hidden as it is not needed anymore * remove redundant get,set * cleanup radio * cleanup * fix findRadio function to fix focus issues * remove keypress eventListener * Fix pre checked radios * fix test to use same keydown event as the component * make sonar happy * fix tab navigation when there is a pre-checked radio
FIXES: #853
The radio button now always sets focus on the native input. This means that we can remove all aria attributes as they are automatically provided by the native radio input.
The radio group now emulates native radio group behavior.
Fixes following issues:
I've also cleaned up both components a lot to align them better with our new coding practises.
You can use Semantic Diff to get a better overview of the actual changes: https://app.semanticdiff.com/gh/umbraco/Umbraco.UI/pull/870/changes#packages/uui-radio/lib/uui-radio-group.element.ts
Types of changes
Checklist