[Bug]: AppLayout mobile navigation renders unsupported aria-orientation on nav

Aperta Adatta ai principianti

#5,152 aperta il 16/10/2026 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà: 2/5
Tempo stimato: 1-3 ore
Idoneità per principianti: 78/100

Tipo di issue: Bug
Chiarezza: Specificata chiaramente
Stato di attività: Attiva
Stack tecnologico: playwright, react, typescript
Ambito: accessibility, frontend

Direzione di ricerca

Inizia da src/app-layout/visual-refresh/mobile-toolbar.tsx, righe 56–59, dove l’issue identifica l’attributo non supportato nella navigazione mobile. Controlla i test AppLayout esistenti per la navigazione mobile e aggiungi test per lo stato chiuso. Il lavoro è completato quando il controllo rigoroso dell’accessibilità passa senza rimuovere il nome accessibile, la semantica di navigazione o il comportamento di attivazione e di focus.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Browser

Chrome / Chromium 149.0.7827.55 (Playwright).

Package version

3.0.1401 and 3.0.1310.

React version

19.2.7.

Description

When the standard AppLayout is rendered at a mobile viewport with navigation closed, its SDK-owned mobile navigation nav receives aria-orientation="horizontal". The element retains the implicit navigation role, which does not support this attribute. Strict axe scans report aria-allowed-attr.

Reproduced on both @cloudscape-design/components 3.0.1310 and 3.0.1401. Version 3.0.1401 was the npm latest version checked on 2026-10-16. The standalone reproduction uses no application wrappers or product theme, and does not alter Cloudscape DOM or CSS.

Actual behavior

The visible closed-state mobile toolbar renders the following markup (generated class names omitted):

<nav aria-hidden="false" aria-label="Navigation" aria-orientation="horizontal">
  <!-- SDK navigation toggle -->
</nav>

axe-core 4.12.1 reports aria-allowed-attr, with impact classified as critical and the message ARIA attribute is not allowed: aria-orientation="horizontal".

Expected behavior

The navigation landmark uses supported ARIA attributes. Please correct the SDK-owned markup while retaining its accessible name, navigation semantics, and toggle/focus behavior. If orientation belongs to a toolbar widget, it should be applied to a semantically appropriate element.

Verified matrix

Scenario	SDK 3.0.1310	SDK 3.0.1401
AppLayout, 390×844, navigation closed	`aria-allowed-attr` (one node)	`aria-allowed-attr` (one node)
AppLayout, 390×844, navigation open	No WCAG violations	No WCAG violations
AppLayout, 1280×900, navigation closed	No WCAG violations	No WCAG violations
AppLayoutToolbar, 390×844, navigation closed	No WCAG violations	No WCAG violations

The affected component is standard AppLayout; AppLayoutToolbar is included only as a diagnostic control. This report does not concern the legacy Classic visual theme.

Environment and impact

Chromium 149.0.7827.55 via Playwright 1.61.1; Windows; Node.js v24.19.0.
React/React DOM 19.2.7; Cloudscape global styles 1.0.60; axe-core 4.12.1.
Strict scans use WCAG 2 A, WCAG 2 AA, and WCAG 2.1 AA tags, with no disabled rules or node exclusions.
The invalid attribute causes automated accessibility gates to fail for standard mobile AppLayout consumers. Screen-reader behavior has not been assessed in this reproduction.

Source and references

The matching markup is present in mobile-toolbar.tsx, lines 56–59, inspected on 2026-10-16. This identifies matching markup, not the commit that introduced the defect.
WAI-ARIA navigation role and aria-orientation.

Acceptance check

The strict reproduction below should exit 0 after a fix, with all four scenarios passing and without suppressing aria-allowed-attr. Mobile navigation should still open and close with the same accessible controls.

Source code

The minimal failing component is:

import React from "react";
import { createRoot } from "react-dom/client";
import AppLayout from "@cloudscape-design/components/app-layout";
import "@cloudscape-design/global-styles/index.css";

createRoot(document.getElementById("root")).render(
  <AppLayout
    navigation={<a href="#content">Example section</a>}
    navigationOpen={false}
    toolsHide
    ariaLabels={{
      navigation: "Navigation",
      navigationToggle: "Open navigation",
      navigationClose: "Close navigation",
    }}
    content={<h1 id="content">Minimal AppLayout reproduction</h1>}
  />
);

The standalone project adds controlled navigation state and the Toolbar control so all matrix cases can run from the same fixture. The full standalone source and direct dependency pins are included below.

Reproduction

Save the four source files below in a new standalone directory, install the pinned direct dependencies and Playwright Chromium, then build it.
Run pnpm test. It starts and stops its own local server, scans four scenarios, and writes evidence/report.json plus PNGs.
With affected versions, the expected exit code is 1: only app-layout-mobile-closed fails aria-allowed-attr.
For manual inspection, run pnpm dev, open http://127.0.0.1:5295/, set the viewport to 390×844, and keep navigation closed.
Inspect the mobile navigation toggle parent nav and run axe. Open navigation or use the desktop viewport to compare. ?layout=toolbar is the control.

corepack pnpm install --ignore-workspace
corepack pnpm exec playwright install chromium
corepack pnpm build
corepack pnpm test

The default standalone project pins SDK 3.0.1401. To rerun the baseline, change only the SDK version to 3.0.1310, regenerate the lockfile, and rerun. Both captured JSON reports are included below. The script generates fresh screenshots and a report locally.

Standalone reproduction files

Use Node.js 24 and pnpm 9.15.0. All direct dependencies are pinned; pnpm install generates the lockfile. No workspace packages are required.

package.json

{
  "name": "cloudscape-app-layout-mobile-aria-repro",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "packageManager": "[email protected]",
  "scripts": {
    "dev": "vite --host 127.0.0.1 --port 5295",
    "build": "vite build",
    "test": "node capture.mjs"
  },
  "dependencies": {
    "@cloudscape-design/components": "3.0.1401",
    "@cloudscape-design/global-styles": "1.0.60",
    "react": "19.2.7",
    "react-dom": "19.2.7"
  },
  "devDependencies": {
    "axe-core": "4.12.1",
    "playwright": "1.61.1",
    "vite": "6.4.3"
  }
}

index.html

<!doctype html>
<html lang="en">
  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>AppLayout mobile ARIA reproduction</title></head>
  <body style="margin:0"><div id="root"></div><script type="module" src="/main.jsx"></script></body>
</html>

main.jsx

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import AppLayout from "@cloudscape-design/components/app-layout";
import AppLayoutToolbar from "@cloudscape-design/components/app-layout-toolbar";
import "@cloudscape-design/global-styles/index.css";

function Reproduction() {
  const [navigationOpen, setNavigationOpen] = useState(false);
  const Layout = new URLSearchParams(location.search).get("layout") === "toolbar"
    ? AppLayoutToolbar
    : AppLayout;

  return (
    <Layout
      navigation={<a href="#content">Example section</a>}
      navigationOpen={navigationOpen}
      onNavigationChange={({ detail }) => setNavigationOpen(detail.open)}
      toolsHide
      ariaLabels={{
        navigation: "Navigation",
        navigationToggle: "Open navigation",
        navigationClose: "Close navigation",
      }}
      content={<h1 id="content">Minimal AppLayout reproduction</h1>}
    />
  );
}

createRoot(document.getElementById("root")).render(<Reproduction />);

capture.mjs

import fs from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { createServer } from "vite";
import { chromium } from "playwright";
import axe from "axe-core";

const root = path.dirname(fileURLToPath(import.meta.url));
const output = path.join(root, "evidence");
const pkg = JSON.parse(await fs.readFile(path.join(root, "package.json"), "utf8"));
await fs.mkdir(output, { recursive: true });
const server = await createServer({ root, configFile: false, server: { host: "127.0.0.1", port: 0 } });
await server.listen();
const address = server.httpServer.address();
const baseUrl = `http://127.0.0.1:${address.port}/`;
const browser = await chromium.launch({
  headless: true,
  ...(process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH
    ? { executablePath: process.env.PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH }
    : {}),
});
const report = {
  checkedAt: new Date().toISOString(),
  environment: { node: process.version, platform: process.platform, browser: browser.version(), ...pkg.dependencies, axe: pkg.devDependencies["axe-core"] },
  cases: [],
};

async function scan(page, name) {
  await page.addScriptTag({ content: axe.source });
  const result = await page.evaluate(() => axe.run(document, {
    runOnly: { type: "tag", values: ["wcag2a", "wcag2aa", "wcag21aa"] },
  }));
  const violations = result.violations.map(({ id, impact, help, nodes }) => ({
    id, impact, help, nodes: nodes.map(({ html, target, failureSummary }) => ({ html, target, failureSummary })),
  }));
  await page.screenshot({ path: path.join(output, name + ".png"), fullPage: true });
  report.cases.push({ name, viewport: page.viewportSize(), violations });
  console.log(`${violations.length ? "FAIL" : "PASS"} ${name}: ${violations.map(v => v.id).join(", ") || "no WCAG violations"}`);
}

try {
  for (const [width, height] of [[390, 844], [1280, 900]]) {
    const page = await browser.newPage({ viewport: { width, height } });
    const errors = [];
    page.on("pageerror", error => errors.push(error.message));
    await page.goto(baseUrl, { waitUntil: "networkidle" });
    await page.getByRole("heading", { name: "Minimal AppLayout reproduction" }).waitFor();
    await scan(page, width === 390 ? "app-layout-mobile-closed" : "app-layout-desktop-closed");
    if (width === 390) {
      await page.getByRole("button", { name: "Open navigation", exact: true }).click();
      await page.getByRole("link", { name: "Example section" }).waitFor();
      // Let the drawer's opacity transition finish before testing contrast.
      await page.waitForTimeout(500);
      await scan(page, "app-layout-mobile-open");
    }
    if (errors.length) throw new Error(errors.join("; "));
    await page.close();
  }
  const page = await browser.newPage({ viewport: { width: 390, height: 844 } });
  await page.goto(baseUrl + "?layout=toolbar", { waitUntil: "networkidle" });
  await page.getByRole("heading", { name: "Minimal AppLayout reproduction" }).waitFor();
  await scan(page, "app-layout-toolbar-mobile-closed");
  await page.close();
} finally {
  await browser.close();
  await server.close();
}
await fs.writeFile(path.join(output, "report.json"), JSON.stringify(report, null, 2) + "\n");
// This is a strict regression check: exit 1 is expected while the bug exists.
if (report.cases.some(test => test.violations.length > 0)) process.exitCode = 1;

Captured strict scan results

Both builds succeeded. In both runs, pnpm test exited 1 because the mobile closed-state case reports one aria-allowed-attr violation; the three control cases pass. The 500 ms wait in the open-state case lets the navigation opacity transition complete before checking color contrast.

SDK 3.0.1310 — report.json

{
  "checkedAt": "2026-10-16T11:02:01.470Z",
  "environment": {
    "node": "v24.19.0",
    "platform": "win32",
    "browser": "149.0.7827.55",
    "@cloudscape-design/components": "3.0.1310",
    "@cloudscape-design/global-styles": "1.0.60",
    "react": "19.2.7",
    "react-dom": "19.2.7",
    "axe": "4.12.1"
  },
  "cases": [
    {
      "name": "app-layout-mobile-closed",
      "viewport": {
        "width": 390,
        "height": 844
      },
      "violations": [
        {
          "id": "aria-allowed-attr",
          "impact": "critical",
          "help": "Elements must only use supported ARIA attributes",
          "nodes": [
            {
              "html": "<nav aria-hidden=\"false\" aria-label=\"Navigation\" aria-orientation=\"horizontal\" class=\"awsui_mobile-toolbar-nav_hyvsj_ffxhy_675 awsui_drawer-closed_1fj9k_q6akd_15\">",
              "target": [
                ".awsui_mobile-toolbar-nav_hyvsj_ffxhy_675"
              ],
              "failureSummary": "Fix all of the following:\n  ARIA attribute is not allowed: aria-orientation=\"horizontal\""
            }
          ]
        }
      ]
    },
    {
      "name": "app-layout-mobile-open",
      "viewport": {
        "width": 390,
        "height": 844
      },
      "violations": []
    },
    {
      "name": "app-layout-desktop-closed",
      "viewport": {
        "width": 1280,
        "height": 900
      },
      "violations": []
    },
    {
      "name": "app-layout-toolbar-mobile-closed",
      "viewport": {
        "width": 390,
        "height": 844
      },
      "violations": []
    }
  ]
}

SDK 3.0.1401 — report.json

{
  "checkedAt": "2026-10-16T11:02:00.110Z",
  "environment": {
    "node": "v24.19.0",
    "platform": "win32",
    "browser": "149.0.7827.55",
    "@cloudscape-design/components": "3.0.1401",
    "@cloudscape-design/global-styles": "1.0.60",
    "react": "19.2.7",
    "react-dom": "19.2.7",
    "axe": "4.12.1"
  },
  "cases": [
    {
      "name": "app-layout-mobile-closed",
      "viewport": {
        "width": 390,
        "height": 844
      },
      "violations": [
        {
          "id": "aria-allowed-attr",
          "impact": "critical",
          "help": "Elements must only use supported ARIA attributes",
          "nodes": [
            {
              "html": "<nav aria-hidden=\"false\" aria-label=\"Navigation\" aria-orientation=\"horizontal\" class=\"awsui_mobile-toolbar-nav_hyvsj_16epy_499 awsui_drawer-closed_1fj9k_q6akd_15\">",
              "target": [
                ".awsui_mobile-toolbar-nav_hyvsj_16epy_499"
              ],
              "failureSummary": "Fix all of the following:\n  ARIA attribute is not allowed: aria-orientation=\"horizontal\""
            }
          ]
        }
      ]
    },
    {
      "name": "app-layout-mobile-open",
      "viewport": {
        "width": 390,
        "height": 844
      },
      "violations": []
    },
    {
      "name": "app-layout-desktop-closed",
      "viewport": {
        "width": 1280,
        "height": 900
      },
      "violations": []
    },
    {
      "name": "app-layout-toolbar-mobile-closed",
      "viewport": {
        "width": 390,
        "height": 844
      },
      "violations": []
    }
  ]
}

Duplicate search

On 2026-10-16, issue-only searches in this repository for "aria-orientation" and "aria-allowed-attr" returned no matching issues. This does not establish that no related issue exists under another description.

Lingua principale: TypeScript
Stelle: 2.7k
Fork: 248
Merge medio: 3g 14h
PR unite (30g): 83

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

Leggi tutta la issue e poi la guida ai contributi del progetto.
Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
Fai un fork del repository e lavora su un branch.
Apri una pull request che faccia riferimento al numero della issue.

Altre issue di cloudscape-design/components

[Bug]: Circular app layout navigation and help icons are shifted upward in the official demo
Aperta
- Qualcosa non va?
bug

Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100

cloudscape-design/components#5184 · Aperta il 23/10/2026

I maintainer di solito rispondono entro 2 giorni
[Feature request] Star rating component (Rating)
Aperta
- Qualcosa non va?
enhancement

Difficoltà 5/5 Più di una settimana Idoneità per principianti 15/100

cloudscape-design/components#5149 · 1 commento · Aperta il 15/10/2026

I maintainer di solito rispondono entro 2 giorni
[Bug]: Internal and external design token hashes don't match
Aperta
- Qualcosa non va?
bug

Difficoltà 4/5 3-5 giorni Idoneità per principianti 45/100

cloudscape-design/components#5117 · 2 commenti · Aperta il 7/10/2026

I maintainer di solito rispondono entro 2 giorni
[Feature Request]: Shorter scoped class names and class-name maps
Aperta
- Qualcosa non va?
Difficoltà 5/5 Più di una settimana Idoneità per principianti 35/100

cloudscape-design/components#5106 · 1 commento · Aperta il 5/10/2026

I maintainer di solito rispondono entro 2 giorni
[Bug/Feature Request]: `usePerformanceMarks` has ID generation incompatible with Next.js Partial Prerendering
Forse già presa @amanabiy l’ha presa 22 giorni fa. Aperta
- Qualcosa non va?
enhancement

cloudscape-design/components#5023 · 1 commento · 1 assegnatario · Aperta il 17/9/2026

I maintainer di solito rispondono entro 2 giorni

Tutte le issue di cloudscape-design/components

Issue simili

[Docs Bug]: Show same-model interactive and background provider routes
Aperta
- Qualcosa non va?
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3

Difficoltà 2/5 1-3 ore Idoneità per principianti 73/100

openclaw/openclaw#182077 · 1 commento · 1 reazione · Aperta il 24/10/2026

I maintainer di solito rispondono entro 1 giorno
Major upgrade for undici - axe-linter-action
Aperta
- Qualcosa non va?
aikido high security

Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100

dequelabs/axe-linter-action#161 · Aperta il 24/10/2026
[Feature Request] Update the DimCode agent icon to the 45:32 brand mark
Forse già presa @eric8810 l’ha presa oggi. Aperta
- Qualcosa non va?
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100

LodyAI/Lody#1846 · Aperta il 24/10/2026

I maintainer di solito rispondono entro 1 giorno
[Feature]: 建议导入源后,自动切换到新导入的源
Aperta
- Qualcosa non va?
Difficoltà 2/5 1-3 ore Idoneità per principianti 66/100

lyswhut/lx-music-desktop#3026 · Aperta il 24/10/2026
wiki: parent and overview pages link to guessed page slugs, so cross-page links are broken
Aperta
- Qualcosa non va?
Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100

abhigyanpatwari/GitNexus#3704 · Aperta il 24/10/2026

I maintainer di solito rispondono entro 1 giorno

Altre issue su TypeScript

[Bug]: AppLayout mobile navigation renders unsupported aria-orientation on nav

Qualcosa non va?

Valutazione

Direzione di ricerca

Descrizione

Browser

Package version

React version

Description

Actual behavior

Expected behavior

Verified matrix

Environment and impact

Source and references

Acceptance check

Source code

Reproduction

Standalone reproduction files

Captured strict scan results

Duplicate search

Preparare l'ambiente

Come iniziare

Altre issue di cloudscape-design/components

Qualcosa non va?

Qualcosa non va?

Qualcosa non va?

Qualcosa non va?

Qualcosa non va?

Issue simili

Qualcosa non va?

Qualcosa non va?

Qualcosa non va?

Qualcosa non va?

Qualcosa non va?

Ricevi le nuove issue nella tua casella