Skip to content

Commit 2cc68c9

Browse files
xidedixxidedix
committed
fix: add missing aria labels etc
1 parent 8c4cf26 commit 2cc68c9

File tree

4 files changed

+49
-38
lines changed

4 files changed

+49
-38
lines changed

‎src/app/layout/default-layout/default-header/default-header.component.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
class="btn"
88
toggle="visible"
99
style="margin-inline-start: -14px;"
10+
aria-label="Toggle sidebar navigation"
1011
>
1112
<svg cIcon name="cilMenu" size="lg"></svg>
1213
</button>
@@ -57,13 +58,14 @@
5758

5859
<ng-template #userDropdown>
5960
<c-dropdown [popperOptions]="{ placement: 'bottom-start' }" variant="nav-item">
60-
<button [caret]="false" cDropdownToggle class="py-0 pe-0">
61+
<button [caret]="false" cDropdownToggle class="py-0 pe-0" aria-label="Open user menu">
6162
<c-avatar
6263
shape="rounded-1"
6364
[size]="'md'"
6465
src="./assets/images/avatars/8.jpg"
6566
status="success"
6667
textColor="primary"
68+
alt="User avatar"
6769
/>
6870
</button>
6971
<ul cDropdownMenu class="pt-0 w-auto">
@@ -159,7 +161,7 @@ <h6 cDropdownHeader class="bg-body-secondary text-body-secondary fw-semibold py-
159161

160162
<ng-template #themeDropdown>
161163
<c-dropdown alignment="end" variant="nav-item">
162-
<button [caret]="false" cDropdownToggle>
164+
<button [caret]="false" cDropdownToggle aria-label="Open theme picker">
163165
<svg cIcon [name]="icons()" size="lg"></svg>
164166
</button>
165167
<div cDropdownMenu>

‎src/app/layout/default-layout/default-layout.component.html

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,20 @@
1818
</ng-scrollbar>
1919
@if (!sidebar1.narrow) {
2020
<c-sidebar-footer cSidebarToggle="sidebar1" class="border-top d-none d-lg-flex" toggle="unfoldable" style="cursor: pointer;">
21-
<button cSidebarToggler></button>
21+
<button cSidebarToggler aria-label="Toggle sidebar fold"></button>
2222
</c-sidebar-footer>
2323
}
2424
</c-sidebar>
2525

2626
<!--main-->
2727
<div class="wrapper d-flex flex-column min-vh-100">
2828
<!--app-header-->
29-
<app-default-header [cShadowOnScroll]="'sm'"
30-
class="mb-4 d-print-none header header-sticky p-0 shadow-sm"
31-
position="sticky"
32-
sidebarId="sidebar1" />
29+
<app-default-header
30+
[cShadowOnScroll]="'sm'"
31+
class="mb-4 d-print-none header header-sticky p-0 shadow-sm"
32+
position="sticky"
33+
sidebarId="sidebar1"
34+
/>
3335
<!--app-body-->
3436
<div class="body flex-grow-1">
3537
<c-container breakpoint="lg" class="h-auto px-4">

