Skip to content

Commit 4a2a9ea

Browse files
committed
Restore Main navigation landmark and aria-labels for sidebar and SidePane
1 parent b5fc52e commit 4a2a9ea

11 files changed

Lines changed: 219 additions & 168 deletions

File tree

application/account/WebApp/shared/components/AccountSideMenu.tsx

Lines changed: 99 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -53,102 +53,112 @@ export function AccountSideMenu() {
5353

5454
return (
5555
<Sidebar collapsible="icon" mobileContent={<MobileMenu onNavigate={navigateToMain ?? undefined} />}>
56-
<SidebarHeader>
57-
<HeaderUserMenu />
58-
</SidebarHeader>
59-
<SidebarContent>
60-
<SidebarGroup>
61-
<SidebarGroupLabel>
62-
<Trans>User</Trans>
63-
</SidebarGroupLabel>
64-
<SidebarGroupContent>
65-
<SidebarMenu>
66-
<SidebarMenuItem>
67-
<SidebarMenuButton asChild={true} isActive={isActive("/user/profile")} tooltip={t`Profile`}>
68-
<RouterLink to="/user/profile">
69-
<UserIcon />
70-
<span>
71-
<Trans>Profile</Trans>
72-
</span>
73-
</RouterLink>
74-
</SidebarMenuButton>
75-
</SidebarMenuItem>
76-
<SidebarMenuItem>
77-
<SidebarMenuButton asChild={true} isActive={isActive("/user/preferences")} tooltip={t`Preferences`}>
78-
<RouterLink to="/user/preferences">
79-
<SlidersHorizontalIcon />
80-
<span>
81-
<Trans>Preferences</Trans>
82-
</span>
83-
</RouterLink>
84-
</SidebarMenuButton>
85-
</SidebarMenuItem>
86-
<SidebarMenuItem>
87-
<SidebarMenuButton asChild={true} isActive={isActive("/user/sessions")} tooltip={t`Sessions`}>
88-
<RouterLink to="/user/sessions">
89-
<MonitorSmartphoneIcon />
90-
<span>
91-
<Trans>Sessions</Trans>
92-
</span>
93-
</RouterLink>
94-
</SidebarMenuButton>
95-
</SidebarMenuItem>
96-
</SidebarMenu>
97-
</SidebarGroupContent>
98-
</SidebarGroup>
56+
<nav className="contents" aria-label={t`Main navigation`}>
57+
<SidebarHeader>
58+
<HeaderUserMenu />
59+
</SidebarHeader>
60+
<SidebarContent>
61+
<SidebarGroup>
62+
<SidebarGroupLabel>
63+
<Trans>User</Trans>
64+
</SidebarGroupLabel>
65+
<SidebarGroupContent>
66+
<SidebarMenu>
67+
<SidebarMenuItem>
68+
<SidebarMenuButton asChild={true} isActive={isActive("/user/profile")} tooltip={t`User profile`}>
69+
<RouterLink to="/user/profile" aria-label={t`User profile`}>
70+
<UserIcon />
71+
<span>
72+
<Trans>Profile</Trans>
73+
</span>
74+
</RouterLink>
75+
</SidebarMenuButton>
76+
</SidebarMenuItem>
77+
<SidebarMenuItem>
78+
<SidebarMenuButton
79+
asChild={true}
80+
isActive={isActive("/user/preferences")}
81+
tooltip={t`User preferences`}
82+
>
83+
<RouterLink to="/user/preferences" aria-label={t`User preferences`}>
84+
<SlidersHorizontalIcon />
85+
<span>
86+
<Trans>Preferences</Trans>
87+
</span>
88+
</RouterLink>
89+
</SidebarMenuButton>
90+
</SidebarMenuItem>
91+
<SidebarMenuItem>
92+
<SidebarMenuButton asChild={true} isActive={isActive("/user/sessions")} tooltip={t`User sessions`}>
93+
<RouterLink to="/user/sessions" aria-label={t`User sessions`}>
94+
<MonitorSmartphoneIcon />
95+
<span>
96+
<Trans>Sessions</Trans>
97+
</span>
98+
</RouterLink>
99+
</SidebarMenuButton>
100+
</SidebarMenuItem>
101+
</SidebarMenu>
102+
</SidebarGroupContent>
103+
</SidebarGroup>
99104

100-
<SidebarGroup>
101-
<SidebarGroupLabel>
102-
<Trans>Account</Trans>
103-
</SidebarGroupLabel>
104-
<SidebarGroupContent>
105-
<SidebarMenu>
106-
<SidebarMenuItem>
107-
<SidebarMenuButton asChild={true} isActive={isActive("/account")} tooltip={t`Overview`}>
108-
<RouterLink to="/account">
109-
<HomeIcon />
110-
<span>
111-
<Trans>Overview</Trans>
112-
</span>
113-
</RouterLink>
114-
</SidebarMenuButton>
115-
</SidebarMenuItem>
116-
<SidebarMenuItem>
117-
<SidebarMenuButton asChild={true} isActive={isActive("/account/settings")} tooltip={t`Settings`}>
118-
<RouterLink to="/account/settings">
119-
<Building2Icon />
120-
<span>
121-
<Trans>Settings</Trans>
122-
</span>
123-
</RouterLink>
124-
</SidebarMenuButton>
125-
</SidebarMenuItem>
126-
<SidebarMenuItem>
127-
<SidebarMenuButton asChild={true} isActive={isActive("/account/users", true)} tooltip={t`Users`}>
128-
<RouterLink to="/account/users">
129-
<UsersIcon />
130-
<span>
131-
<Trans>Users</Trans>
132-
</span>
133-
</RouterLink>
134-
</SidebarMenuButton>
135-
</SidebarMenuItem>
136-
{showBilling && (
105+
<SidebarGroup>
106+
<SidebarGroupLabel>
107+
<Trans>Account</Trans>
108+
</SidebarGroupLabel>
109+
<SidebarGroupContent>
110+
<SidebarMenu>
111+
<SidebarMenuItem>
112+
<SidebarMenuButton asChild={true} isActive={isActive("/account")} tooltip={t`Overview`}>
113+
<RouterLink to="/account">
114+
<HomeIcon />
115+
<span>
116+
<Trans>Overview</Trans>
117+
</span>
118+
</RouterLink>
119+
</SidebarMenuButton>
120+
</SidebarMenuItem>
121+
<SidebarMenuItem>
122+
<SidebarMenuButton asChild={true} isActive={isActive("/account/settings")} tooltip={t`Settings`}>
123+
<RouterLink to="/account/settings">
124+
<Building2Icon />
125+
<span>
126+
<Trans>Settings</Trans>
127+
</span>
128+
</RouterLink>
129+
</SidebarMenuButton>
130+
</SidebarMenuItem>
137131
<SidebarMenuItem>
138-
<SidebarMenuButton asChild={true} isActive={isActive("/account/billing", true)} tooltip={t`Billing`}>
139-
<RouterLink to="/account/billing">
140-
<CreditCardIcon />
132+
<SidebarMenuButton asChild={true} isActive={isActive("/account/users", true)} tooltip={t`Users`}>
133+
<RouterLink to="/account/users">
134+
<UsersIcon />
141135
<span>
142-
<Trans>Billing</Trans>
136+
<Trans>Users</Trans>
143137
</span>
144138
</RouterLink>
145139
</SidebarMenuButton>
146140
</SidebarMenuItem>
147-
)}
148-
</SidebarMenu>
149-
</SidebarGroupContent>
150-
</SidebarGroup>
151-
</SidebarContent>
141+
{showBilling && (
142+
<SidebarMenuItem>
143+
<SidebarMenuButton
144+
asChild={true}
145+
isActive={isActive("/account/billing", true)}
146+
tooltip={t`Billing`}
147+
>
148+
<RouterLink to="/account/billing">
149+
<CreditCardIcon />
150+
<span>
151+
<Trans>Billing</Trans>
152+
</span>
153+
</RouterLink>
154+
</SidebarMenuButton>
155+
</SidebarMenuItem>
156+
)}
157+
</SidebarMenu>
158+
</SidebarGroupContent>
159+
</SidebarGroup>
160+
</SidebarContent>
161+
</nav>
152162
<SidebarRail />
153163
</Sidebar>
154164
);

application/account/WebApp/shared/translations/locale/da-DK.po

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -816,6 +816,9 @@ msgstr "Logo"
816816
msgid "Main content"
817817
msgstr "Hovedindhold"
818818

819+
msgid "Main navigation"
820+
msgstr "Hovednavigation"
821+
819822
msgid "Manage subscription"
820823
msgstr "Administrer abonnement"
821824

@@ -858,8 +861,8 @@ msgstr "Microsoft opdaterer og sikrer automatisk al PaaS infrastruktur"
858861
msgid "Mobile"
859862
msgstr "Mobil"
860863

861-
msgid "Mobile navigation"
862-
msgstr "Mobilnavigation"
864+
msgid "Mobile navigation menu"
865+
msgstr "Mobilnavigationsmenu"
863866

864867
msgid "Modified date"
865868
msgstr "Ændret dato"
@@ -927,8 +930,8 @@ msgstr "Kun betroet personale får adgang til data gennem Azure AD autentificeri
927930
msgid "Open calendar"
928931
msgstr ""
929932

930-
msgid "Open menu"
931-
msgstr "Åbn menu"
933+
msgid "Open navigation menu"
934+
msgstr "Åbn navigationsmenu"
932935

933936
msgid "or"
934937
msgstr "eller"
@@ -1114,6 +1117,9 @@ msgstr "Fjern profilbillede"
11141117
msgid "Request a new code"
11151118
msgstr "Anmod om en ny kode"
11161119

1120+
msgid "Resize sidebar"
1121+
msgstr "Ændr bredde på sidepanel"
1122+
11171123
msgid "Restore"
11181124
msgstr "Gendan"
11191125

application/account/WebApp/shared/translations/locale/en-US.po

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -816,6 +816,9 @@ msgstr "Logo"
816816
msgid "Main content"
817817
msgstr "Main content"
818818

819+
msgid "Main navigation"
820+
msgstr "Main navigation"
821+
819822
msgid "Manage subscription"
820823
msgstr "Manage subscription"
821824

@@ -858,8 +861,8 @@ msgstr "Microsoft patches and secures all PaaS infrastructure automatically"
858861
msgid "Mobile"
859862
msgstr "Mobile"
860863

861-
msgid "Mobile navigation"
862-
msgstr "Mobile navigation"
864+
msgid "Mobile navigation menu"
865+
msgstr "Mobile navigation menu"
863866

864867
msgid "Modified date"
865868
msgstr "Modified date"
@@ -927,8 +930,8 @@ msgstr "Only trusted personnel access data through Azure AD authentication"
927930
msgid "Open calendar"
928931
msgstr "Open calendar"
929932

930-
msgid "Open menu"
931-
msgstr "Open menu"
933+
msgid "Open navigation menu"
934+
msgstr "Open navigation menu"
932935

933936
msgid "or"
934937
msgstr "or"
@@ -1114,6 +1117,9 @@ msgstr "Remove profile picture"
11141117
msgid "Request a new code"
11151118
msgstr "Request a new code"
11161119

1120+
msgid "Resize sidebar"
1121+
msgstr "Resize sidebar"
1122+
11171123
msgid "Restore"
11181124
msgstr "Restore"
11191125

application/back-office/WebApp/shared/components/BackOfficeSideMenu.tsx

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -25,33 +25,35 @@ export function BackOfficeSideMenu() {
2525

2626
return (
2727
<Sidebar collapsible="icon">
28-
<SidebarHeader>
29-
<div className="flex items-center gap-3 pl-[0.875rem] text-sm font-semibold">
30-
<img className="size-9 shrink-0" src={logoMark} alt={t`PlatformPlatform logo`} />
31-
<span className="truncate group-data-[collapsible=icon]:hidden">PlatformPlatform</span>
32-
</div>
33-
</SidebarHeader>
34-
<SidebarContent>
35-
<SidebarGroup>
36-
<SidebarGroupLabel>
37-
<Trans>Navigation</Trans>
38-
</SidebarGroupLabel>
39-
<SidebarGroupContent>
40-
<SidebarMenu>
41-
<SidebarMenuItem>
42-
<SidebarMenuButton asChild={true} isActive={currentPath === "/back-office"} tooltip={t`Dashboard`}>
43-
<RouterLink to="/back-office">
44-
<BoxIcon />
45-
<span>
46-
<Trans>Dashboard</Trans>
47-
</span>
48-
</RouterLink>
49-
</SidebarMenuButton>
50-
</SidebarMenuItem>
51-
</SidebarMenu>
52-
</SidebarGroupContent>
53-
</SidebarGroup>
54-
</SidebarContent>
28+
<nav className="contents" aria-label={t`Main navigation`}>
29+
<SidebarHeader>
30+
<div className="flex items-center gap-3 pl-[0.875rem] text-sm font-semibold">
31+
<img className="size-9 shrink-0" src={logoMark} alt={t`PlatformPlatform logo`} />
32+
<span className="truncate group-data-[collapsible=icon]:hidden">PlatformPlatform</span>
33+
</div>
34+
</SidebarHeader>
35+
<SidebarContent>
36+
<SidebarGroup>
37+
<SidebarGroupLabel>
38+
<Trans>Navigation</Trans>
39+
</SidebarGroupLabel>
40+
<SidebarGroupContent>
41+
<SidebarMenu>
42+
<SidebarMenuItem>
43+
<SidebarMenuButton asChild={true} isActive={currentPath === "/back-office"} tooltip={t`Dashboard`}>
44+
<RouterLink to="/back-office">
45+
<BoxIcon />
46+
<span>
47+
<Trans>Dashboard</Trans>
48+
</span>
49+
</RouterLink>
50+
</SidebarMenuButton>
51+
</SidebarMenuItem>
52+
</SidebarMenu>
53+
</SidebarGroupContent>
54+
</SidebarGroup>
55+
</SidebarContent>
56+
</nav>
5557
<SidebarRail />
5658
</Sidebar>
5759
);

application/back-office/WebApp/shared/translations/locale/da-DK.po

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,14 @@ msgstr "Log ud"
8686
msgid "Main content"
8787
msgstr "Hovedindhold"
8888

89+
msgid "Main navigation"
90+
msgstr "Hovednavigation"
91+
8992
msgid "Manage tenants, view system data, see exceptions, and perform various tasks for operational and support teams."
9093
msgstr "Administrer lejere, se systemdata, se undtagelser og udfør forskellige opgaver for drifts- og supportteams."
9194

92-
msgid "Mobile navigation"
93-
msgstr "Mobilnavigation"
95+
msgid "Mobile navigation menu"
96+
msgstr "Mobilnavigationsmenu"
9497

9598
msgid "More pages"
9699
msgstr "Flere sider"
@@ -107,8 +110,8 @@ msgstr "Ingen resultater fundet"
107110
msgid "Open calendar"
108111
msgstr ""
109112

110-
msgid "Open menu"
111-
msgstr "Åbn menu"
113+
msgid "Open navigation menu"
114+
msgstr "Åbn navigationsmenu"
112115

113116
msgid "Page not found"
114117
msgstr "Siden blev ikke fundet"
@@ -128,6 +131,9 @@ msgstr "Prøv venligst igen eller vend tilbage til forsiden."
128131
msgid "Previous"
129132
msgstr "Forrige"
130133

134+
msgid "Resize sidebar"
135+
msgstr "Ændr bredde på sidepanel"
136+
131137
msgid "Select dates"
132138
msgstr "Vælg datoer"
133139

0 commit comments

Comments
 (0)