Skip to content

Conversation

mahoneycm
Copy link
Contributor

@mahoneycm mahoneycm commented Mar 25, 2024

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. 1

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

Footnotes

  1. Comment from Amy C.

@mahoneycm
Copy link
Contributor Author

Update 3/27/24

Created #5841 as a follow-up to enhance screen reader callouts for the validation input element as discussed in Dev Sync. (🔒)

@mahoneycm mahoneycm requested review from mejiaj and amyleadem March 27, 2024 18:12
Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! I confirmed that this now has standard tab behavior.

Should we tag this issue for 3.8.1 release? (It is currently marked for 3.9.0) After reviewing this, it feels like a patch fix to me.

@mahoneycm
Copy link
Contributor Author

@amyleadem Sounds good to me! Updated issue milestone to 3.8.1

Copy link
Contributor

@mejiaj mejiaj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks. Confirming that the tab behavior is gone and requirements are read in voiceover.

@thisisdano thisisdano merged commit 320753f into develop May 22, 2024
@thisisdano thisisdano deleted the cm-validation-remove-tabindex branch May 22, 2024 21:58
@thisisdano thisisdano mentioned this pull request May 30, 2024
patrickcate added a commit to patrickcate/vue-uswds that referenced this pull request Jul 5, 2024
patrickcate added a commit to patrickcate/vue-uswds that referenced this pull request Jul 5, 2024
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 this pull request may close these issues.

USWDS - Bug: Remove focus on text in validation component
4 participants