【React 初心者】MUIのSelectのissues(ラベルの関連付けとidに関するエラー)

環境

    "@mui/material": "^6.4.8",
    "@mui/material-nextjs": "^7.0.2",
    "next": "15.2.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",

最初に

タイトルのエラーについて色々調べてissuesを解決したのでそれのまとめ書きを
ただ、このissuesは無視しても問題はないと思われる
このエラーはアクセシビリティに関するエラーなのだけど、このエラーを解決せずともMUI側で管理している可能性が高い
MUI Select Accessibility

具体的にはlabelIdとidがあればokみたい

どうしてもエラーを無くす必要がある場合は参考にしていただけると光栄です。

問題点

概要

• MUIのセレクトのサンプルでDevToolsのIssuesにエラーが発生
  • A form field element should have an id or name attribute
    • 「フォームにはidかnameをつけてね」というエラー
  • No label associated with a form field
    • 「ラベルとフォームを関連づけてね」というエラー

詳細

サンプルコードは以下
MUI Select Basic Select

これをStorybook上で開くと以下のエラーが出る

どちらのエラーもアクセシビリティに関するエラーであり、MDN labelページを見る限り解決するとプラグラム的に関連付けされて色々便利みたいです。
具体的には、読み上げソフトでフォームフォーカス時にラベルを読ませたり、ラベルをタップ時にもフォームにフォーカスさせたりできるみたいです。

解決法

概要

• A form field element should have an id or name attribute エラー
  • nameを付与するか、input自体にidを付与する
• No label associated with a form field エラー
  • label側にforを、input側にidを付与する

詳細

A form field element should have an id or name attribute エラー

Selectにはidが付与されているが、これはform field element(MUIのSelectの場合はinput)には適応されない

React

        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select" // これはinputには適応されない

HTML

<input aria-invalid="false" aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput css-j0riat-MuiSelect-nativeInput" value="">

nameであればinputに適応されるのでnameを付与すれば解決可能

React

        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          name="demo-simple-select" // これはinputに適応される

または、InputPropsでidを付与することでも解決可能(inputのidに付与される)

React

        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          inputProps={{ id: "demo-simple-select" }} // inputのidに追加される

No label associated with a form field エラー

これはlabelのforとinputのidに同様の値を設定して関連付けする必要がある
MDN labelより

HTML

<label for="username">名前を入力してください:</label>
<input id="username" name="username" type="text" />

React側では以下のようにInputLabelにhtmlForを追加してSelectのinputPropsのidと合致させる

React

        <InputLabel htmlFor="demo-simple-select" id="demo-simple-select-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-label"
          inputProps={{ id: "demo-simple-select" }}

Selectにidがある場合はエラーが出るみたいなので、そっちは削除する必要あり

参考

MDN label
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/label
MUI Select
https://mui.com/material-ui/react-select/
(github mui issues)[Select] Form Control examples that contain Select do not pass WAVE accessibility for labels #32495
https://github.com/mui/material-ui/issues/32495