fix(web-components): #4457 respect text resize in stepper layout - #4627
fix(web-components): #4457 respect text resize in stepper layout#4627sylvesterkaczmarek wants to merge 1 commit into
Conversation
98e9bcd to
29ff894
Compare
| it("switches to compact mode at 200% text size without horizontal overflow", () => { | ||
| cy.viewport(800, 600); | ||
| cy.injectAxe(); | ||
| mount(<TextResizeStepper />); | ||
| cy.checkHydrated(STEPPER); | ||
|
|
||
| cy.document().then((doc) => { | ||
| doc.documentElement.style.fontSize = "32px"; | ||
| }); | ||
|
|
||
| cy.get(STEPPER).should("have.class", "ic-stepper-compact"); | ||
|
|
||
| cy.get(CONTAINER).then(($container) => { | ||
| const container = $container[0]; | ||
| expect(container.scrollWidth).to.be.at.most(container.clientWidth); | ||
| }); | ||
|
|
||
| cy.checkA11yWithWait(); | ||
| cy.compareSnapshot({ | ||
| name: "/text-resize-200-percent", | ||
| testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Please move this test into IcStepper.cy.tsx instead of in its own separate file
There was a problem hiding this comment.
Updated as requested: moved the Cypress test into IcStepper.cy.tsx and the unit tests into ic-stepper.spec.ts. Thanks!
GCHQ-Developer-530
left a comment
GCHQ-Developer-530
left a comment
There was a problem hiding this comment.
Looks like these changes are causing failures in the Cypress and unit tests. Would you be able to fix them?
923f9cd to
a8b47fb
Compare
Thanks, I dug into this further. One complication is that the branch currently contains a much larger history than the Stepper change itself (44 commits / 73 changed files), which is making the CI failures rather noisy. :) I also found that the scope check rejects a commit touching both For future cross-package changes like this, it may also be worth considering a shared/cross-package commit scope or more path-targeted CI, so a component change and its React test can travel together without conflicting with the scope checks. |
|
Please rebase this branch |
1569127 to
419babd
Compare
2 participants
Summary of the changes
Fix
IcStepperautomatic compact-mode behaviour when users increase browser or root text size.Default step dimensions are rem-based, but the compact-mode breakpoint was calculated in fixed pixels. At larger text sizes the steps therefore grew while the breakpoint stayed unchanged, which could create horizontal overflow instead of switching to the compact variant.
Changes:
connectorWidthbehaviourThis addresses the WCAG 1.4.4 resize-text/reflow problem described in the issue.
Related issue
Closes #4457