FIX: improve frontend accessibility and mobile responsiveness#2240
Open
romanlutz wants to merge 1 commit into
Open
FIX: improve frontend accessibility and mobile responsiveness#2240romanlutz wants to merge 1 commit into
romanlutz wants to merge 1 commit into
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: e4044304-01aa-420b-97f3-b3b2c5962922
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the frontend’s accessibility semantics and mobile responsiveness, primarily focusing on the onboarding tour staying within small viewports, adding page-level heading/navigation landmarks, wiring an accessible label to the target-type filter, and enforcing mobile touch-target sizing with accompanying Jest + Playwright coverage.
Changes:
- Refines Joyride/Floating UI tour positioning options and makes the tour tooltip layout more viewport-safe on mobile.
- Adds page-level heading semantics across major views and a labeled primary navigation landmark with
aria-current="page". - Ensures key audited controls meet 44px mobile hit targets and expands unit/E2E coverage for a11y + responsive behavior.
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/hooks/useTour.ts | Adds cross-axis shifting + viewport padding for Joyride tooltip positioning. |
| frontend/src/hooks/useTour.test.ts | Asserts the new Joyride floating options shape is applied. |
| frontend/src/components/Tour/TourTooltip.tsx | Refactors tooltip structure, adds test id, and applies button classes for mobile hit targets. |
| frontend/src/components/Tour/TourTooltip.styles.ts | Constrains tooltip width on small viewports, wraps actions, and enforces 44px touch targets for tooltip controls. |
| frontend/src/components/Sidebar/Navigation.tsx | Introduces a primary <nav> landmark and aria-current for the active view. |
| frontend/src/components/Sidebar/Navigation.test.tsx | Tests navigation landmark presence and current-page semantics. |
| frontend/src/components/Sidebar/Navigation.styles.ts | Adds styles for the new primary navigation wrapper. |
| frontend/src/components/Layout/MainLayout.tsx | Adds a class hook for mobile sizing of the “Take a tour” button. |
| frontend/src/components/Layout/MainLayout.styles.ts | Enforces 44px min-height for the tour button on mobile. |
| frontend/src/components/Labels/LabelsBar.styles.ts | Enforces 44px min-height for audited icon buttons on mobile. |
| frontend/src/components/Home/Home.tsx | Adds heading semantics (h1/h2/h3) and a mobile hit-target class for the primary action. |
| frontend/src/components/Home/Home.test.tsx | Updates assertions to validate heading roles/levels. |
| frontend/src/components/Home/Home.styles.ts | Improves mobile padding/containment and enforces 44px min-height for primary action. |
| frontend/src/components/History/AttackHistory.tsx | Adds an h1 heading for Attack History. |
| frontend/src/components/History/AttackHistory.test.tsx | Updates assertions to validate the h1 heading. |
| frontend/src/components/Config/TargetTable.tsx | Wires a semantic label to the type filter via useId + htmlFor/id. |
| frontend/src/components/Config/TargetTable.test.tsx | Updates the combobox query to require the accessible name. |
| frontend/src/components/Config/TargetConfig.tsx | Adds an h1 heading for Target Configuration. |
| frontend/src/components/Config/TargetConfig.test.tsx | Adds a heading-role assertion for Target Configuration. |
| frontend/src/components/Config/TargetConfig.styles.ts | Enforces 44px min-height for header actions on mobile. |
| frontend/src/components/Chat/ChatWindow.tsx | Adds a (visually hidden) page-level h1 heading for Chat. |
| frontend/src/components/Chat/ChatWindow.test.tsx | Asserts Chat exposes a level-1 heading. |
| frontend/src/components/Chat/ChatWindow.styles.ts | Adds visually-hidden heading styles. |
| frontend/e2e/accessibility.spec.ts | Adds E2E assertions for headings/landmarks, tour containment, overflow checks, and touch-target dimensions. |
Comment on lines
42
to
48
| <Button | ||
| {...closeProps} | ||
| appearance="subtle" | ||
| icon={<DismissRegular />} | ||
| size="small" | ||
| className={styles.closeButton} | ||
| /> |
Comment on lines
+65
to
69
| <Button {...skipProps} appearance="subtle" size="small" className={styles.actionButton}> | ||
| Skip tour | ||
| </Button> | ||
| )} | ||
|
|
Comment on lines
+25
to
+38
| const box = await dialog.boundingBox(); | ||
| const viewport = page.viewportSize(); | ||
| const dimensions = await page.evaluate(() => ({ | ||
| clientWidth: document.documentElement.clientWidth, | ||
| scrollWidth: document.documentElement.scrollWidth, | ||
| })); | ||
|
|
||
| return ( | ||
| box !== null && | ||
| viewport !== null && | ||
| box.x >= 0 && | ||
| box.x + box.width <= viewport.width + 1 && | ||
| dimensions.scrollWidth <= dimensions.clientWidth + 1 | ||
| ); |
jsong468
approved these changes
Jul 21, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The July 21 exploratory audit found that the onboarding tour became unusable on a 390px viewport, several major views lacked heading and navigation semantics, the target-type filter had no accessible name, and key mobile controls fell below a 44px touch target. This change resolves those findings while preserving the existing Fluent UI design, desktop density, dark mode, and tour navigation behavior.
Filter by type:with its native select through stable semantic label wiring.Visual comparison (390x844)
Onboarding tour
Home controls and responsive containment
Configuration actions
The heading, navigation landmark, current-page, and filter-label changes are intentionally not visually apparent.
Tests and Documentation
useTour.e2e/accessibility.spec.ts, including every tour step at 390x844 and 1280x800 after positioning settles.npm run type-checkpassed.npm run buildpassed (tsc && vite build).