-
Notifications
You must be signed in to change notification settings - Fork 1.3k
fix(focus): add permisison element to focusable elements list #8356
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
fix(focus): add permisison element to focusable elements list #8356
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks!!
Looks like you'll need to Sign the CLA, then close and re-open this PR to trigger another build that passes. |
(could i get the 2nd approval plz? 🥺) |
@@ -11,7 +11,8 @@ const focusableElements = [ | |||
'embed', | |||
'audio[controls]', | |||
'video[controls]', | |||
'[contenteditable]:not([contenteditable^="false"])' | |||
'[contenteditable]:not([contenteditable^="false"])', | |||
'permission' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can a permission be disabled?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i don't believe so, the spec (https://wicg.github.io/PEPC/permission-element.html) does not mention a way to achieve this
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what happens to the programmatic focus call once this has happened?
Once an element has a permanent blocker, it will be disabled permanently
will the focus call silently fail like it does for other disabled controls? or should users still be able to visit it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah so in the current chrome implementation, the button, when disabled by the browser, will still receive focus like normal
you can test with this in chrome beta:
<button>button 1</button>
<permission type="microphone" style="background: transparent"></permission>
<button>button 2</button>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've opened Canary and enabled the setting in flags, clicking a permission doesn't do anything right now, so I can't tell if it's "blocked" or not regardless of the style. Am I missing something to get it to actually prompt? https://jsfiddle.net/dyjecvw9/1/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah take away the style to "un-disable" it
i used it to "toggle" between the disabled vs non-disabled behaviour
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah looks like also it doesn't work in jsfiddle lmao
try this: https://codesandbox.io/p/sandbox/permission-focus-example-rnj4pr (once the cloudflare outage is over)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mmmm my bad it doesn't work there either, you'll have it do it locally :<
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
haha, worried that might end up being the case, o well, one of us will try it when we have some time, thanks for the extra info
Closes #8226
✅ Pull Request Checklist:
📝 Test Instructions:
contain={contain}
tocontain
atpackages/@react-aria/focus/stories/FocusScope.stories.tsx:61
<permission type="microphone"></permission>
topackages/@react-aria/focus/stories/FocusScope.stories.tsx:66
http://localhost:9003/?path=/story/focusscope--keyboard-navigation-no-contain
and verify that the permission element can now be tabbed to and away from🧢 Your Project:
before (when tab/shift-tab-ing, it skips over the permission element):

after (able to navigate to the permission element via keyboard, and activate the element):
