Skip to content

Commit

Permalink
Fix ARIA attributes for x-ago texts.
Browse files Browse the repository at this point in the history
  • Loading branch information
@isoos
isoos committed Jan 21, 2025
1 parent 5027967 commit b2a6f91
Show file tree
Hide file tree
Showing 41 changed files with 89 additions and 86 deletions.
7 changes: 5 additions & 2 deletions app/lib/frontend/dom/dom.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,8 +109,11 @@ Node xAgoTimestamp(DateTime timestamp, {String? datePrefix}) {
href: '',
title: title,
attributes: {
'aria-label': text,
'aria-role': 'button',
// Note: We change the `text` and the `title` when the user clicks this button.
// We do not use `aria-label`, so that the screenreader will read the
// appropriate change.
// We do not use `aria-pressed`, so that the screenreader will not read
// "toggle button pressed" as part of the text.
'role': 'button',
'data-timestamp': timestamp.millisecondsSinceEpoch.toString(),
},
Expand Down
24 changes: 12 additions & 12 deletions app/test/frontend/golden/my_activity_log_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ <h1 class="title">admin</h1>
<p>[email protected]</p>
<p>
Joined
<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>
<a class="-x-ago" href="" title="on %%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</p>
</div>
</div>
Expand Down Expand Up @@ -185,7 +185,7 @@ <h1 class="title">admin</h1>
<tbody>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -203,7 +203,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -221,7 +221,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -239,7 +239,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -255,7 +255,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -273,7 +273,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -291,7 +291,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -307,7 +307,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -325,7 +325,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -341,7 +341,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -359,7 +359,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand Down
6 changes: 3 additions & 3 deletions app/test/frontend/golden/my_liked_packages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ <h1 class="title">user</h1>
<p>[email protected]</p>
<p>
Joined
<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>
<a class="-x-ago" href="" title="on %%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</p>
</div>
</div>
Expand Down Expand Up @@ -192,7 +192,7 @@ <h3 class="packages-title">
</div>
<p class="packages-metadata">
Liked
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="on %%liked1-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</p>
</div>
<div class="packages-item">
Expand All @@ -210,7 +210,7 @@ <h3 class="packages-title">
</div>
<p class="packages-metadata">
Liked
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="on %%liked1-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</p>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/test/frontend/golden/my_packages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ <h1 class="title">user</h1>
<p>[email protected]</p>
<p>
Joined
<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>
<a class="-x-ago" href="" title="on %%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</p>
</div>
</div>
Expand Down Expand Up @@ -232,11 +232,11 @@ <h3 class="packages-title">
v
<a href="/packages/oxygen" title="Visit oxygen 1.2.0 page">1.2.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
) /
<a href="/packages/oxygen/versions/2.0.0-dev" title="Visit oxygen 2.0.0-dev page">2.0.0-dev</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
)
</span>
<span class="packages-metadata-block">
Expand Down Expand Up @@ -315,7 +315,7 @@ <h3 class="packages-title">
v
<a href="/packages/neon" title="Visit neon 1.0.0 page">1.0.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
)
</span>
<span class="packages-metadata-block">
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/my_publishers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ <h1 class="title">user</h1>
<p>[email protected]</p>
<p>
Joined
<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>
<a class="-x-ago" href="" title="on %%user-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</p>
</div>
</div>
Expand Down Expand Up @@ -181,7 +181,7 @@ <h3 class="publishers-item-title">
</h3>
<p>
Registered
<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>
<a class="-x-ago" href="" title="on %%publisher-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
.
</p>
</div>
Expand Down
14 changes: 7 additions & 7 deletions app/test/frontend/golden/pkg_activity_log_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</span>
• Latest:
<span>
Expand Down Expand Up @@ -256,7 +256,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<tbody>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -266,7 +266,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -284,7 +284,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -302,7 +302,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -322,7 +322,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -340,7 +340,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%activity-5-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%activity-5-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_admin_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</span>
• Latest:
<span>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_changelog_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</span>
• Latest:
<span>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_example_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</span>
• Latest:
<span>
Expand Down
6 changes: 3 additions & 3 deletions app/test/frontend/golden/pkg_index_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -499,11 +499,11 @@ <h3 class="packages-title">
v
<a href="/packages/oxygen" title="Visit oxygen 1.2.0 page">1.2.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
) /
<a href="/packages/oxygen/versions/2.0.0-dev" title="Visit oxygen 2.0.0-dev page">2.0.0-dev</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
)
</span>
<span class="packages-metadata-block">
Expand Down Expand Up @@ -582,7 +582,7 @@ <h3 class="packages-title">
v
<a href="/packages/flutter_titanium" title="Visit flutter_titanium 1.10.0 page">1.10.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%oxygen-created-date%%" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
)
</span>
<span class="packages-metadata-block">
Expand Down
Loading

0 comments on commit b2a6f91

Please sign in to comment.