Enable some oxlint a11y rules & improve keyboard accessibility (#34291)

* Conform to oxlint rule jsx-a11y/role-has-required-aria-props * Conform to oxlint rule jsx-a11y/role-supports-aria-props * Conform to oxlint rule jsx-a11y/interactive-supports-focus * Conform to oxlint rule jsx-a11y/click-events-have-key-events * Update snapshots
2026-07-16 17:29:49 +00:00
parent 40137cdc54
commit b9972b7e9e
49 changed files with 215 additions and 162 deletions
@@ -12,6 +12,7 @@ exports[`FilePanel renders empty state 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -3628,6 +3628,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                class="mx_BaseCard_header_title"
              >
                <p
+                  aria-level="1"
                  class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
                  role="heading"
                >
@@ -137,7 +137,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                    aria-labelledby="react-use-id-1"
                    class="_input_153f2_18"
                    id="checkbox_MwbPDmfGtm"
-                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
@@ -235,7 +234,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                    aria-labelledby="react-use-id-2"
                    class="_input_153f2_18"
                    id="checkbox_GQvdMWe954"
-                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
@@ -334,7 +332,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                    aria-labelledby="react-use-id-3"
                    class="_input_153f2_18"
                    id="checkbox_DVIAu5CsiH"
-                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
@@ -455,7 +452,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                          class="_input_153f2_18"
                          disabled=""
                          id="checkbox_RD7nyrA2oh"
-                          role="presentation"
                          tabindex="-1"
                          type="checkbox"
                        />
@@ -556,7 +552,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                    aria-labelledby="react-use-id-6"
                    class="_input_153f2_18"
                    id="checkbox_jWVJIPauy1"
-                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
@@ -727,7 +722,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                    aria-labelledby="react-use-id-1"
                    class="_input_153f2_18"
                    id="checkbox_EetmBG4yVC"
-                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
@@ -825,7 +819,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                    aria-labelledby="react-use-id-2"
                    class="_input_153f2_18"
                    id="checkbox_eEefiPqpMR"
-                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
@@ -924,7 +917,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                    aria-labelledby="react-use-id-3"
                    class="_input_153f2_18"
                    id="checkbox_MwbPDmfGtm"
-                    role="presentation"
                    tabindex="-1"
                    type="checkbox"
                  />
@@ -467,8 +467,11 @@ num_sqrt = num **
        </code>
      </div>
    </pre>
-    <span
-      class="mx_EventTile_button"
+    <button
+      aria-label="Expand"
+      class="mx_AccessibleButton mx_EventTile_button"
+      role="button"
+      tabindex="0"
    >
      <svg
        fill="currentColor"
@@ -481,7 +484,7 @@ num_sqrt = num **
          d="M21 3.997a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 20 3h-8a1 1 0 1 0 0 2h5.586L5 17.586V12a1 1 0 1 0-2 0v8.003a1 1 0 0 0 .29.702l.005.004c.18.18.43.291.705.291h8a1 1 0 1 0 0-2H6.414L19 6.414V12a1 1 0 1 0 2 0z"
        />
      </svg>
-    </span>
+    </button>
    <button
      aria-label="Copy"
      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
@@ -114,11 +114,13 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
          class="mx_PollListItem"
          data-testid="pollListItem-$2"
        >
-          <span
+          <div
+            aria-label="View poll"
+            class="mx_AccessibleButton mx_PollListItemEnded_content"
+            role="button"
            tabindex="0"
          >
            <div
-              aria-labelledby="react-use-id-1"
              class="mx_PollListItem_content"
            >
              <span>
@@ -142,17 +144,19 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
                Where?
              </span>
            </div>
-          </span>
+          </div>
        </li>
        <li
          class="mx_PollListItem"
          data-testid="pollListItem-$1"
        >
-          <span
+          <div
+            aria-label="View poll"
+            class="mx_AccessibleButton mx_PollListItemEnded_content"
+            role="button"
            tabindex="0"
          >
            <div
-              aria-labelledby="react-use-id-2"
              class="mx_PollListItem_content"
            >
              <span>
@@ -176,7 +180,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
                Question?
              </span>
            </div>
-          </span>
+          </div>
        </li>
      </ol>
    </div>
@@ -6,11 +6,13 @@ exports[`<PollListItem /> renders a poll 1`] = `
    class="mx_PollListItem"
    data-testid="pollListItem-$mypoll"
  >
-    <span
+    <div
+      aria-label="View poll"
+      class="mx_AccessibleButton mx_PollListItemEnded_content"
+      role="button"
      tabindex="0"
    >
      <div
-        aria-labelledby="react-use-id-1"
        class="mx_PollListItem_content"
      >
        <span>
@@ -34,7 +36,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
          Question?
        </span>
      </div>
-    </span>
+    </div>
  </li>
 </div>
 `;
@@ -6,53 +6,51 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
    class="mx_PollListItemEnded"
    data-testid="pollListItem-1"
  >
-    <span
+    <div
+      aria-label="View poll"
+      class="mx_AccessibleButton mx_PollListItemEnded_content"
+      role="button"
      tabindex="0"
    >
      <div
-        aria-labelledby="react-use-id-1"
-        class="mx_PollListItemEnded_content"
+        class="mx_PollListItemEnded_title"
      >
-        <div
-          class="mx_PollListItemEnded_title"
+        <svg
+          class="mx_PollListItemEnded_icon"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
        >
-          <svg
-            class="mx_PollListItemEnded_icon"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M21 10.659V19q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3h8.341A6 6 0 0 0 13 5H5v14h14v-8a6 6 0 0 0 2-.341"
-            />
-            <path
-              d="M13.803 8a6 6 0 0 0 1.88 2H13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 9q0-.424.287-.713A.97.97 0 0 1 13 8zm2.91 7.713A.97.97 0 0 1 16 16h-3a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 15q0-.424.287-.713A.97.97 0 0 1 13 14h3q.424 0 .712.287.288.288.288.713 0 .424-.288.713m-6.299-5.3A1.93 1.93 0 0 1 9 11q-.825 0-1.412-.588A1.93 1.93 0 0 1 7 9q0-.825.588-1.412A1.93 1.93 0 0 1 9 7q.825 0 1.412.588Q11 8.175 11 9t-.588 1.412m.001 6.001A1.93 1.93 0 0 1 9 17q-.825 0-1.412-.587A1.93 1.93 0 0 1 7 15q0-.825.588-1.412A1.93 1.93 0 0 1 9 13q.825 0 1.412.588Q11 14.175 11 15q0 .824-.588 1.413m12.295-14.12a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L18 5.586l3.293-3.293a1 1 0 0 1 1.414 0"
-            />
-          </svg>
-          <span
-            class="mx_PollListItemEnded_question"
-          >
-            Question?
-          </span>
-          <span
-            class="mx_Caption"
-          >
-            02/02/23
-          </span>
-        </div>
-        <div
-          class="mx_PollListItemEnded_voteCount"
+          <path
+            d="M21 10.659V19q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3h8.341A6 6 0 0 0 13 5H5v14h14v-8a6 6 0 0 0 2-.341"
+          />
+          <path
+            d="M13.803 8a6 6 0 0 0 1.88 2H13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 9q0-.424.287-.713A.97.97 0 0 1 13 8zm2.91 7.713A.97.97 0 0 1 16 16h-3a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 15q0-.424.287-.713A.97.97 0 0 1 13 14h3q.424 0 .712.287.288.288.288.713 0 .424-.288.713m-6.299-5.3A1.93 1.93 0 0 1 9 11q-.825 0-1.412-.588A1.93 1.93 0 0 1 7 9q0-.825.588-1.412A1.93 1.93 0 0 1 9 7q.825 0 1.412.588Q11 8.175 11 9t-.588 1.412m.001 6.001A1.93 1.93 0 0 1 9 17q-.825 0-1.412-.587A1.93 1.93 0 0 1 7 15q0-.825.588-1.412A1.93 1.93 0 0 1 9 13q.825 0 1.412.588Q11 14.175 11 15q0 .824-.588 1.413m12.295-14.12a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L18 5.586l3.293-3.293a1 1 0 0 1 1.414 0"
+          />
+        </svg>
+        <span
+          class="mx_PollListItemEnded_question"
        >
-          <span
-            class="mx_Caption"
-          >
-            Final result based on 0 votes
-          </span>
-        </div>
+          Question?
+        </span>
+        <span
+          class="mx_Caption"
+        >
+          02/02/23
+        </span>
      </div>
-    </span>
+      <div
+        class="mx_PollListItemEnded_voteCount"
+      >
+        <span
+          class="mx_Caption"
+        >
+          Final result based on 0 votes
+        </span>
+      </div>
+    </div>
  </li>
 </div>
 `;
@@ -12,6 +12,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -12,6 +12,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -113,6 +114,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -12,6 +12,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -94,6 +95,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -322,6 +324,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -12,6 +12,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -314,6 +315,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -12,6 +12,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -58,6 +59,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
        >
          <span
+            aria-level="2"
            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
            role="heading"
          >
@@ -87,6 +89,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
        class="mx_BaseCard_header_title"
      >
        <p
+          aria-level="1"
          class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
          role="heading"
        >
@@ -133,6 +136,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
        >
          <span
+            aria-level="2"
            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
            role="heading"
          >
@@ -6,6 +6,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
    <div
      aria-label="@userId:matrix.org"
      aria-posinset="1"
+      aria-selected="false"
      aria-setsize="1"
      class="mx_AccessibleButton mx_MemberTileView"
      role="option"
@@ -84,6 +85,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
    <div
      aria-label="@userId:matrix.org"
      aria-posinset="1"
+      aria-selected="false"
      aria-setsize="1"
      class="mx_AccessibleButton mx_MemberTileView"
      role="option"
@@ -162,6 +164,7 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
    <div
      aria-label="@userId:matrix.org"
      aria-posinset="1"
+      aria-selected="false"
      aria-setsize="1"
      class="mx_AccessibleButton mx_MemberTileView"
      role="option"
@@ -222,6 +225,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
    <div
      aria-label="Foobar"
      aria-posinset="1"
+      aria-selected="false"
      aria-setsize="1"
      class="mx_AccessibleButton mx_MemberTileView"
      role="option"
@@ -4,7 +4,6 @@ exports[`<DeviceDetailHeading /> displays name edit form on rename button click
 {
  "container": <div>
    <form
-      aria-disabled="false"
      class="mx_DeviceDetailHeading_renameForm"
      method="post"
    >