Summary

Fixed a bug which caused non-interactive checklist items to receive focus on tab. Now, only the interactive input will receive focus.

Created #5841 as a follow up to enhance screen reader callouts for the validation input element.

Breaking change

This is not a breaking change.

Related issue

Closes #5760

Related pull requests

Changelog →

Preview link

Validation component →

Problem statement

tabindex="0" was added to checklist items in #4914 to make the validation checklist items easier to navigate via tab.

This could prove confusing to keyboard users because text typically isn’t focusable in the DOM unless it’s interactive. ¹

Solution

Remove tabindex from checklist items.

• Items are no longer focused via tab
• Items are still read as expected when using a screen reader

Testing and review

1. Visit the validation component page
2. Use tab to select the text input. Checklist item should not be focused at any point during tabbing.
3. Test component with screen reader and confirm that interactions are unaffected
   1. Checklist items should be accessible using arrow keys
   2. Checklist items should also be read after input change

Testing checklist

• Checklist items are not focusable
• Screen readers behaviors are unaffected
• No additional regression caused due to removing tabindex