Skip to content

Accessibility: screen containers use a disallowed main role and duplicate the main landmark #526

Closed

Description

@mossbot55

The wallet's screen containers fail two axe rules. Surfaced while adding the UI Lab accessibility scan (#524); the scan now reports these against the embedded wallet document.

Problem

dockScreen renders each screen as a <main> with an explicit role="tabpanel":

  • packages/presentation/wallet-ui/src/sidepanel/shared/parts.ts:450 -> <main class="screen" id="wallet-screen-{view}" role="tabpanel" tabindex="-1">
  • packages/presentation/wallet-ui/src/sidepanel/shared/parts.ts:457 -> a second <main class="screen flow" id="wallet-screen-{view}" tabindex="-1">

The review frame that hosts the wallet also has its own <main id="app">, so a docked screen produces:

  • aria-allowed-role (minor): ARIA role tabpanel is not allowed for given element on #wallet-screen-home.
  • landmark-main-is-top-level (moderate): the main landmark is contained in another landmark (#wallet-screen-send).
  • landmark-no-duplicate-main (moderate): more than one main landmark (#app).
  • landmark-unique (moderate): landmarks are not distinguishable.

Evidence

axe-core 4.13.0 against the embedded wallet document (UI Lab, Wallet UI Lab / Accessibility scan story), at the 400 x 760 side-panel surface:

  • portfolio ready: aria-allowed-role (minor), page-has-heading-one (moderate).
  • send review: landmark-main-is-top-level, landmark-no-duplicate-main, landmark-unique (all moderate).

page-has-heading-one is a separate document-level finding and is not part of this report.

Proposed options

Decide the intended semantics before changing markup:

  1. Make the hosting <main> the only main, and render docked screens as a non-landmark container (<div> or <section aria-labelledby>), dropping the tabpanel role where the screen is not actually a tab panel.
  2. Keep a single main per surface and give each screen a unique accessible name if several remain landmarks.

Either way the fix touches dockScreen and both of its call sites. This report only records the finding; it is not an implementation request.

Activity

  1. derek-flossman commented on Oct 12, 2026

    @derek-flossman
    Collaborator

    Fixed on release/v0.10.6 by #636 (merge commit 7eb9028).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingphase:1Phase 1 — Core/shell build

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions