ARIA Accessibility improvements (#10674)

* Add missing aria-expanded attributes

* Improve autoComplete for phone numbers & email addresses

* Fix room summary card heading order

* Fix missing label on timeline search field

* Use appropriate semantic elements for dropdown listbox

* Use semantic list elements in keyboard settings tab

* Use semantic list elements in spotlight

* Fix types and i18n

* Improve types

* Update tests

* Add snapshot test

src/components/views/settings/account/EmailAddresses.tsx

@@ -280,7 +280,7 @@ export default class EmailAddresses extends React.Component<IProps, IState> {
                     <Field
                         type="text"
                         label={_t("Email Address")}
-                        autoComplete="off"
+                        autoComplete="email"
                         disabled={this.state.verifying}
                         value={this.state.newEmailAddress}
                         onChange={this.onChangeNewEmailAddress}

src/components/views/settings/account/PhoneNumbers.tsx

@@ -310,7 +310,7 @@ export default class PhoneNumbers extends React.Component<IProps, IState> {
                         <Field
                             type="text"
                             label={_t("Phone Number")}
-                            autoComplete="off"
+                            autoComplete="tel-national"
                             disabled={this.state.verifying}
                             prefixComponent={phoneCountry}
                             value={this.state.newPhoneNumber}

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

@@ -443,6 +443,7 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
                         onClick={this.toggleAdvancedSection}
                         kind="link"
                         className="mx_SettingsTab_showAdvanced"
+                        aria-expanded={this.state.showAdvancedSection}
                     >
                         {this.state.showAdvancedSection ? _t("Hide advanced") : _t("Show advanced")}
                     </AccessibleButton>

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -88,7 +88,11 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
         const brand = SdkConfig.get().brand;
         const toggle = (
-            <AccessibleButton kind="link" onClick={() => this.setState({ showAdvanced: !this.state.showAdvanced })}>
+            <AccessibleButton
+                kind="link"
+                onClick={() => this.setState({ showAdvanced: !this.state.showAdvanced })}
+                aria-expanded={this.state.showAdvanced}
+            >
                 {this.state.showAdvanced ? _t("Hide advanced") : _t("Show advanced")}
             </AccessibleButton>
         );

src/components/views/settings/tabs/user/KeyboardUserSettingsTab.tsx

@@ -41,10 +41,10 @@ const KeyboardShortcutRow: React.FC<IKeyboardShortcutRowProps> = ({ name }) => {
     if (!displayName || !value) return null;
 
     return (
-        <div className="mx_KeyboardShortcut_shortcutRow">
+        <li className="mx_KeyboardShortcut_shortcutRow">
             {displayName}
             <KeyboardShortcut value={value} />
-        </div>
+        </li>
     );
 };
 
@@ -59,12 +59,12 @@ const KeyboardShortcutSection: React.FC<IKeyboardShortcutSectionProps> = ({ cate
     return (
         <div className="mx_SettingsTab_section" key={categoryName}>
             <div className="mx_SettingsTab_subheading">{_t(category.categoryLabel)}</div>
-            <div>
+            <ul>
                 {" "}
                 {category.settingNames.map((shortcutName) => {
                     return <KeyboardShortcutRow key={shortcutName} name={shortcutName} />;
                 })}{" "}
-            </div>
+            </ul>
         </div>
     );
 };