LanguageButtonのアクセシビリティ対応

[keitakn]

Done の定義

• 利用するタグが <button> に変更されている事
• aria-haspopup が true に設定されている事
• aria-expanded がメニューの開閉状態に合わせて変更されている事
• tabIndex が 0 に設定されている事

補足情報

コメント欄にChatGPTの回答を載せておく。

[keitakn]

メモ

languageButton コンポーネントは、ウェブサイトの言語を切り替えるためのメニューを開く役割を果たしています。このようなインタラクティブな要素にはアクセシビリティを考慮したマークアップを施すことが重要です。

以下にいくつかの推奨される属性を示します：

role：この属性は要素の役割を明確にするために使用されます。ここでは button を指定するのが適切です。これにより、スクリーンリーダーはこの要素をボタンとして認識し、利用者に適切な情報を提供します。

aria-haspopup：この属性は要素がポップアップメニューを持つことを示します。LanguageButton は言語選択メニューを開く役割を持つため、この属性を true に設定します。

aria-expanded：この属性は、コントロールされる要素（この場合はポップアップメニュー）が展開されているか（true）または閉じているか（false）を示します。この値はメニューが開いたり閉じたりするたびに動的に更新する必要があります。

tabIndex：この属性は要素がキーボード操作のタブ順に含まれるかどうかを指定します。インタラクティブな要素である LanguageButton はタブ操作でアクセス可能であるべきなので、tabIndex="0" を設定します。

上記の属性を適用した LanguageButton コンポーネントは以下のようになります。

typescript
Copy code
export const LanguageButton: FC<Props> = ({ onClick }) => (
  <div 
    className={styles.wrapper} 
    onClick={onClick}
    role="button"
    aria-haspopup="true"
    aria-expanded="false" // この値はメニューの状態に応じて動的に更新する必要があります
    tabIndex="0"
  >
    <p className={styles.text}>Language</p>
    <FaCaretDown className={styles.faCaretDown} />
  </div>
);
ただし、上記のコードでは aria-expanded 属性の値が静的に false に設定されています。この値は実際にはメニューが開いているか閉じているかに応じて動的に更新する必要があります。そのため、LanguageButton コンポーネントの状態を管理するためのロジックが必要となります。

[keitakn]

メモ

<button> タグを使用するのは非常に良いアイデアです。<button> タグは自動的にキーボードアクセシビリティ（エンターキーとスペースキーの両方で動作する）を提供し、また role="button" 属性を指定する必要もなくなります。

ただし、デフォルトのブラウザスタイリングが適用されるため、それらをリセットするための追加のCSSが必要になるかもしれません。

以下に、<button> タグを使用した LanguageButton コンポーネントの例を示します：

typescript
Copy code
export const LanguageButton: FC<Props> = ({ onClick }) => (
  <button 
    className={styles.wrapper} 
    onClick={onClick}
    aria-haspopup="true"
    aria-expanded="false" // この値はメニューの状態に応じて動的に更新する必要があります
  >
    <p className={styles.text}>Language</p>
    <FaCaretDown className={styles.faCaretDown} />
  </button>
);
この場合、スタイルシート LanguageButton.module.css には以下のようなスタイルが必要になるかもしれません：

css
Copy code
.wrapper {
  /* 他のスタイリング... */
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
このスタイルシートは <button> タグのデフォルトのボーダーやバックグラウンドをリセットし、カーソルがポインターになるようにします。これにより、<button> タグが自然な外見を持ちながら、それでもボタンとしての振る舞いを保つことができます。