[Rating] For keyboard users on Safari browser, Unable to see effects and outline on focus / active stars

[ajaynigam-mh]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Only for Keyboard Users, I am trying to access the rating component on the safari browser but cannot see focus/active effects on stars.

Expected behavior 🤔

There is a focus indicator and active effects which are visible on the chrome browser.

Steps to reproduce 🕹

Steps:

1. Open Rating component on Mac OS + Safari browser
2. Press the Tab key until reached the Rating component
3. Use arrow keys to change ratings
4. No visible outline and UI effects on active and focus star

Context 🔦

I was using this component and this issue comes into the picture while accessibility testing. I can see this on the latest mui version also.

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 ```

[michaldudak]

Thanks for reporting this. Would you like to investigate this issue?

[michaldudak]

One way we could fix this issue (and #34202) would be to manage individual rating items focus by ourselves, using activedescendant. The W3C examples page shows such an implementation (using either role=slider or role=radio): https://w3c.github.io/aria-practices/examples/radio/radio-rating.html This makes sense as focusing individual stars (or half-stars) doesn't seem necessary.