Use semantic list elements for menu lists and tab lists (#10902)

* Use semantic list elements for pop up menu lists

* Use semantic list elements for tab lists

* Fix tests

* Update snapshot
This commit is contained in:
Michael Telatynski 2023-05-15 14:33:49 +01:00 committed by GitHub
parent 8b7eb8bb1d
commit 296ed2273e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 92 additions and 82 deletions

View file

@ -2,7 +2,7 @@
exports[`<RoomSettingsDialog /> Settings tabs renders default tabs correctly 1`] = `
NodeList [
<div
<li
aria-controls="mx_tabpanel_ROOM_GENERAL_TAB"
aria-selected="true"
class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
@ -19,8 +19,8 @@ NodeList [
>
General
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_ROOM_SECURITY_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -37,8 +37,8 @@ NodeList [
>
Security & Privacy
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_ROOM_ROLES_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -55,8 +55,8 @@ NodeList [
>
Roles & Permissions
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_ROOM_NOTIFICATIONS_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -73,8 +73,8 @@ NodeList [
>
Notifications
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_ROOM_POLL_HISTORY_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -91,7 +91,7 @@ NodeList [
>
Poll history
</span>
</div>,
</li>,
]
`;

View file

@ -2,7 +2,7 @@
exports[`<UserSettingsDialog /> renders tabs correctly 1`] = `
NodeList [
<div
<li
aria-controls="mx_tabpanel_USER_GENERAL_TAB"
aria-selected="true"
class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
@ -19,8 +19,8 @@ NodeList [
>
General
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -37,8 +37,8 @@ NodeList [
>
Appearance
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_NOTIFICATIONS_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -55,8 +55,8 @@ NodeList [
>
Notifications
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_PREFERENCES_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -73,8 +73,8 @@ NodeList [
>
Preferences
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_KEYBOARD_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -91,8 +91,8 @@ NodeList [
>
Keyboard
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_SIDEBAR_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -109,8 +109,8 @@ NodeList [
>
Sidebar
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_SECURITY_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -127,8 +127,8 @@ NodeList [
>
Security & Privacy
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_LABS_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -145,8 +145,8 @@ NodeList [
>
Labs
</span>
</div>,
<div
</li>,
<li
aria-controls="mx_tabpanel_USER_HELP_TAB"
aria-selected="false"
class="mx_AccessibleButton mx_TabbedView_tabLabel"
@ -163,6 +163,6 @@ NodeList [
>
Help & About
</span>
</div>,
</li>,
]
`;