canonical / canonical/vanilla-framework

`u-off-screen` does not disable itself when descendant elements are focused

Open
#5,734 2 comments 1 reaction 0 assignees View on GitHub
Accessibility Priority: Low Tier: Global WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

[`u-off-screen`](https://vanillaframework.io/docs/utilities/off-screen) does not un-hide the element it is applied to when focus is moved to a descendant of the `u-off-screen` element.

I believe we should consider un-hiding `u-off-screen` elements when focus is moved to within them. This would expand the interactivity of [SkipLink](https://vanillaframework.io/docs/patterns/links#skip-link), which already has this behavior, to more complex cases where multiple interactive elements are hidden and revealed as a group depending on focus within the group.

Consider a visually hidden Form (maybe it is an accessible alternative to a more complex set of controls that are not possible to use with a keyboard). You would apply `u-off-screen` to the form element, and expect that tabbing into one of the child form input controls would cause the entire form to become visible. See [Codepen](https://codepen.io/jmuzina/pen/EayZOBR) and [video](https://drive.google.com/file/d/1QWO8HBTd7ila3yj_ojKX2dqD98cVugtc/view?usp=sharing)

However, this is not the case currently because we only cancel our absolute positioning when `:focus` is applied to the off-screen element itself. For users who are not using a screen reader, focus seems to disappear when it moves to the hidden element.

https://github.com/canonical/vanilla-framework/blob/ad94436af9f0635624e2111045a08492bfd9b466/scss/_base_placeholders.scss#L135-L144

https://accessibility.huit.harvard.edu/technique-managing-focus-and-inactive-elements

Contributor guide

Open the contributing guide

Research direction

Start with the referenced rules in scss/_base_placeholders.scss around lines 135-144 and compare their behavior with the linked CodePen. Check how focus moves from the u-off-screen element to its descendant controls, then verify that the hidden group becomes visible while focus is inside it and remains hidden otherwise.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, sass
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.