canonical / canonical/vanilla-framework
`u-off-screen` does not disable itself when descendant elements are focused
- 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
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