‎src/app/views/dashboard/dashboard.component.html

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
77
<div class="small text-body-secondary">January - December 2023</div>
88
</c-col>
99
<c-col class="d-none d-md-block" sm="7">
10-
<button cButton class="float-end" color="primary">
10+
<button cButton class="float-end" color="primary" aria-label="Download">
1111
<svg cIcon name="cilCloudDownload"></svg>
1212
</button>
1313
<form [formGroup]="trafficRadioGroup">
@@ -17,13 +17,15 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
1717
formControlName="trafficRadio"
1818
type="radio"
1919
value="Day"
20+
id="dayRadio"
2021
/>
2122
<label
2223
(click)="setTrafficPeriod('Day')"
2324
cButton
2425
cFormCheckLabel
2526
color="secondary"
2627
variant="outline"
28+
for="dayRadio"
2729
>
2830
Day
2931
</label>
@@ -32,13 +34,15 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
3234
formControlName="trafficRadio"
3335
type="radio"
3436
value="Month"
37+
id="radioMonth"
3538
/>
3639
<label
3740
(click)="setTrafficPeriod('Month')"
3841
cButton
3942
cFormCheckLabel
4043
color="secondary"
4144
variant="outline"
45+
for="radioMonth"
4246
>
4347
Month
4448
</label>
@@ -47,13 +51,15 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
4751
formControlName="trafficRadio"
4852
type="radio"
4953
value="Year"
54+
id="radioYear"
5055
/>
5156
<label
5257
(click)="setTrafficPeriod('Year')"
5358
cButton
5459
cFormCheckLabel
5560
color="secondary"
5661
variant="outline"
62+
for="radioYear"
5763
>
5864
Year
5965
</label>
@@ -77,27 +83,27 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
7783
<c-col>
7884
<div class="text-body-secondary">Visits</div>
7985
<strong>29.703 Users (40%)</strong>
80-
<c-progress class="mt-2" thin color="success" value="40" />
86+
<c-progress class="mt-2" thin color="success" value="40" aria-label="User visits" />
8187
</c-col>
8288
<c-col>
8389
<div class="text-body-secondary">Unique</div>
8490
<div class="fw-semibold text-truncate">24.093 Users (20%)</div>
85-
<c-progress class="mt-2" thin color="info" value="20" />
91+
<c-progress class="mt-2" thin color="info" value="20" aria-label="Unique users" />
8692
</c-col>
8793
<c-col>
8894
<div class="text-body-secondary">Page views</div>
8995
<div class="fw-semibold text-truncate">78.706 Views (60%)</div>
90-
<c-progress class="mt-2" thin color="warning" value="60" />
96+
<c-progress class="mt-2" thin color="warning" value="60" aria-label="Page views" />
9197
</c-col>
9298
<c-col>
9399
<div class="text-body-secondary">New Users</div>
94100
<div class="fw-semibold text-truncate">22.123 Users (80%)</div>
95-
<c-progress class="mt-2" thin color="danger" value="80" />
101+
<c-progress class="mt-2" thin color="danger" value="80" aria-label="New users" />
96102
</c-col>
97103
<c-col class="d-none d-xl-block">
98104
<div class="text-body-secondary">Bounce Rate</div>
99105
<div class="fw-semibold text-truncate">Average Rate (40.15%)</div>
100-
<c-progress class="mt-2" thin value="40" />
106+
<c-progress class="mt-2" thin value="40" aria-label="Bounce rate" />
101107
</c-col>
102108
</c-row>
103109
</c-card-footer>
@@ -134,62 +140,62 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
134140
<span class="text-body-secondary small">Monday</span>
135141
</div>
136142
<div class="progress-group-bars">
137-
<c-progress thin color="info" value="34" />
138-
<c-progress thin color="danger" value="78" />
143+
<c-progress thin color="info" value="34" aria-label="Monday new clients" />
144+
<c-progress thin color="danger" value="78" aria-label="Monday recurring clients" />
139145
</div>
140146
</div>
141147
<div class="progress-group mb-4">
142148
<div class="progress-group-prepend">
143149
<span class="text-body-secondary small">Tuesday</span>
144150
</div>
145151
<div class="progress-group-bars">
146-
<c-progress thin color="info" value="56" />
147-
<c-progress thin color="danger" value="94" />
152+
<c-progress thin color="info" value="56" aria-label="Tuesday new clients" />
153+
<c-progress thin color="danger" value="94" aria-label="Tuesday recurring clients" />
148154
</div>
149155
</div>
150156
<div class="progress-group mb-4">
151157
<div class="progress-group-prepend">
152158
<span class="text-body-secondary small">Wednesday</span>
153159
</div>
154160
<div class="progress-group-bars">
155-
<c-progress thin color="info" value="12" />
156-
<c-progress thin color="danger" value="67" />
161+
<c-progress thin color="info" value="12" aria-label="Wednesday new clients" />
162+
<c-progress thin color="danger" value="67" aria-label="Wednesday recurring clients" />
157163
</div>
158164
</div>
159165
<div class="progress-group mb-4">
160166
<div class="progress-group-prepend">
161167
<span class="text-body-secondary small">Thursday</span>
162168
</div>
163169
<div class="progress-group-bars">
164-
<c-progress thin color="info" value="43" />
165-
<c-progress thin color="danger" value="91" />
170+
<c-progress thin color="info" value="43" aria-label="Thursday new clients" />
171+
<c-progress thin color="danger" value="91" aria-label="Thursday recurring clients" />
166172
</div>
167173
</div>
168174
<div class="progress-group mb-4">
169175
<div class="progress-group-prepend">
170176
<span class="text-body-secondary small">Friday</span>
171177
</div>
172178
<div class="progress-group-bars">
173-
<c-progress thin color="info" value="22" />
174-
<c-progress thin color="danger" value="73" />
179+
<c-progress thin color="info" value="22" aria-label="Friday new clients" />
180+
<c-progress thin color="danger" value="73" aria-label="Friday recurring clients" />
175181
</div>
176182
</div>
177183
<div class="progress-group mb-4">
178184
<div class="progress-group-prepend">
179185
<span class="text-body-secondary small">Saturday</span>
180186
</div>
181187
<div class="progress-group-bars">
182-
<c-progress thin color="info" value="53" />
183-
<c-progress thin color="danger" value="82" />
188+
<c-progress thin color="info" value="53" aria-label="Saturday new clients" />
189+
<c-progress thin color="danger" value="82" aria-label="Saturday recurring clients" />
184190
</div>
185191
</div>
186192
<div class="progress-group mb-4">
187193
<div class="progress-group-prepend">
188194
<span class="text-body-secondary small">Sunday</span>
189195
</div>
190196
<div class="progress-group-bars">
191-
<c-progress thin color="info" value="9" />
192-
<c-progress thin color="danger" value="69" />
197+
<c-progress thin color="info" value="9" aria-label="Sunday new clients" />
198+
<c-progress thin color="danger" value="69" aria-label="Sunday recurring clients" />
193199
</div>
194200
</div>
195201
<div class="legend text-center d-none d-md-block" ngPreserveWhitespaces>
@@ -232,7 +238,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
232238
<span class="ms-auto font-semibold">43%</span>
233239
</div>
234240
<div class="progress-group-bars">
235-
<c-progress thin color="warning" value="43" />
241+
<c-progress thin color="warning" value="43" aria-label="Male users" />
236242
</div>
237243
</div>
238244
<div class="progress-group mb-5">
@@ -242,7 +248,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
242248
<span class="ms-auto font-semibold">37%</span>
243249
</div>
244250
<div class="progress-group-bars">
245-
<c-progress thin color="warning" value="37" />
251+
<c-progress thin color="warning" value="37" aria-label="Feale users" />
246252
</div>
247253
</div>
248254

@@ -255,7 +261,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
255261
</span>
256262
</div>
257263
<div class="progress-group-bars">
258-
<c-progress thin color="success" value="56" />
264+
<c-progress thin color="success" value="56" aria-label="Organic search" />
259265
</div>
260266
</div>
261267
<div class="progress-group">
@@ -267,7 +273,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
267273
</span>
268274
</div>
269275
<div class="progress-group-bars">
270-
<c-progress thin color="success" value="15" />
276+
<c-progress thin color="success" value="15" aria-label="Facebook" />
271277
</div>
272278
</div>
273279
<div class="progress-group">
@@ -279,7 +285,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
279285
</span>
280286
</div>
281287
<div class="progress-group-bars">
282-
<c-progress thin color="success" value="11" />
288+
<c-progress thin color="success" value="11" aria-label="Twitter" />
283289
</div>
284290
</div>
285291
<div class="progress-group">
@@ -291,7 +297,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
291297
</span>
292298
</div>
293299
<div class="progress-group-bars">
294-
<c-progress thin color="success" value="8" />
300+
<c-progress thin color="success" value="8" aria-label="LinkedIn" />
295301
</div>
296302
</div>
297303
<div class="divider d-flex justify-content-center">
@@ -301,6 +307,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
301307
color="transparent"
302308
size="sm"
303309
type="button"
310+
aria-label="Options"
304311
>
305312
<svg cIcon name="cil-options"></svg>
306313
</button>
@@ -369,7 +376,7 @@ <h4 class="card-title mb-0" id="traffic">Traffic</h4>
369376
</small>
370377
</div>
371378
</div>
372-
<c-progress thin [value]="user.usage" color="{{ user.color }}" />
379+
<c-progress thin [value]="user.usage" color="{{ user.color }}" aria-label="Usage" />
373380
</td>
374381
<td class="text-center">
375382
<svg cIcon name="cibCc{{ user.payment }}" size="xl"></svg>

‎src/app/views/widgets/widgets-dropdown/widgets-dropdown.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</ng-template>
1313
<ng-template cTemplateId="widgetActionTemplate">
1414
<c-dropdown alignment="end" variant="btn-group">
15-
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent">
15+
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent" aria-label="Open dropdown">
1616
<svg cIcon name="cilOptions"></svg>
1717
</button>
1818
<ul cDropdownMenu>
@@ -46,7 +46,7 @@
4646
</ng-template>
4747
<ng-template cTemplateId="widgetActionTemplate">
4848
<c-dropdown alignment="end" variant="btn-group">
49-
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent">
49+
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent" aria-label="Open dropdown">
5050
<svg cIcon name="cilOptions"></svg>
5151
</button>
5252
<ul cDropdownMenu>
@@ -75,7 +75,7 @@
7575
</ng-template>
7676
<ng-template cTemplateId="widgetActionTemplate">
7777
<c-dropdown alignment="end" variant="btn-group">
78-
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent">
78+
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent" aria-label="Open dropdown">
7979
<svg cIcon name="cilOptions"></svg>
8080
</button>
8181
<ul cDropdownMenu>
@@ -104,7 +104,7 @@
104104
</ng-template>
105105
<ng-template cTemplateId="widgetActionTemplate">
106106
<c-dropdown alignment="end" variant="btn-group">
107-
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent">
107+
<button [caret]="false" cButton cDropdownToggle class="p-0 text-white" color="transparent" aria-label="Open dropdown">
108108
<svg cIcon name="cilOptions"></svg>
109109
</button>
110110
<ul cDropdownMenu>

0 commit comments

Comments
 (0)