Found while adding masthead brand-mark coverage to account.spec.ts (#91):
account.spec.ts was verified against --project=desktop-1440 only, matching login.spec.ts's own convention of most tests running under a single default project with an explicit desktop/mobile loop inside "Personal info" specifically. Running the full 6-project matrix (npx playwright test specs/account.spec.ts, no filter) surfaces two distinct, real gaps:
-
Test-design gap, not a theme bug: "Signing in", "Device activity", "Applications", "Masthead user menu", and the DOM-hook compatibility scan all navigate via the sidebar nav assuming it's visible; below some breakpoint (~820px and under) the account console collapses it behind the hamburger toggle, which these tests never click. They time out (30s) waiting for nav text that's present in the DOM but hidden off-canvas. Mobile sidebar toggle itself passes fine since it already handles the hamburger.
-
Real accessibility bug: at mobile-390 and iphone-393 widths specifically (not tablet-820, not desktop/UHQ/UHD), axe reports a critical button-name violation ("Buttons must have discernible text") on the Personal Info page. Some icon-only button in that width range has no accessible name. Needs live inspection to identify which button (likely a toolbar/kebab control that only appears once the masthead collapses) and a themed aria-label fix in account.css's scope or a report upstream if it's an unstyled default with no label attribute at all.
Neither is caused by the theme CSS itself (confirmed: desktop-1440, tablet-820's WCAG check, uhq-1920, and uhd-3840 are all clean); scoping this out of #91/PR #112 to keep that PR focused on the masthead/brand-mark work. Proposed follow-up: add hamburger-aware navigation helpers to the affected tests, then re-run the full matrix to confirm; separately track down and fix the button-name violation.
Found while adding masthead brand-mark coverage to
account.spec.ts(#91):account.spec.tswas verified against--project=desktop-1440only, matching login.spec.ts's own convention of most tests running under a single default project with an explicit desktop/mobile loop inside "Personal info" specifically. Running the full 6-project matrix (npx playwright test specs/account.spec.ts, no filter) surfaces two distinct, real gaps:Test-design gap, not a theme bug: "Signing in", "Device activity", "Applications", "Masthead user menu", and the DOM-hook compatibility scan all navigate via the sidebar nav assuming it's visible; below some breakpoint (~820px and under) the account console collapses it behind the hamburger toggle, which these tests never click. They time out (30s) waiting for nav text that's present in the DOM but hidden off-canvas.
Mobile sidebar toggleitself passes fine since it already handles the hamburger.Real accessibility bug: at
mobile-390andiphone-393widths specifically (nottablet-820, not desktop/UHQ/UHD), axe reports a criticalbutton-nameviolation ("Buttons must have discernible text") on the Personal Info page. Some icon-only button in that width range has no accessible name. Needs live inspection to identify which button (likely a toolbar/kebab control that only appears once the masthead collapses) and a themedaria-labelfix inaccount.css's scope or a report upstream if it's an unstyled default with no label attribute at all.Neither is caused by the theme CSS itself (confirmed:
desktop-1440,tablet-820's WCAG check,uhq-1920, anduhd-3840are all clean); scoping this out of #91/PR #112 to keep that PR focused on the masthead/brand-mark work. Proposed follow-up: add hamburger-aware navigation helpers to the affected tests, then re-run the full matrix to confirm; separately track down and fix thebutton-nameviolation.