[AXE] Announcement bar fails accessibility on every page

オープン
  • 何か問題がありますか？
#145 コメント 0 件 リアクション 0 件 担当者 2 名 GitHub で見る

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

@matej-marcisovsky がすでに取り組んでいます。

2026年10月16日 から。

評価

この issue はまだ評価されていません。

説明

bug

Where: every page. The purple top banner, currently "✨ Strapi MCP is now Generally Available".

What's wrong (Axe, 22 of 22 pages):

Image
  • color-contrast (serious): the link inside the banner is text-amber-200 on bg-strapi-purple-600, which is below the WCAG AA minimum of 4.5:1 for small text.
  • region (moderate): the banner is a plain <div> outside any landmark (<header>, <main>, <nav>, <aside>, …), so screen-reader users navigating by landmarks skip it.

Code: components/page-builder/components/navigation/top-banner/StrapiTopBanner.tsx

  • wrapper: <div data-top-banner className="bg-strapi-purple-600 …">
  • link color: [&_a]:text-amber-200 (hover: amber-100)

How to reproduce: run the Axe suite, or in Chrome DevTools → Lighthouse → Accessibility, open any page and look for "Background and foreground colors do not have a sufficient contrast ratio" pointing at the banner link.

Done when:

  • the banner link reaches at least 4.5:1 contrast (e.g. white with an underline, or a lighter/darker shade, checked with a contrast checker)
  • the banner is inside a landmark, e.g. the wrapper becomes <aside aria-label="Announcement"> (label from translations)
  • the Axe suite no longer reports color-contrast or region for the banner on any page

Note: one component fix removes the most frequent Axe violations site-wide.

主要言語
TypeScript
スター
6
フォーク
5
平均マージ
5日 6時間
マージ済み PR（30日）
7

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

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

strapi/website のほかの issue

strapi/website の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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