wwnorton/design-system

Focus z-index [NDS-21]

sh0ji opened this issue · 1 comments

sh0ji commented

Let's remove the default value for our focus indicator's z-index.

Our default focus indicator sets a z-index value to ensure that focus is visible when a focused element is behind another element (e.g., under a fixed header/footer). Without this, tabbing to an element that is behind another element would result in a failure of 2.4.7: Focus Visible.

@mixin -focus($shadow, $current-shadows...) {
z-index: var(--nds-zindex-focus);
outline: none;
box-shadow: $current-shadows, $shadow;
transition: motion.transition(box-shadow border-radius);
}

For instance, if you Tab to a button on our website and then scroll, this will happen:
image

While this is a feature of our focus indicator that improves usability, we've gotten feedback from a few users that it is unexpected and I agree that we should rethink it.

NDS-21

Issue linked to JIRA Story: NDS-21