Multiple focus rings sometimes appear when navigating by keyboard #3975
Description
🐛 Bug Report
When navigating calendar grids using the keyboard, multiple focus rings sometimes appear. This generally happens when moving to a month that was previously not rendered. Confirmed the be behavior in Chrome and Brave. I can not reproduce the issue using Safari or Firefox.
🤔 Expected Behavior
Only one element should have a visible focus ring at a time
😯 Current Behavior
I hope this is as easy to reproduce for you as it is for me (using update-to-date Chrome on MacOS). This generally happens when moving to a month that was previously not rendered. It most often happens with disabled dates, but not always ... I've seen the the "ghost focus" item sometimes be a non-disabled date.
This example is using Devon's Code Sandbox for useCalendar - styled example with Tailwind:
In the gif, I refresh the page, click on the preview area then tab to the calendar. Then I use the arrow keys to navigate back and forth from Feb. to March. As I do so, one or more days that do not have focus will show with a focus ring. These "ghost focus" days are most often in early Jan. outside the calendar range, and thus disabled. But you'll see I eventually get a day in March to behave the same).
At the end of the gif, I click on the preview area to hide the visual focus ring(s), then hit the tab key to bring them back. You'll see the multiple days in the calendar are still showing as if they have focus.
Not seen in the gif, but if you can move the focus to one of the "ghost focus" days, then the problem for that day will correct itself.
💁 Possible Solution
(tldr; I have no solution, only guesses at what is happening)
I do not think this is a calendar-related bug, but an issue with useFocusRing. I've seen similar visual focus ring bugs occasionally pop up working with other components built using useFocusRing ... but never as bad as this.
You'll notice that the January "ghost focus" days tend to match the previous real focus position in March. So for example, if you focus the fourth column in the first row of March and then hit the "up" key, the fourth column in the first row of January will often get the "ghost focus". I don't know how the focus management logic works in useFocusRing, but seems like it's trying to guess based on similar html structure ... Focus was on the element in the first table in the first row in the fourth cell, but the DOM changed so I'm going to try to re-select that same first-table-in-the-first-row-in-the-fourth-cell element.
🔦 Context
Discovered while evaluating the useCalendar hooks to build a replacement for an aging fork of Airbnb's react-dates on a government website where accessibility/Section 508 compliance is critical.
💻 Code Sample
As mentioned above, reproducible here: https://codesandbox.io/s/objective-shape-8r4utm?file=/src/App.js:213-1267
🌍 Your Environment
| Software | Version(s) |
|---|---|
| react-aria/focus | 3.10.1 |
| Browser | Chrome, Brave, Edge |
| Operating System | MacOS 13.1 |
I can not reproduce the issue using Safari or Firefox.