Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン 初心者向け
  • 何か問題がありますか？
#5,152 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
78/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
playwright, react, typescript
領域
accessibility, frontend

調査の方向性

src/app-layout/visual-refresh/mobile-toolbar.tsx の56～59行目から始めてください。そこでは、issue がモバイルナビゲーションの未サポート属性を特定しています。モバイルナビゲーションに関する既存の AppLayout テストを確認し、閉じた状態のテストを追加してください。アクセシブルな名前、ナビゲーションのセマンティクス、切り替えとフォーカスの動作を削除せずに、厳格なアクセシビリティスキャンに合格すれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

  1. Save the four source files below in a new standalone directory, install the pinned direct dependencies and Playwright Chromium, then build it.
  2. Run pnpm test. It starts and stops its own local server, scans four scenarios, and writes evidence/report.json plus PNGs.
  3. With affected versions, the expected exit code is 1: only app-layout-mobile-closed fails aria-allowed-attr.
  4. For manual inspection, run pnpm dev, open http://127.0.0.1:5295/, set the viewport to 390×844, and keep navigation closed.
  5. 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.

主要言語
TypeScript
スター
2.7k
フォーク
248
平均マージ
3日 14時間
マージ済み PR（30日）
83

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

cloudscape-design/components のほかの issue

cloudscape-design/components の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。