Fix multiple accessibility defects identified by AXE (#10606)

* 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

Author: t3chguy

res/css/components/views/settings/devices/_SelectableDeviceTile.pcss

@@ -22,6 +22,11 @@ limitations under the License.
 }
 
 .mx_SelectableDeviceTile_checkbox {
-    flex: 0 0;
-    margin-right: $spacing-16;
+    flex: 1 0;
+
+    .mx_Checkbox_background + div {
+        flex: 1 0;
+        /* override more specific selector */
+        margin-left: $spacing-16 !important;
+    }
 }

src/components/views/elements/EffectsOverlay.tsx

@@ -90,6 +90,7 @@ const EffectsOverlay: FunctionComponent<IProps> = ({ roomWidth }) => {
                 top: 0,
                 right: 0,
             }}
+            aria-hidden={true}
         />
     );
 };

src/components/views/elements/ImageView.tsx

@@ -540,8 +540,9 @@ export default class ImageView extends React.Component<IProps, IState> {
             <FocusLock
                 returnFocus={true}
                 lockProps={{
-                    onKeyDown: this.onKeyDown,
-                    role: "dialog",
+                    "onKeyDown": this.onKeyDown,
+                    "role": "dialog",
+                    "aria-label": _t("Image view"),
                 }}
                 className="mx_ImageView"
                 ref={this.focusLock}

src/components/views/elements/SettingsFlag.tsx

@@ -62,7 +62,7 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
     }
 
     private getSettingValue(): boolean {
-        return SettingsStore.getValueAt(
+        return !!SettingsStore.getValueAt(
             this.props.level,
             this.props.name,
             this.props.roomId ?? null,

src/components/views/elements/Slider.tsx

@@ -35,6 +35,8 @@ interface IProps {
 
     // Whether the slider is disabled
     disabled: boolean;
+
+    label: string;
 }
 
 const THUMB_SIZE = 2.4; // em
@@ -77,6 +79,7 @@ export default class Slider extends React.Component<IProps> {
                     disabled={this.props.disabled}
                     step={this.props.step}
                     autoComplete="off"
+                    aria-label={this.props.label}
                 />
                 {selection}
             </div>

src/components/views/messages/DateSeparator.tsx

@@ -322,7 +322,7 @@ export default class DateSeparator extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const label = this.getLabel();
 
-        let dateHeaderContent;
+        let dateHeaderContent: JSX.Element;
         if (this.state.jumpToDateEnabled) {
             dateHeaderContent = this.renderJumpToDateMenu();
         } else {
@@ -336,9 +336,8 @@ export default class DateSeparator extends React.Component<IProps, IState> {
         }
 
         // ARIA treats <hr/>s as separators, here we abuse them slightly so manually treat this entire thing as one
-        // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
         return (
-            <div className="mx_DateSeparator" role="separator" tabIndex={-1} aria-label={label}>
+            <div className="mx_DateSeparator" role="separator" aria-label={label}>
                 <hr role="none" />
                 {dateHeaderContent}
                 <hr role="none" />

src/components/views/settings/FontScalingPanel.tsx

@@ -128,6 +128,7 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
                         onChange={this.onFontSizeChanged}
                         displayFunc={(_) => ""}
                         disabled={this.state.useCustomFontSize}
+                        label={_t("Font size")}
                     />
                     <div className="mx_FontScalingPanel_fontSlider_largeText">Aa</div>
                 </div>

src/components/views/settings/devices/SelectableDeviceTile.tsx

@@ -35,10 +35,11 @@ const SelectableDeviceTile: React.FC<Props> = ({ children, device, isSelected, o
                 className="mx_SelectableDeviceTile_checkbox"
                 id={`device-tile-checkbox-${device.device_id}`}
                 data-testid={`device-tile-checkbox-${device.device_id}`}
-            />
-            <DeviceTile device={device} onClick={onClick} isSelected={isSelected}>
-                {children}
-            </DeviceTile>
+            >
+                <DeviceTile device={device} onClick={onClick} isSelected={isSelected}>
+                    {children}
+                </DeviceTile>
+            </StyledCheckbox>
         </div>
     );
 };

src/components/views/settings/tabs/room/NotificationSettingsTab.tsx

@@ -284,6 +284,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                                     onClick={chromeFileInputFix}
                                     onChange={this.onSoundUploadChanged}
                                     accept="audio/*"
+                                    aria-label={_t("Upload custom sound")}
                                 />
                             </form>
 

src/i18n/strings/en_EN.json

@@ -1701,6 +1701,7 @@
     "Sounds": "Sounds",
     "Notification sound": "Notification sound",
     "Set a new custom sound": "Set a new custom sound",
+    "Upload custom sound": "Upload custom sound",
     "Browse": "Browse",
     "Failed to unban": "Failed to unban",
     "Unban": "Unban",
@@ -2600,6 +2601,7 @@
     "%(oneUser)ssent %(count)s hidden messages|one": "%(oneUser)ssent a hidden message",
     "collapse": "collapse",
     "expand": "expand",
+    "Image view": "Image view",
     "Rotate Left": "Rotate Left",
     "Rotate Right": "Rotate Right",
     "Information": "Information",