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

[jmuzina]

u-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, 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 and video

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.

vanilla-framework/scss/_base_placeholders.scss

Lines 135 to 144 in ad94436

	%u-off-screen {
	&:not(:focus):not(:active) {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	}
	}

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

[syncronize-issues-to-jira]

Thank you for reporting your feedback to us!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-32908.

This message was autogenerated

[dgtlntv]

Design systems contribution meeting:

• We should aim to make things keyboard intractable in the first place.
• If that is not possible due to some reasons then this seems like a good alternative.
• We should have better documentation for when using this pattern is appropriate before it gets accepted into the design system.