fix keyboard nav on login screen

[aalves08]

Summary

Fixes #12775

Occurred changes and/or fixed issues

• Fix keyboard navigation on login screen
• checkbox is now visibly focusable
• add role="button" to AsyncButton
• Password component is now tabbable
• refactor LocaleSelector component to work with keyboard navigation (login mode only)

Technical notes summary

Areas or cases that should be tested

• Go to the login screen and browse the page with the tab key
• use enter or space key to trigger UI elements on the page

Areas which could experience regressions

Screenshot/Video

Screen.Recording.2024-12-27.at.15.31.14.mov

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

[rak-phillip]

Keyboard navigation is definitely improved, but I'm noting a lot of missing behavior that would satisfy keyboard interactions for the menubar pattern¹. Some notable elements that don't align with the APG:

• When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item
• Tab and Shift + Tab do not move focus among the items in the menu
• Arrow Navigation and Escape behavior are missing

We can discuss more on how we would like to approach these instances, but I suspect that we will replace one-off implementations like these with a standardized component once we address #12771.

Footnotes

1. https://www.w3.org/WAI/ARIA/apg/patterns/menubar/ ↩

[aalves08]

@nwmac going to resolve all of the PR comments that you had around tabbingIndex and tabindex. They will all be cleaned on the next PR commit.

[rak-phillip]

This is looking good. We want to clean up the unused props and I think this will be good to merge.

[aalves08]

@rak-phillip removed the tabbingIndex . Good spot. Thanks

[aalves08]

@rak-phillip fixed and ready for final review 🤞