Skip to content

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.

Sign up for GitHub

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(focus): add permisison element to focusable elements list #8356

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/@react-aria/utils/src/isFocusable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ const focusableElements = [
'embed',
'audio[controls]',
'video[controls]',
'[contenteditable]:not([contenteditable^="false"])'
'[contenteditable]:not([contenteditable^="false"])',
'permission'
Copy link
Member

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?

Copy link
Author

@gabrielchl gabrielchl Jun 12, 2025 •
edited
Loading

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

Copy link
Member

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?

Copy link
Author

@gabrielchl gabrielchl Jun 12, 2025 •
edited
Loading

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>

Copy link
Member

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/

Copy link
Author

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

Copy link
Author

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)

Copy link
Author

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 :<

Copy link
Member

@snowystinger snowystinger Jun 12, 2025 •
edited
Loading

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

];

const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]),') + ',[tabindex]:not([disabled]):not([hidden])';
Expand Down