sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Fix multiple accessibility defects identified by AXE (#10606)

Browse Source 
* Mark effects overlay canvas as aria hidden

* Ensure date separators aren't seen as focusable aria separators

* Fix

* Fix font slider not having aria label

* Add missing aria labels

* Fix settings flags setting aria-checked={null}

* Update snapshots
This commit is contained in:
Michael Telatynski
2023-04-17 16:09:45 +00:00
committed by GitHub
parent 270a26d89a
commit 1a0e5c1805
17 changed files with 210 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/components/structures/__snapshots__/MessagePanel-test.tsx.snap
-1
View File
@@ -42,7 +42,6 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
aria-label="Thu, Jan 1 1970"
class="mx_DateSeparator"
role="separator"
tabindex="-1"
>
<hr
role="none"
test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
-2
View File
@@ -48,7 +48,6 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
aria-label="Thu, Jan 1 1970"
class="mx_DateSeparator"
role="separator"
tabindex="-1"
>
<hr
role="none"
@@ -165,7 +164,6 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
aria-label=", NaN NaN"
class="mx_DateSeparator"
role="separator"
tabindex="-1"
>
<hr
role="none"
test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
-2
View File
@@ -6,7 +6,6 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
aria-label="Today"
class="mx_DateSeparator"
role="separator"
tabindex="-1"
>
<hr
role="none"
@@ -34,7 +33,6 @@ exports[`DateSeparator when feature_jump_to_date is enabled renders the date sep
aria-label="Fri, Dec 17 2021"
class="mx_DateSeparator"
role="separator"
tabindex="-1"
>
<hr
role="none"
test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
+120 -116
View File
@@ -232,66 +232,68 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
class="mx_Checkbox_checkmark"
/>
</div>
<div>
<div
class="mx_DeviceTile"
data-testid="device-tile-device_2"
>
<div
class="mx_DeviceTypeIcon"
>
<div
class="mx_DeviceTypeIcon_deviceIconWrapper"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
device_2
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-deviceId"
>
device_2
</span>
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
Rename
</div>
</div>
</div>
</div>
</label>
</span>
<div
class="mx_DeviceTile"
data-testid="device-tile-device_2"
>
<div
class="mx_DeviceTypeIcon"
>
<div
class="mx_DeviceTypeIcon_deviceIconWrapper"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
device_2
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-deviceId"
>
device_2
</span>
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
Rename
</div>
</div>
</div>
</div>
</div>
<div
@@ -318,66 +320,68 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
class="mx_Checkbox_checkmark"
/>
</div>
<div>
<div
class="mx_DeviceTile"
data-testid="device-tile-device_3"
>
<div
class="mx_DeviceTypeIcon"
>
<div
class="mx_DeviceTypeIcon_deviceIconWrapper"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
device_3
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-deviceId"
>
device_3
</span>
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
Rename
</div>
</div>
</div>
</div>
</label>
</span>
<div
class="mx_DeviceTile"
data-testid="device-tile-device_3"
>
<div
class="mx_DeviceTypeIcon"
>
<div
class="mx_DeviceTypeIcon_deviceIconWrapper"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
device_3
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-deviceId"
>
device_3
</span>
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
Rename
</div>
</div>
</div>
</div>
</div>
<div
test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
+1
View File
@@ -37,6 +37,7 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
class="mx_Slider"
>
<input
aria-label="Font size"
autocomplete="off"
max="18"
min="13"
test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+62 -60
View File
@@ -32,68 +32,70 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
class="mx_Checkbox_checkmark"
/>
</div>
<div>
<div
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-my-device"
>
<div
class="mx_DeviceTypeIcon"
>
<div
class="mx_DeviceTypeIcon_deviceIconWrapper"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
My Device
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-lastSeenIp"
>
123.456.789
</span>
·
<span
data-testid="device-metadata-deviceId"
>
my-device
</span>
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div>
test
</div>
</div>
</div>
</div>
</label>
</span>
<div
class="mx_DeviceTile mx_DeviceTile_interactive"
data-testid="device-tile-my-device"
>
<div
class="mx_DeviceTypeIcon"
>
<div
class="mx_DeviceTypeIcon_deviceIconWrapper"
>
<div
aria-label="Unknown session type"
class="mx_DeviceTypeIcon_deviceIcon"
role="img"
/>
</div>
<div
aria-label="Unverified"
class="mx_DeviceTypeIcon_verificationIcon unverified"
role="img"
/>
</div>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
My Device
</h4>
<div
class="mx_DeviceTile_metadata"
>
<span
data-testid="device-metadata-isVerified"
>
Unverified
</span>
·
<span
data-testid="device-metadata-lastSeenIp"
>
123.456.789
</span>
·
<span
data-testid="device-metadata-deviceId"
>
my-device
</span>
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div>
test
</div>
</div>
</div>
</div>
</div>
`;
test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+1 -1
View File
File diff suppressed because one or more lines are too long