Skip to content

Commit

Permalink
x-ago rendering: updated aria label and role (dart-lang#7249)
Browse files Browse the repository at this point in the history
  • Loading branch information
@isoos
isoos authored Dec 5, 2023
1 parent c211529 commit 2a9dfa7
Show file tree
Hide file tree
Showing 40 changed files with 82 additions and 80 deletions.
6 changes: 4 additions & 2 deletions app/lib/frontend/dom/dom.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,16 +103,18 @@ Node xAgoTimestamp(DateTime timestamp, {String? datePrefix}) {
if (datePrefix != null) datePrefix,
shortDateFormat.format(timestamp),
].join(' ');
final text = formatXAgo(clock.now().difference(timestamp));
return a(
classes: ['-x-ago'],
href: '',
title: title,
attributes: {
'aria-label': 'Switch between date and elapsed time.',
'aria-label': text,
'aria-role': 'button',
'role': 'button',
'data-timestamp': timestamp.millisecondsSinceEpoch.toString(),
},
text: formatXAgo(clock.now().difference(timestamp)),
text: text,
);
}

Expand Down
18 changes: 9 additions & 9 deletions app/test/frontend/golden/my_activity_log_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ <h1 class="title">admin</h1>
<p>[email protected]</p>
<p>
Joined
<a class="-x-ago" href="" title="on %%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<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>
</p>
</div>
</div>
Expand Down Expand Up @@ -184,7 +184,7 @@ <h1 class="title">admin</h1>
<tbody>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -202,7 +202,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -220,7 +220,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -238,7 +238,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -256,7 +256,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -274,7 +274,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -292,7 +292,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -310,7 +310,7 @@ <h1 class="title">admin</h1>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%user-created-date%%" aria-label="%%x-ago%%" aria-role="button" 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 @@ -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="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<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>
</p>
</div>
</div>
Expand Down Expand Up @@ -191,7 +191,7 @@ <h3 class="packages-title">
</div>
<p class="packages-metadata">
Liked
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</p>
</div>
<div class="packages-item">
Expand All @@ -209,7 +209,7 @@ <h3 class="packages-title">
</div>
<p class="packages-metadata">
Liked
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="on %%liked1-date%%" aria-label="%%x-ago%%" aria-role="button" 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 @@ -145,7 +145,7 @@ <h1 class="title">user</h1>
<p>[email protected]</p>
<p>
Joined
<a class="-x-ago" href="" title="on %%oxygen-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<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>
</p>
</div>
</div>
Expand Down Expand Up @@ -224,11 +224,11 @@ <h3 class="packages-title">
v
<a href="/packages/oxygen">1.2.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</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 href="/packages/oxygen/versions/2.0.0-dev">2.0.0-dev</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</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>
)
</span>
<span class="packages-metadata-block">
Expand Down Expand Up @@ -300,7 +300,7 @@ <h3 class="packages-title">
v
<a href="/packages/neon">1.0.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</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>
)
</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 @@ -145,7 +145,7 @@ <h1 class="title">user</h1>
<p>[email protected]</p>
<p>
Joined
<a class="-x-ago" href="" title="on %%user-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<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>
</p>
</div>
</div>
Expand Down Expand Up @@ -180,7 +180,7 @@ <h3 class="publishers-item-title">
</h3>
<p>
Registered
<a class="-x-ago" href="" title="on %%publisher-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<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>
.
</p>
</div>
Expand Down
12 changes: 6 additions & 6 deletions app/test/frontend/golden/pkg_activity_log_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</span>
• Latest:
<span>
Expand Down Expand Up @@ -255,7 +255,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<tbody>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -269,7 +269,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -287,7 +287,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -305,7 +305,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</td>
<td class="summary">
<div class="markdown-body">
Expand All @@ -323,7 +323,7 @@ <h3 class="detail-lead-title">Metadata</h3>
</tr>
<tr>
<td class="date">
<a class="-x-ago" href="" title="%%activity-4-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%activity-4-date%%" aria-label="%%x-ago%%" aria-role="button" 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 @@ -152,7 +152,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" 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 @@ -126,7 +126,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" 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 @@ -126,7 +126,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" 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 @@ -474,11 +474,11 @@ <h3 class="packages-title">
v
<a href="/packages/oxygen">1.2.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</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 href="/packages/oxygen/versions/2.0.0-dev">2.0.0-dev</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</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>
)
</span>
<span class="packages-metadata-block">
Expand Down Expand Up @@ -550,7 +550,7 @@ <h3 class="packages-title">
v
<a href="/packages/flutter_titanium">1.10.0</a>
(
<a class="-x-ago" href="" title="%%oxygen-created-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</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>
)
</span>
<span class="packages-metadata-block">
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_install_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ <h1 class="title">
<div class="metadata">
Published
<span>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="Switch between date and elapsed time." aria-role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
<a class="-x-ago" href="" title="%%published-date%%" aria-label="%%x-ago%%" aria-role="button" role="button" data-timestamp="%%millis%%">%%x-ago%%</a>
</span>
• Latest:
<span>
Expand Down
Loading

0 comments on commit 2a9dfa7

Please sign in to comment.