[Rating] Keyboard navigation doesnt loop in Safari

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:

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 🌎

     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 

Start with the Rating component and reproduce the keyboard navigation on macOS Safari 15.6.1, comparing it with Chrome using the arrow-key steps in the issue. Trace the component's keyboard handling and verify that navigation between stars behaves consistently in Safari and Chrome when the fix is complete.