Skip to content
This repository has been archived by the owner on Jun 29, 2023. It is now read-only.

feat(block): prevent disabled block content from being tabbed into #652

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Dec 13, 2019

Related Issue: #548

Summary

This sets tabIndex on the host component to prevent shadow DOM content from being accessed via the keyboard.

From WICG/inert#48:

From step 3 of https://w3c.github.io/webcomponents/spec/shadow/#sequential-focus-navigation

[...] an element whose tabindex value is negative must not be appended to NAVIGATION-ORDER.

Which in other words means that if an element has tabindex=-1 and a shadowRoot, the focus won't be able to reach the element's contents (distributed or not) 🎉

A downside to this approach is that the user-set tabindex is not preserved when a block is disabled and reenabled (or vice versa).

Another change in this PR is that any slotted control is no longer hidden when the block is disabled since the component is no longer interactive.

cc @kat10140

Questions

  • Are we OK preventing user select on Scrim?
  • Should this be considered a breaking change? Reasoning: whole block is no longer interactive when disabled -> Yes

@jcfranco jcfranco added the enhancement New feature request for an existing component label Dec 13, 2019
@jcfranco jcfranco added this to the Fern milestone Dec 13, 2019
@jcfranco jcfranco requested a review from a team as a code owner December 13, 2019 19:11
@jcfranco jcfranco self-assigned this Dec 13, 2019
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 nice

@jcfranco jcfranco merged commit 6ef11c4 into master Dec 19, 2019
@jcfranco jcfranco deleted the jcfranco/548-prevent-block-content-from-being-focused-via-keyboard branch December 19, 2019 21:28
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature request for an existing component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants