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

{
  "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"
  }
}

<!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>

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 />);

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;

{
  "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": []
    }
  ]
}

{
  "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": []
    }
  ]
}