fix: tabbing past contenteditable=false in containing focusscope #7340
Conversation
| @@ -176,6 +176,7 @@ export function useSpinButton( | |||
| return { | |||
| spinButtonProps: { | |||
| role: 'spinbutton', | |||
| tabIndex: isDisabled ? -1 : undefined, | |||
There was a problem hiding this comment.
We can see here that a disabled spin button only has aria-disabled, not disabled
Is there a reason you chose to use tabIndex to solve this, rather than expand the definition of disabled in FocusScope?
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/focus/src/FocusScope.tsx#L270
I'll bring it up with the team to see if we have any preferences.
There was a problem hiding this comment.
Ah no, I didnt look at the semantics of a spinbutton at all. We can definitely try and add this to FocusManager instead 👍
I assume this would look at div[disabled]?
There was a problem hiding this comment.
ah, no, i meant in FocusScope adding [aria-disabled] next to [disabled]
There was a problem hiding this comment.
Not sure whether I like using aria semantics to change focus order to be honest, feels wrong.
There was a problem hiding this comment.
Sorry, just looked at this again more closely.
The issue is just that we're too accepting of contenteditable https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/focus/src/FocusScope.tsx#L283
useDateSegment disabled has it set to false, so it's not a focusable element
We should restrict FocusScope to be any content editable EXCLUDING false (since contenteditable can be a couple different values https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable#value)
but we should be able to do the exclude query selector
[contenteditable]:not([contenteditable^="false"])
snowystinger
changed the title
| @@ -280,7 +280,7 @@ const focusableElements = [ | |||
| 'embed', | |||
| 'audio[controls]', | |||
| 'video[controls]', | |||
| '[contenteditable]' | |||
| '[contenteditable]:not([contenteditable^="false"])' | |||
There was a problem hiding this comment.
Thanks for the quick fix. Would you mind adding a test?
Closes #7321
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: