Accessibility improvements in settings (#32968)

* Add more playwright axe tests to settings dialogs

* Fix axe issue heading-order

* Fix heading order

* Iterate

* Update snapshots

* Iterate

* Update snapshots

* Iterate

* Update screenshot

* Iterate

* Iterate

* Update snapshot

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

@@ -137,11 +137,11 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Current session
-      </h3>
+      </h2>
       <div
         aria-disabled="true"
         aria-expanded="false"
@@ -183,11 +183,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Current session
-      </h3>
+      </h2>
       <div
         aria-expanded="false"
         aria-haspopup="true"
@@ -257,11 +257,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         <div
           class="mx_DeviceTile_info"
         >
-          <h4
+          <h3
             class="mx_Heading_h4"
           >
             alices_device
-          </h4>
+          </h3>
           <div
             class="mx_DeviceTile_metadata"
           >
@@ -370,11 +370,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Current session
-      </h3>
+      </h2>
       <div
         aria-expanded="false"
         aria-haspopup="true"
@@ -444,11 +444,11 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         <div
           class="mx_DeviceTile_info"
         >
-          <h4
+          <h3
             class="mx_Heading_h4"
           >
             alices_device
-          </h4>
+          </h3>
           <div
             class="mx_DeviceTile_metadata"
           >

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

@@ -45,11 +45,11 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         123
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >
@@ -118,11 +118,11 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         123
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >
@@ -191,11 +191,11 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         My device
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >
@@ -264,11 +264,11 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
     <div
       class="mx_DeviceTile_info"
     >
-      <h4
+      <h3
         class="mx_Heading_h4"
       >
         123
-      </h4>
+      </h3>
       <div
         class="mx_DeviceTile_metadata"
       >

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

@@ -9,11 +9,11 @@ exports[`<SecurityRecommendations /> renders both cards when user has both unver
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Security recommendations
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"
@@ -141,11 +141,11 @@ exports[`<SecurityRecommendations /> renders inactive devices section when user
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Security recommendations
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"
@@ -273,11 +273,11 @@ exports[`<SecurityRecommendations /> renders unverified devices section when use
     <div
       class="mx_SettingsSubsectionHeading"
     >
-      <h3
+      <h2
         class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Security recommendations
-      </h3>
+      </h2>
     </div>
     <div
       class="mx_SettingsSubsection_description"

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

@@ -101,11 +101,11 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
               <div
                 class="mx_DeviceTile_info"
               >
-                <h4
+                <h3
                   class="mx_Heading_h4"
                 >
                   My Device
-                </h4>
+                </h3>
                 <div
                   class="mx_DeviceTile_metadata"
                 >