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

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

@@ -22,6 +22,11 @@ limitations under the License.
 }
 
 .mx_SelectableDeviceTile_checkbox {
-    flex: 0 0;
+    flex: 1 0;
-    margin-right: $spacing-16;
+
+    .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,
+                    "onKeyDown": this.onKeyDown,
-                    role: "dialog",
+                    "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>
+            </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",

test/components/structures/__snapshots__/MessagePanel-test.tsx.snap

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

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

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

@@ -232,8 +232,7 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
                 class="mx_Checkbox_checkmark"
               />
             </div>
-          </label>
+            <div>
-        </span>
               <div
                 class="mx_DeviceTile"
                 data-testid="device-tile-device_2"
@@ -293,6 +292,9 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
                 </div>
               </div>
             </div>
+          </label>
+        </span>
+      </div>
     </div>
     <div
       class="mx_DevicesPanel_device"
@@ -318,8 +320,7 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
                 class="mx_Checkbox_checkmark"
               />
             </div>
-          </label>
+            <div>
-        </span>
               <div
                 class="mx_DeviceTile"
                 data-testid="device-tile-device_3"
@@ -379,6 +380,9 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
                 </div>
               </div>
             </div>
+          </label>
+        </span>
+      </div>
     </div>
     <div
       aria-disabled="true"

test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap

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

@@ -32,8 +32,7 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
             class="mx_Checkbox_checkmark"
           />
         </div>
-      </label>
+        <div>
-    </span>
           <div
             class="mx_DeviceTile mx_DeviceTile_interactive"
             data-testid="device-tile-my-device"
@@ -95,5 +94,8 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
             </div>
           </div>
         </div>
+      </label>
+    </span>
+  </div>
 </div>
 `;