Repository navigation
Improve mobile UX consistency and accessibility - #1870
Open
David Pine (IEvangelist) wants to merge 1 commit into
Open
David Pine (IEvangelist) wants to merge 1 commit into
David Pine (IEvangelist) wants to merge 1 commit into
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
David Pine (IEvangelist)
requested a review
from Aaron Powell (aaronpowell)
as a code owner
October 11, 2026 13:41
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The global badge rule removes the environment identifier from every desktop layout.
1 open finding
What changed in this PR
Improves responsive usability and accessibility across navigation, documentation components, catalogs, API references, and translation views.
Changes:
- Introduces a shared mobile menu, responsive breadcrumbs, and consistent touch-target/type tokens.
- Improves overflow, contrast, focus handling, and client-navigation lifecycle behavior.
- Adds broad unit/E2E regression coverage and patches page-action dropdown behavior.
| File | Description |
|---|---|
src/frontend/tests/unit/custom-components.vitest.test.ts |
Tests media labels and breadcrumbs. |
src/frontend/tests/e2e/ui-regressions.spec.ts |
Updates responsive UI assertions. |
src/frontend/tests/e2e/mobile-ux.spec.ts |
Adds mobile accessibility regression matrix. |
src/frontend/tests/e2e/live-status.spec.ts |
Opens live controls through mobile menu. |
src/frontend/tests/e2e/live-embeds.spec.ts |
Updates mobile live navigation. |
src/frontend/tests/e2e/live-accessibility.spec.ts |
Covers menu-based live controls. |
src/frontend/tests/e2e/helpers.ts |
Adds mobile-menu test helper. |
src/frontend/tests/e2e/dev-layout.spec.ts |
Updates header and action-menu expectations. |
src/frontend/tests/e2e/dev-browse.spec.ts |
Updates breadcrumbs and touch sizing tests. |
src/frontend/tests/e2e/cookie-consent.spec.ts |
Supports menu-based video navigation. |
src/frontend/tests/e2e/api-cross-language-navigation.spec.ts |
Extends navigation timeout. |
src/frontend/src/styles/site.css |
Adds responsive layout and touch styles. |
src/frontend/src/styles/search-controls.css |
Enlarges mobile search controls. |
src/frontend/src/styles/glossary-term.css |
Targets unique action dropdown classes. |
src/frontend/src/styles/dev-hub.css |
Updates dropdown targeting. |
src/frontend/src/styles/aspire-brand.css |
Defines shared typography and sizing tokens. |
src/frontend/src/styles/api-reference.css |
Improves API wrapping and contrast. |
src/frontend/src/content/docs/community/videos.mdx |
Documents mobile live-navigation behavior. |
src/frontend/src/content/docs/community/thanks.mdx |
Adds coarse/mobile spacing. |
src/frontend/src/content/docs/community/contributor-guide.mdx |
Documents responsive design conventions. |
src/frontend/src/components/YouTubeEmbed.astro |
Adds fallback iframe label. |
src/frontend/src/components/TwitchEmbed.astro |
Adds fallback iframe label. |
src/frontend/src/components/TopicHero.astro |
Improves wrapping, sizing, and contrast. |
src/frontend/src/components/starlight/Sidebar.astro |
Adds shared mobile links. |
src/frontend/src/components/starlight/Search.astro |
Uses shared metadata sizing. |
src/frontend/src/components/starlight/PageTitle.astro |
Improves action wrapping and dropdown sizing. |
src/frontend/src/components/starlight/PageFrame.astro |
Adds mobile navigation on all layouts. |
src/frontend/src/components/starlight/MobileSiteLinks.astro |
Implements shared mobile destinations. |
src/frontend/src/components/starlight/MobileMenuToggle.astro |
Implements accessible menu lifecycle. |
src/frontend/src/components/starlight/Header.astro |
Simplifies and measures compact header. |
src/frontend/src/components/starlight/Footer.astro |
Enlarges compact footer controls. |
src/frontend/src/components/starlight/Banner.astro |
Enlarges banner dismissal target. |
src/frontend/src/components/SessionGrid.astro |
Improves filter readability and contrast. |
src/frontend/src/components/SampleGrid.astro |
Adds accessible tag disclosure. |
src/frontend/src/components/SampleCard.astro |
Improves text and link sizing. |
src/frontend/src/components/QuickStartJourney.astro |
Uses body-text token. |
src/frontend/src/components/PivotSelector.astro |
Enlarges selector controls. |
src/frontend/src/components/LiveVideosTabs.astro |
Uses readable body sizing. |
src/frontend/src/components/LivePip.astro |
Restores focus to a visible control. |
src/frontend/src/components/LicenseBadge.astro |
Adds focus and touch sizing. |
src/frontend/src/components/LearnMore.astro |
Allows long labels to wrap. |
src/frontend/src/components/Integrations.astro |
Improves toggle sizing and wrapping. |
src/frontend/src/components/IntegrationCard.astro |
Removes title clipping. |
src/frontend/src/components/IconLinkCard.astro |
Allows card-title wrapping. |
src/frontend/src/components/home/HomeTestimonials.astro |
Uses metadata sizing token. |
src/frontend/src/components/home/HomeHero.astro |
Improves mobile text sizing. |
src/frontend/src/components/FooterSocials.astro |
Enlarges social touch targets. |
src/frontend/src/components/FooterPreferences.astro |
Enlarges preference controls. |
src/frontend/src/components/FeatureShowcase.astro |
Uses readable body sizing. |
src/frontend/src/components/dev-center/ResourceBrowser.astro |
Makes pagination wrap and scale. |
src/frontend/src/components/dev-center/BrowseDropdown.astro |
Enlarges coarse-pointer controls. |
src/frontend/src/components/CustomSelect.astro |
Improves mobile option sizing and wrapping. |
src/frontend/src/components/CTABanner.astro |
Improves CTA text and wrapping. |
src/frontend/src/components/ContainerImages.astro |
Uses metadata sizing token. |
src/frontend/src/components/CapabilityGrid.astro |
Uses readable body sizing. |
src/frontend/src/components/Breadcrumb.astro |
Adds parent-link and full-trail layouts. |
src/frontend/src/components/AppHostBuilder.astro |
Enlarges editor controls. |
src/frontend/src/components/api-reference/VersionFilter.astro |
Improves filter sizing and contrast. |
src/frontend/src/components/api-reference/TypeHero.astro |
Uses API contrast token. |
src/frontend/src/components/api-reference/PolyglotAttributePanel.astro |
Prevents metadata overflow. |
src/frontend/src/components/api-reference/MemberOverviewList.astro |
Allows identifiers to wrap. |
src/frontend/src/components/api-reference/MemberCardBase.astro |
Constrains long signatures. |
src/frontend/src/components/api-reference/MemberCard.astro |
Wraps long member names. |
src/frontend/src/components/api-reference/InpageSearch.astro |
Enlarges mobile search controls. |
src/frontend/src/components/api-reference/DocContent.astro |
Improves link visibility and contrast. |
src/frontend/src/components/api-reference/ApiSearchBar.astro |
Uses shared small-text tokens. |
src/frontend/pnpm-workspace.yaml |
Registers page-actions patch. |
src/frontend/pnpm-lock.yaml |
Records patched dependency hash. |
src/frontend/patches/starlight-page-actions@0.7.0.patch |
Fixes action menus and copy lifecycle. |
src/frontend/lunaria/styles.css |
Contains and labels translation tables. |
src/frontend/lunaria/renderer.config.ts |
Wraps file status in a focusable region. |
src/frontend/astro.config.mjs |
Registers navigation overrides. |
Files not reviewed (1)
- src/frontend/pnpm-lock.yaml: Generated file
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+1503
to
+1505
| header .title-wrapper .sl-badge { | ||
| display: none; | ||
| } |
Contributor
Frontend HTML artifact readyThe latest frontend build uploaded the This comment updates automatically when a new frontend build artifact is uploaded. |
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.
Summary
Improve the mobile experience across documentation, the homepage, catalogs, the resource hub, community pages, translations, and both API references while preserving the site's visual identity and desktop information architecture.
Mobile screenshots
58 screenshots cover all 35 audited page families, expanded controls, representative dark themes, and 320px stress cases. Primary captures use a 390x844 touch viewport. Click an image for its full-size view.
Homepage (1)
/390x844, light
Documentation (4)
/docs/390x844, light
/get-started/first-app/390x844, light
/get-started/install-cli/390x844, light
/reference/cli/commands/aspire-run/390x844, light
Integrations and deployment (5)
/integrations/390x844, light
/integrations/gallery/390x844, light
/integrations/caching/redis/390x844, light
/dashboard/390x844, light
/deployment/390x844, light
Community and media (5)
/community/390x844, light
/community/videos/390x844, light
/community/contributors/390x844, light
/community/thanks/390x844, light
/aspireconf/390x844, light
Catalogs and resource hub (7)
/reference/samples/390x844, light
/reference/samples/aspire-shop/390x844, light
/reference/container-images/390x844, light
/hub/390x844, light
/hub/browse/390x844, light
/hub/glossary/390x844, light
/hub/glossary/resourcenotificationservice/390x844, light
Localization and supporting pages (5)
/whats-new/aspire-13-6/390x844, light
/i18n/390x844, light
/404/390x844, light
/de/get-started/first-app/390x844, light
/ja/get-started/first-app/390x844, light
API reference (8)
/reference/api/csharp/390x844, light
/reference/api/csharp/aspire.hosting.redis/390x844, light
/reference/api/csharp/aspire.hosting.redis/redisresource/390x844, light
/reference/api/csharp/aspire.hosting.redis/redisbuilderextensions/methods/390x844, light
/reference/api/typescript/390x844, light
/reference/api/typescript/aspire.hosting.redis/390x844, light
/reference/api/typescript/aspire.hosting.redis/redisresource/390x844, light
/reference/api/typescript/aspire.hosting.redis/redisresource/withmodule/390x844, light
Expanded controls (14)
/390x844, light
/get-started/install-cli/390x844, light
/reference/api/csharp/aspire.hosting.redis/390x844, light
/reference/api/csharp/aspire.hosting.redis/redisbuilderextensions/methods/390x844, light
/get-started/install-cli/390x844, light
/hub/glossary/apphost/390x844, light
/hub/browse/390x844, light
/reference/api/csharp/390x844, light
/reference/samples/390x844, light
/390x844, light
/get-started/install-cli/390x844, light
/i18n/390x844, light
/reference/api/csharp/aspire.hosting.redis/redisbuilderextensions/methods/390x844, light
/get-started/install-cli/390x844, light
Dark theme (5)
/390x844, dark
/integrations/gallery/390x844, dark
/reference/api/csharp/aspire.hosting.redis/redisbuilderextensions/methods/390x844, dark
/hub/browse/390x844, dark
/390x844, dark
Narrow phones (4)
/320x844, light
/get-started/install-cli/320x844, light
/reference/api/csharp/aspire.hosting.redis/redisbuilderextensions/methods/320x844, light
/i18n/320x844, light
Third-party links and affiliations
None. Existing third-party destinations are preserved.
Validation
Commands run from
src\frontend:pnpm exec playwright test mobile-ux.spec.ts --workers=2 --reporter=list— passed: 28 tests; 2 intentionally skipped across the existing desktop, tablet, and mobile projects.pnpm exec playwright test mobile-ux.spec.ts --workers=2 --reporter=list --grep 'Markdown copying|shared menus|page actions have'— passed: 9 tests, confirming the final copy/menu/dropdown lifecycle fixes.pnpm exec playwright test dev-browse.spec.ts dev-layout.spec.ts --workers=2 --reporter=list --grep 'shared breadcrumbs|desktop header actions'— passed: 12 tests, preserving existing breadcrumb and desktop-header contracts.pnpm exec vitest run --config vitest.config.ts tests\unit\custom-components.vitest.test.ts tests\unit\header-environment-badge.vitest.test.ts tests\unit\api-reference-components.vitest.test.ts tests\unit\api-reference.vitest.test.ts tests\unit\search-presentation.vitest.test.ts tests\unit\site-tour.vitest.test.ts tests\unit\banner-render.vitest.test.ts tests\unit\navigation-theme.vitest.test.ts tests\unit\icon-styles.vitest.test.ts tests\unit\stream-embeds.vitest.test.ts tests\unit\live-status.vitest.test.ts— passed: 224 tests in 11 files.pnpm exec tsc --noEmit— not clean: 239 pre-existing diagnostics. An in-memory comparison against the base commit found 239 baseline and 239 current diagnostics, with none introduced by this change; isolated strict checking of the changed mobile-controller scripts passed.No local production build was run, in accordance with repository guidance. Production search is disabled in the dev preview and requires CI/preview verification. Physical iPhone, Android, and Safari checks were unavailable; browser emulation is not device or accessibility certification.