A11y (Serious): sticky Sidebar header and Dialog title

[nokSage]

Description

• When:

  • using header props in the Sidebar component, or title props in Dialog
  • the content inside is tall enough

  Both headers shown in these component will be sticky. This causes issues to low-vision user when they need to zoom the page to 400%, because a large amount of the screen is taken up by the header, and they cannot easily scroll to see the full content below.

• I am submitting a PR for this issue

Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-mqyavq

Steps to reproduce

• Go to the provided Stackblitz URL
• Click on the Open sidebar or Open dialog button
• Zoom the page to 400%

Screen.Recording.2024-10-09.at.16.28.16.mov

JIRA ticket numbers (Sage only)

SBS-109921

Suggested solution

• Change the current sticky behaviours to make it fully scrollable on the page.
• I have tested locally in the browser and should only require a few lines of changes in the style props.

Screen.Recording.2024-10-09.at.16.31.38.mov

Carbon version

142.13.5

Design tokens version

4.29.0

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[Parsium]

Note for triage: The mentioned PR does not provide a fix for this issue

[tomdavies73]

@harpalsingh @ljemmo hi both, this appears to be an issue where the Design System states a header has to be sticky, but in an accessibility audit it is recommended that non-sticky headers are used for users utilising a high zoom.

Could we provide some functionality to enable headers to be non-sticky, or should consumers not be using a header in this instance? Cheers

[tomdavies73]

@ljemmo @harpalsingh, hi guys, any update on this?

[ljemmo]

Hi @nokSage and @tomdavies73 - I agree that the sticky header isn't great for that scenario. However, i have concerns that we will be hamstringing the vast majority of users if we remove the sticky header functionality.

We are starting to explore responsive typography using clamp values. Please could you investigate in your example whether the issue is as pronounced if this clamp value is applied to the header? clamp(1.26rem, 1.1999rem + 0.3006vw, 1.5606rem)

If it is resolved, i would suggest we park this until the new responsive type approach is implemented (final clamp values TBC)

[nokSage]

@ljemmo Thanks for the reply. Unfortunately I don't see changing the header's font will help much, because our use case also has a <Form> inside with stickyFooter. This combination will block the entire screen.

Demo: https://stackblitz.com/edit/parsium-carbon-starter-4h1bus?file=src%2FApp.tsx

Could we have an option of passing an optional prop in to disable the sticky behaviour of the header, so it does not affect other places that relies on the sticky behaviour?

[nicktitchmarsh]

@ljemmo, in this instance perhaps an optional disableStickyHeader prop on these two components? If you agree I'll get a ticket raised for this, then we can provide an example useMediaQuery Hook that can conditionally switch this off?

[ljemmo]

@nicktitchmarsh i think before we go down that approach, i'd like to discuss one final alternative to see if that could work for nok.

@nokSage The accessibility guys don't really like the use of sticky footer at all. There's been lots of discussions about removing that functionality at some point. If you remove the sticky footer, reduce header font as previously discussed and reduce the top and bottom padding on the header, could that enable it to work without having to remove header stickyness?