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

apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

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

apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

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

apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap

@@ -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>
 `;

apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap

@@ -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>
 `;

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap

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

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap

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

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap

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

apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

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

apps/web/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap

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

apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap

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

apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap

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