Shell and Shell Panel - Ensure pages reflow without requiring two-dimensional scrolling without loss of content or functionality - (2036570598)

[dqateam]

Violation:

Ensure pages reflow without requiring two-dimensional scrolling without loss of content or functionality

WCAG Reference:

• 1.4.10 Reflow

Severity:

6

Media Type:

Typography

---

Areas for Remediation:

• Title: Shell and Shell Panel - Ensure pages reflow without requiring two-dimensional scrolling without loss of content or functionality - (2036570598)
• Module: Shell and Shell Panel
  Pattern: Reflow - Content is partially available.]

Issue
The content does not resize properly to accommodate smaller screen sizes, and content is cut-off or partially available when the page has a viewport width of 320 CSS pixels.

Occurrences
29 Shell and Shell Panel
30 Shell Center Row

User Impact
Users with low vision who need to resize text will be prevented from accessing this content.

Suggestion
Ensure pages reflow without requiring two-dimensional scrolling without loss of content or functionality. When the page has a viewport width of 320 CSS pixels, all content and functionality must still be available without requiring horizontal scrolling.

Moving content to an accessible show/hide control, such as a hamburger menu, is acceptable.

Content that requires two dimensions to be understood, such as a map or data table, is exempt from this requirement.

---

Additional Resources:

• Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.

[driskull]

I think this might fall into the responsive design initiative as well.

[macandcheese]

This is ultimately customizable with the width-scale and various min/max/width css properties. We could default the max-width of Shell Panel to 100% to prevent this?

[driskull]

We could default the max-width of Shell Panel to 100% to prevent this?

Yeah, lets do that.

[geospatialem]

Reflow is out of scope for the component, and is up to the developer to implement. Closing as unplanned.