fix(focus): add permisison element to focusable elements list #8356
Conversation
gabrielchl
changed the title
gabrielchl
changed the title
|
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.
can a permission be disabled?
There was a problem hiding this comment.
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.
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.
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.
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.
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.
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.
mmmm my bad it doesn't work there either, you'll have it do it locally :<
There was a problem hiding this comment.
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}tocontainatpackages/@react-aria/focus/stories/FocusScope.stories.tsx:61<permission type="microphone"></permission>topackages/@react-aria/focus/stories/FocusScope.stories.tsx:66http://localhost:9003/?path=/story/focusscope--keyboard-navigation-no-containand 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):
