Skip to content

Commit 1e65b38

Browse files
isoosisoos
authored
Fix ARIA attributes for x-ago texts. (#8480)
1 parent 5027967 commit 1e65b38

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+89
-86
lines changed

‎app/lib/frontend/dom/dom.dart‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,11 @@ Node xAgoTimestamp(DateTime timestamp, {String? datePrefix}) {
109109
href: '',
110110
title: title,
111111
attributes: {
112-
'aria-label': text,
113-
'aria-role': 'button',
112+
// Note: We change the `text` and the `title` when the user clicks this button.
113+
// We do not use `aria-label`, so that the screenreader will read the
114+
// appropriate change.
115+
// We do not use `aria-pressed`, so that the screenreader will not read
116+
// "toggle button pressed" as part of the text.
114117
'role': 'button',
115118
'data-timestamp': timestamp.millisecondsSinceEpoch.toString(),
116119
},

‎app/test/frontend/golden/my_activity_log_page.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ <h1 class="title">admin</h1>
146146
<p>[email protected]</p>
147147
<p>
148148
Joined
149-
<a class="-x-ago" href="" title="on %%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
149+
<a class="-x-ago" href="" title="on %%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
150150
</p>
151151
</div>
152152
</div>
@@ -185,7 +185,7 @@ <h1 class="title">admin</h1>
185185
<tbody>
186186
<tr>
187187
<td class="date">
188-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
188+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
189189
</td>
190190
<td class="summary">
191191
<div class="markdown-body">
@@ -203,7 +203,7 @@ <h1 class="title">admin</h1>
203203
</tr>
204204
<tr>
205205
<td class="date">
206-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
206+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
207207
</td>
208208
<td class="summary">
209209
<div class="markdown-body">
@@ -221,7 +221,7 @@ <h1 class="title">admin</h1>
221221
</tr>
222222
<tr>
223223
<td class="date">
224-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
224+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
225225
</td>
226226
<td class="summary">
227227
<div class="markdown-body">
@@ -239,7 +239,7 @@ <h1 class="title">admin</h1>
239239
</tr>
240240
<tr>
241241
<td class="date">
242-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
242+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
243243
</td>
244244
<td class="summary">
245245
<div class="markdown-body">
@@ -255,7 +255,7 @@ <h1 class="title">admin</h1>
255255
</tr>
256256
<tr>
257257
<td class="date">
258-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
258+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
259259
</td>
260260
<td class="summary">
261261
<div class="markdown-body">
@@ -273,7 +273,7 @@ <h1 class="title">admin</h1>
273273
</tr>
274274
<tr>
275275
<td class="date">
276-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
276+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
277277
</td>
278278
<td class="summary">
279279
<div class="markdown-body">
@@ -291,7 +291,7 @@ <h1 class="title">admin</h1>
291291
</tr>
292292
<tr>
293293
<td class="date">
294-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
294+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
295295
</td>
296296
<td class="summary">
297297
<div class="markdown-body">
@@ -307,7 +307,7 @@ <h1 class="title">admin</h1>
307307
</tr>
308308
<tr>
309309
<td class="date">
310-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
310+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
311311
</td>
312312
<td class="summary">
313313
<div class="markdown-body">
@@ -325,7 +325,7 @@ <h1 class="title">admin</h1>
325325
</tr>
326326
<tr>
327327
<td class="date">
328-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
328+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
329329
</td>
330330
<td class="summary">
331331
<div class="markdown-body">
@@ -341,7 +341,7 @@ <h1 class="title">admin</h1>
341341
</tr>
342342
<tr>
343343
<td class="date">
344-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
344+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
345345
</td>
346346
<td class="summary">
347347
<div class="markdown-body">
@@ -359,7 +359,7 @@ <h1 class="title">admin</h1>
359359
</tr>
360360
<tr>
361361
<td class="date">
362-
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
362+
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
363363
</td>
364364
<td class="summary">
365365
<div class="markdown-body">

‎app/test/frontend/golden/my_liked_packages.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ <h1 class="title">user</h1>
147147
<p>[email protected]</p>
148148
<p>
149149
Joined
150-
<a class="-x-ago" href="" title="on %%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
150+
<a class="-x-ago" href="" title="on %%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
151151
</p>
152152
</div>
153153
</div>
@@ -192,7 +192,7 @@ <h3 class="packages-title">
192192
</div>
193193
<p class="packages-metadata">
194194
Liked
195-
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
195+
<a class="-x-ago" href="" title="on %%liked1-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
196196
</p>
197197
</div>
198198
<div class="packages-item">
@@ -210,7 +210,7 @@ <h3 class="packages-title">
210210
</div>
211211
<p class="packages-metadata">
212212
Liked
213-
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
213+
<a class="-x-ago" href="" title="on %%liked1-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
214214
</p>
215215
</div>
216216
</div>

‎app/test/frontend/golden/my_packages.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ <h1 class="title">user</h1>
146146
<p>[email protected]</p>
147147
<p>
148148
Joined
149-
<a class="-x-ago" href="" title="on %%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
149+
<a class="-x-ago" href="" title="on %%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
150150
</p>
151151
</div>
152152
</div>
@@ -232,11 +232,11 @@ <h3 class="packages-title">
232232
v
233233
<a href="/packages/oxygen" title="Visit oxygen 1.2.0 page">1.2.0</a>
234234
(
235-
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
235+
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
236236
) /
237237
<a href="/packages/oxygen/versions/2.0.0-dev" title="Visit oxygen 2.0.0-dev page">2.0.0-dev</a>
238238
(
239-
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
239+
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
240240
)
241241
</span>
242242
<span class="packages-metadata-block">
@@ -315,7 +315,7 @@ <h3 class="packages-title">
315315
v
316316
<a href="/packages/neon" title="Visit neon 1.0.0 page">1.0.0</a>
317317
(
318-
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
318+
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
319319
)
320320
</span>
321321
<span class="packages-metadata-block">

‎app/test/frontend/golden/my_publishers.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ <h1 class="title">user</h1>
146146
<p>[email protected]</p>
147147
<p>
148148
Joined
149-
<a class="-x-ago" href="" title="on %%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
149+
<a class="-x-ago" href="" title="on %%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
150150
</p>
151151
</div>
152152
</div>
@@ -181,7 +181,7 @@ <h3 class="publishers-item-title">
181181
</h3>
182182
<p>
183183
Registered
184-
<a class="-x-ago" href="" title="on %%publisher-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
184+
<a class="-x-ago" href="" title="on %%publisher-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
185185
.
186186
</p>
187187
</div>

‎app/test/frontend/golden/pkg_activity_log_page.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ <h1 class="title">
153153
<div class="metadata">
154154
Published
155155
<span>
156-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
156+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
157157
</span>
158158
• Latest:
159159
<span>
@@ -256,7 +256,7 @@ <h3 class="detail-lead-title">Metadata</h3>
256256
<tbody>
257257
<tr>
258258
<td class="date">
259-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
259+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
260260
</td>
261261
<td class="summary">
262262
<div class="markdown-body">
@@ -266,7 +266,7 @@ <h3 class="detail-lead-title">Metadata</h3>
266266
</tr>
267267
<tr>
268268
<td class="date">
269-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
269+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
270270
</td>
271271
<td class="summary">
272272
<div class="markdown-body">
@@ -284,7 +284,7 @@ <h3 class="detail-lead-title">Metadata</h3>
284284
</tr>
285285
<tr>
286286
<td class="date">
287-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
287+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
288288
</td>
289289
<td class="summary">
290290
<div class="markdown-body">
@@ -302,7 +302,7 @@ <h3 class="detail-lead-title">Metadata</h3>
302302
</tr>
303303
<tr>
304304
<td class="date">
305-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
305+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
306306
</td>
307307
<td class="summary">
308308
<div class="markdown-body">
@@ -322,7 +322,7 @@ <h3 class="detail-lead-title">Metadata</h3>
322322
</tr>
323323
<tr>
324324
<td class="date">
325-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
325+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
326326
</td>
327327
<td class="summary">
328328
<div class="markdown-body">
@@ -340,7 +340,7 @@ <h3 class="detail-lead-title">Metadata</h3>
340340
</tr>
341341
<tr>
342342
<td class="date">
343-
<a class="-x-ago" href="" title="%%activity-5-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
343+
<a class="-x-ago" href="" title="%%activity-5-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
344344
</td>
345345
<td class="summary">
346346
<div class="markdown-body">

‎app/test/frontend/golden/pkg_admin_page.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@ <h1 class="title">
153153
<div class="metadata">
154154
Published
155155
<span>
156-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
156+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
157157
</span>
158158
• Latest:
159159
<span>

‎app/test/frontend/golden/pkg_changelog_page.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ <h1 class="title">
127127
<div class="metadata">
128128
Published
129129
<span>
130-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
130+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
131131
</span>
132132
• Latest:
133133
<span>

‎app/test/frontend/golden/pkg_example_page.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ <h1 class="title">
127127
<div class="metadata">
128128
Published
129129
<span>
130-
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
130+
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
131131
</span>
132132
• Latest:
133133
<span>

‎app/test/frontend/golden/pkg_index_page.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -499,11 +499,11 @@ <h3 class="packages-title">
499499
v
500500
<a href="/packages/oxygen" title="Visit oxygen 1.2.0 page">1.2.0</a>
501501
(
502-
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
502+
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
503503
) /
504504
<a href="/packages/oxygen/versions/2.0.0-dev" title="Visit oxygen 2.0.0-dev page">2.0.0-dev</a>
505505
(
506-
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
506+
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
507507
)
508508
</span>
509509
<span class="packages-metadata-block">
@@ -582,7 +582,7 @@ <h3 class="packages-title">
582582
v
583583
<a href="/packages/flutter_titanium" title="Visit flutter_titanium 1.10.0 page">1.10.0</a>
584584
(
585-
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
585+
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
586586
)
587587
</span>
588588
<span class="packages-metadata-block">

0 commit comments

Comments
 (0)