Skip to content

[Rating] Keyboard navigation doesnt loop in Safari #34202

@ajaynigam-mh

Description

@ajaynigam-mh

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

Expected behavior 🤔

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

Steps to reproduce 🕹

Steps:

  1. Open Rating component on Mac OS + Safari browser
  2. Press the Tab key until reached the Rating component
  3. Press down/right arrow key to select stars
  4. 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

No one assigned

    Labels

    browser: SafariAffects or fixes behavior in Apple Safari.scope: ratingChanges related to the rating.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions