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
This commit is contained in:
Michael Telatynski
2026-04-07 15:17:59 +00:00
committed by GitHub
parent 7fd837e723
commit 6c1dc7051f
49 changed files with 334 additions and 259 deletions
@@ -9,11 +9,11 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Font size
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
@@ -9,11 +9,11 @@ exports[`<LayoutSwitcher /> should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Message layout
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -11,17 +11,17 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
<div
class="mx_SetIntegrationManager_heading_manager"
>
<h3
<h2
class="mx_Heading_h3"
>
Manage integrations
</h3>
<h4
</h2>
<h3
class="mx_Heading_h4"
id="mx_SetIntegrationManager_ManagerName"
>
(scalar.vector.im)
</h4>
</h3>
</div>
</div>
<div
@@ -9,11 +9,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -288,11 +288,11 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -567,11 +567,11 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -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"
>
@@ -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"
>
@@ -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"
@@ -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"
>
@@ -948,11 +948,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Email summary
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -998,11 +998,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Quick Actions
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -2174,11 +2174,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Email summary
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -2280,11 +2280,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Notification targets
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -2308,11 +2308,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Quick Actions
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -8,11 +8,11 @@ exports[`<SettingsSubsection /> renders with plain text description 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -42,11 +42,11 @@ exports[`<SettingsSubsection /> renders with plain text heading 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -67,11 +67,11 @@ exports[`<SettingsSubsection /> renders with react element description 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -127,11 +127,11 @@ exports[`<SettingsSubsection /> renders without description 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Test
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -6,11 +6,11 @@ exports[`<SettingsSubsectionHeading /> renders with children 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
test
</h3>
</h2>
<a
href="/#"
>
@@ -27,11 +27,11 @@ exports[`<SettingsSubsectionHeading /> renders without children 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
test
</h3>
</h2>
</div>
</div>,
}
@@ -22,11 +22,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Theme
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -152,11 +152,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Message layout
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -510,11 +510,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Font size
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
@@ -692,11 +692,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Image size in the timeline
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -20,11 +20,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Composer
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -381,11 +381,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Calls
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -442,11 +442,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Room
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -611,11 +611,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Room List
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -702,11 +702,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Accessibility
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -771,11 +771,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Navigation
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -1062,11 +1062,11 @@ exports[`KeyboardUserSettingsTab renders list of keyboard shortcuts 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Autocomplete
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -41,11 +41,11 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Personal ban list
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -97,11 +97,11 @@ exports[`<MjolnirUserSettingsTab /> renders correctly when user has no ignored u
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Subscribed lists
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -24,11 +24,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Language
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -77,11 +77,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Room list
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -129,11 +129,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Spaces
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -188,11 +188,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Keyboard shortcuts
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -260,11 +260,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Displaying time
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -421,11 +421,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Presence
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -523,11 +523,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Composer
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -784,11 +784,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Code blocks
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -902,11 +902,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Images, GIFs and videos
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -1020,11 +1020,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Timeline
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -1401,11 +1401,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Moderation and safety
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
@@ -1615,11 +1615,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Room directory
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -1668,11 +1668,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
General
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
@@ -44,17 +44,17 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
<div
class="mx_SetIntegrationManager_heading_manager"
>
<h3
<h2
class="mx_Heading_h3"
>
Manage integrations
</h3>
<h4
</h2>
<h3
class="mx_Heading_h4"
id="mx_SetIntegrationManager_ManagerName"
>
(scalar.vector.im)
</h4>
</h3>
</div>
</div>
<div
@@ -83,11 +83,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Current session
</h3>
</h2>
<div
aria-expanded="false"
aria-haspopup="true"
@@ -159,11 +159,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
class="mx_DeviceTile_info"
>
<h4
<h3
class="mx_Heading_h4"
>
Alices device
</h4>
</h3>
<div
class="mx_DeviceTile_metadata"
>
@@ -260,11 +260,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Current session
</h3>
</h2>
<div
aria-expanded="false"
aria-haspopup="true"
@@ -334,11 +334,11 @@ exports[`<SessionManagerTab /> current session section renders current session s
<div
class="mx_DeviceTile_info"
>
<h4
<h3
class="mx_Heading_h4"
>
Alices device
</h4>
</h3>
<div
class="mx_DeviceTile_metadata"
>
@@ -20,11 +20,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Spaces to show
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -310,11 +310,11 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Spaces to show
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -173,11 +173,11 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
<div
class="mx_SettingsSection"
>
<h2
class="mx_Heading_h3"
<h3
class="mx_Heading_h4"
>
Address
</h2>
</h3>
<div
class="mx_SettingsSection_subSections"
>