From 348414a6c8e32d50a1ccfdd7a4c77103c7e70233 Mon Sep 17 00:00:00 2001 From: Navya Singh Date: Wed, 1 Jul 2026 15:46:45 -0700 Subject: [PATCH] fix(a11y): replace overflow:hidden on tsconfig H3 headings with word-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> --- packages/typescriptlang-org/src/templates/tsconfig.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/typescriptlang-org/src/templates/tsconfig.scss b/packages/typescriptlang-org/src/templates/tsconfig.scss index 229fd10d9cfe..722099a72c04 100644 --- a/packages/typescriptlang-org/src/templates/tsconfig.scss +++ b/packages/typescriptlang-org/src/templates/tsconfig.scss @@ -123,7 +123,8 @@ @media (max-width: $screen-xs) { width: 46%; h5 { - overflow-x: hidden; + overflow-wrap: break-word; + word-break: break-word; } } @@ -216,12 +217,12 @@ > h3 { margin-bottom: 0; - overflow-x: hidden; + word-break: break-word; + overflow-wrap: break-word; offset-anchor: -30px; @media (max-width: $screen-sm) { display: block; - overflow-y: hidden; } > a {