Skip to content

Conversation

@harsher216
Copy link

Summary

This PR improves the keyboard accessibility and navigation behavior of the Rating component. It primarily focuses on inconsistent/incorrect behavior in Safari. This is because the Safari browser handles focus, radio navigation, and keyboard events differently from other browsers. As a result, keyboard users experienced (BUG):

  • The Rating component being skipped entirely during Tab navigation.
  • Arrow keys not starting navigation from the correct star.
  • Navigation jumping by 2 steps instead of 1.
  • Inconsistent behavior between empty and non-empty rating states.
  • Difficulty resetting to the “no rating” value using the keyboard.

This PR makes the Rating component fully keyboard-accessible and consistent across all major browsers.


Fix implemented

This PR introduces several improvements that together standardize keyboard behavior:

Cross-browser key handling

  • Added aliases for Safari’s legacy "Left", "Right", "Up", "Down" event keys.
  • Normalized navigation logic through a nextValueForKey helper.
  • Included precision-aware movement and full wrap-around (like max → empty → 1).

Reliable, predictable focus behavior (roving tabIndex)

  • Only one radio input is tabbable at any time.
    • If value == null, the “empty” radio has tabIndex=0.
    • Otherwise, the currently selected star has tabIndex=0.
    • All other radios use a tabIndex=-1.
  • Ensures Safari can correctly enter the component via the tab key.

Single-step arrow key navigation

  • Added a guard using event.defaultPrevented inside handleKeyDown so that:
    • the first handler processes the event,
    • any subsequent handlers skip it,
    • preventing double-handling and 2-step jumps.

Consistent behavior across states

  • Empty, hovered, focused, and selected states now behave identically in Safari and Chrome.
  • Wrap-around works from any state.
  • Clearing the value and navigating upwards/downwards works as well.

Tests

  • pnpm test:unit -- Rating passes locally.

Related issue

Fixes #34202

@mui-bot
Copy link

mui-bot commented Dec 11, 2025

Netlify deploy preview

https://deploy-preview-47461--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+1.16KB(+0.22%) 🔺+421B(+0.28%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 25a5e80

Copy link

@vmaineng vmaineng left a comment

Choose a reason for hiding this comment

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

This update creates a predictable keyboard flow. The normalization of Safari’s legacy keys and the single handler guard remove the double-step issue nicely. The roving tabIndex logic is also spot-on and aligns well with WAI-ARIA radio patterns. Great job on this!

@zannager zannager added the scope: rating Changes related to the rating. label Dec 12, 2025
@zannager zannager requested a review from siriwatknp December 12, 2025 08:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: rating Changes related to the rating.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Rating] Unable to properly navigate using Arrow keys in Safari browser

4 participants