Skip to content

Fix(a11y): replace overflow:hidden on tsconfig H3 headings with word-…#3601

Merged
navya9singh merged 1 commit into
v2from
navya9singh/fix-2201689-a11y-resize-text
Jul 1, 2026
Merged

Fix(a11y): replace overflow:hidden on tsconfig H3 headings with word-…#3601
navya9singh merged 1 commit into
v2from
navya9singh/fix-2201689-a11y-resize-text

Conversation

@navya9singh

Copy link
Copy Markdown
Member

Fixes https://devdiv.visualstudio.com/DevDiv/_workitems/edit/2201689

Bug 2201689 - MAS 1.4.4 Resize Text: 'Strict Property Initialization' not visible properly at 1280x768 100% zoom on TSConfig Reference page.

Root cause: .compiler-option > h3 had overflow-x: hidden (and overflow-y: hidden at <=800px), which clips heading text when the user resizes text to large sizes - a WCAG 1.4.4 (Resize Text) violation.

Fix:

  • Replace overflow-x: hidden with word-break: break-word + overflow-wrap: break-word on .compiler-option > h3 so option names wrap instead of being clipped
  • Remove overflow-y: hidden from the 800px media query for the same reason
  • Replace overflow-x: hidden with overflow-wrap: break-word on nav-top h5 elements at the 480px breakpoint

Verified with Playwright at 1280x768 (overflow: visible confirmed) and at 200% text zoom (scrollWidth === clientWidth, no clipping).

…break

Bug 2201689 - MAS 1.4.4 Resize Text: 'Strict Property Initialization' not
visible properly at 1280x768 100% zoom on TSConfig Reference page.

Root cause: .compiler-option > h3 had overflow-x: hidden (and overflow-y:
hidden at <=800px), which clips heading text when the user resizes text to
large sizes - a WCAG 1.4.4 (Resize Text) violation.

Fix:
- Replace overflow-x: hidden with word-break: break-word + overflow-wrap: break-word
  on .compiler-option > h3 so option names wrap instead of being clipped
- Remove overflow-y: hidden from the 800px media query for the same reason
- Replace overflow-x: hidden with overflow-wrap: break-word on nav-top h5
  elements at the 480px breakpoint

Verified with Playwright at 1280x768 (overflow: visible confirmed) and at
200% text zoom (scrollWidth === clientWidth, no clipping).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@navya9singh navya9singh added the deploy-preview Enables automatic deployments to preview environments on a PR label Jul 1, 2026
@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3601.centralus.5.azurestaticapps.net

@navya9singh navya9singh requested a review from jakebailey July 1, 2026 23:16
@navya9singh navya9singh merged commit cae242b into v2 Jul 1, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

deploy-preview Enables automatic deployments to preview environments on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants