-
-
Notifications
You must be signed in to change notification settings - Fork 32.8k
Open
Labels
browser: SafariAffects or fixes behavior in Apple Safari.Affects or fixes behavior in Apple Safari.scope: ratingChanges related to the rating.Changes related to the rating.type: bugIt doesn't behave as expected.It doesn't behave as expected.
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
Only for Keyboard Users, I am trying to access the rating component on the safari browser with arrow keys but I cannot properly navigate between stars similar to the chrome browser.

Expected behavior 🤔
This navigation should work normally in the Chrome browser. So it should have similar behaviour in the safari browser.

Steps to reproduce 🕹
Steps:
- Open Rating component on Mac OS + Safari browser
- Press the Tab key until reached the Rating component
- Press down/right arrow key to select stars
- Navigation between stars did not start with the right arrow key and did not behave similarly like chrome
Context 🔦
I was using this component and this issue comes into the picture while accessibility testing.
Your environment 🌎
npx @mui/envinfo
System:
OS: macOS 12.5.1
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: Not Found
npm: 8.18.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 104.0.5112.101
Edge: Not Found
Firefox: Not Found
Safari: 15.6.1
npmPackages:
@types/react: 16.9.15 => 16.9.15
react: 16.12.0 => 16.12.0
react-dom: 16.12.0 => 16.12.0
typescript: 4.2 => 4.2.4
Metadata
Metadata
Assignees
Labels
browser: SafariAffects or fixes behavior in Apple Safari.Affects or fixes behavior in Apple Safari.scope: ratingChanges related to the rating.Changes related to the rating.type: bugIt doesn't behave as expected.It doesn't behave as expected.