Skip to content

Commit

Permalink
fix: improve meta-data markup to better assist a11y tools
Browse files Browse the repository at this point in the history
  • Loading branch information
@ralfpatric
ralfpatric committed Dec 14, 2022
1 parent c28ca15 commit 81e11d3
Show file tree
Hide file tree
Showing 9 changed files with 70 additions and 66 deletions.
10 changes: 7 additions & 3 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1553,6 +1553,10 @@ ul {
padding: 20px 0;
}

.recent-activity-item h3 {
margin: 0;
}

.recent-activity-item-parent {
font-size: 16px;
font-weight: 600;
Expand Down Expand Up @@ -4753,18 +4757,18 @@ ul {
}
}

.search-results .meta-group > li {
.search-results .meta-group > span {
display: block;
}

@media (min-width: 1024px) {
.search-results .meta-group > li {
.search-results .meta-group > span {
display: inline;
}
}

@media (min-width: 1024px) {
.search-results .meta-group li:first-child {
.search-results .meta-group span:first-child {
flex: 1;
}
}
Expand Down
4 changes: 2 additions & 2 deletions styles/_search_results.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,12 +147,12 @@
clear: both;
color: #666;

> li {
> span {
display: block;
@include desktop { display: inline }
}

li:first-child {
span:first-child {
@include desktop { flex: 1; }
}

Expand Down
20 changes: 10 additions & 10 deletions templates/article_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,14 @@
{{/link}}
{{/if}}

<ul class="meta-group">
<div class="meta-group">
{{#is article.created_at article.edited_at}}
<li class="meta-data">{{date article.created_at timeago=true}}</li>
<span class="meta-data">{{date article.created_at timeago=true}}</span>
{{else}}
<li class="meta-data">{{date article.edited_at timeago=true}}</li>
<li class="meta-data">{{t 'updated'}}</li>
<span class="meta-data">{{date article.edited_at timeago=true}}</span>
<span class="meta-data">{{t 'updated'}}</span>
{{/is}}
</ul>
</div>
</div>
</div>

Expand Down Expand Up @@ -234,14 +234,14 @@
{{/each}}
</span>

<ul class="meta-group meta-group-opposite">
<div class="meta-group meta-group-opposite">
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">{{t 'edited'}}</li>
<span class="meta-data">{{date edited_at timeago=true}}</span>
<span class="meta-data">{{t 'edited'}}</span>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
<span class="meta-data">{{date created_at timeago=true}}</span>
{{/if}}
</ul>
</div>

<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
{{#each (
Expand Down
12 changes: 6 additions & 6 deletions templates/community_post_list_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,15 @@
{{/is}}
</span>

<ul class="meta-group">
<li class="meta-data">{{author.name}}</li>
<div class="meta-group">
<span class="meta-data">{{author.name}}</span>
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">{{t 'edited'}}</li>
<span class="meta-data">{{date edited_at timeago=true}}</span>
<span class="meta-data">{{t 'edited'}}</span>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
<span class="meta-data">{{date created_at timeago=true}}</span>
{{/if}}
</ul>
</div>
</span>

<div class="post-overview-count striped-list-count">
Expand Down
20 changes: 10 additions & 10 deletions templates/community_post_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,14 +71,14 @@
{{/each}}
</span>

<ul class="meta-group meta-group-opposite">
<div class="meta-group meta-group-opposite">
{{#if post.editor}}
<li class="meta-data">{{date post.edited_at timeago=true}}</li>
<li class="meta-data">{{t 'edited'}}</li>
<span class="meta-data">{{date post.edited_at timeago=true}}</span>
<span class="meta-data">{{t 'edited'}}</span>
{{else}}
<li class="meta-data">{{date post.created_at timeago=true}}</li>
<span class="meta-data">{{date post.created_at timeago=true}}</span>
{{/if}}
</ul>
</div>
<div class="community-badge-container-achievements">
{{#each (
slice
Expand Down Expand Up @@ -240,14 +240,14 @@
{{/each}}
</span>

<ul class="meta-group meta-group-opposite">
<div class="meta-group meta-group-opposite">
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">{{t 'edited'}}</li>
<span class="meta-data">{{date edited_at timeago=true}}</span>
<span class="meta-data">{{t 'edited'}}</span>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
<span class="meta-data">{{date created_at timeago=true}}</span>
{{/if}}
</ul>
</div>

<div aria-label="{{t 'badges'}}" class="community-badge-container-achievements">
{{#each (
Expand Down
12 changes: 6 additions & 6 deletions templates/community_topic_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,15 +90,15 @@
{{/is}}
</span>

<ul class="meta-group">
<li class="meta-data">{{author.name}}</li>
<div class="meta-group">
<span class="meta-data">{{author.name}}</span>
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">{{t 'edited'}}</li>
<span class="meta-data">{{date edited_at timeago=true}}</span>
<span class="meta-data">{{t 'edited'}}</span>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
<span class="meta-data">{{date created_at timeago=true}}</span>
{{/if}}
</ul>
</div>
</span>

<div class="post-overview-count striped-list-count">
Expand Down
6 changes: 3 additions & 3 deletions templates/request_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
{{/link}}
</span>

<ul class="meta-group">
<li class="meta-data">{{date created_at timeago=true}}</li>
</ul>
<div class="meta-group">
<span class="meta-data">{{date created_at timeago=true}}</span>
</div>
</div>
</div>

Expand Down
12 changes: 6 additions & 6 deletions templates/search_results.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,19 +212,19 @@
{{/if}}
</div>
<article>
<ul class="meta-group">
<li>
<div class="meta-group">
<span>
<ol class="breadcrumbs search-result-breadcrumbs">
{{#each path_steps}}
<li title="{{name}}"><a href="{{url}}" target="{{target}}">{{name}}</a></li>
{{/each}}
</ol>
</li>
</span>
{{#unless is_external}}
<li class="meta-data">{{author.name}}</li>
<span class="meta-data">{{author.name}}</span>
{{/unless}}
<li class="meta-data">{{date created_at}}</li>
</ul>
<span class="meta-data">{{date created_at}}</span>
</div>
<div class="search-results-description">{{text}}</div>
</article>
</li>
Expand Down
40 changes: 20 additions & 20 deletions templates/user_profile_page.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,29 +214,29 @@

<p class="profile-contribution-body">{{excerpt body characters=200}}</p>

<ul class="meta-group">
<div class="meta-group">
{{#is object_type 'comment'}}
<li class="meta-data">
<span class="meta-data">
<a class="comment-link" href={{url}}>{{t 'view_comment'}}</a>
</li>
</span>
{{/is}}
<li class="meta-data">{{author.name}}</li>
<span class="meta-data">{{author.name}}</span>
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">
<span class="meta-data">{{date edited_at timeago=true}}</span>
<span class="meta-data">
{{#is object_type 'article'}}
{{t 'updated'}}
{{else}}
{{t 'edited'}}
{{/is}}
</li>
</span>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
<span class="meta-data">{{date created_at timeago=true}}</span>
{{/if}}
{{#each stats}}
<li class="meta-data">{{label}}</li>
<span class="meta-data">{{label}}</span>
{{/each}}
</ul>
</div>
</div>
{{/with}}
</li>
Expand Down Expand Up @@ -375,29 +375,29 @@

<p class="profile-contribution-body">{{excerpt body characters=200}}</p>

<ul class="meta-group">
<div class="meta-group">
{{#is object_type 'comment'}}
<li class="meta-data">
<span class="meta-data">
<a class="comment-link" href={{url}}>{{t 'view_comment'}}</a>
</li>
</span>
{{/is}}
<li class="meta-data">{{author.name}}</li>
<span class="meta-data">{{author.name}}</span>
{{#if editor}}
<li class="meta-data">{{date edited_at timeago=true}}</li>
<li class="meta-data">
<span class="meta-data">{{date edited_at timeago=true}}</span>
<span class="meta-data">
{{#is object_type 'article'}}
{{t 'updated'}}
{{else}}
{{t 'edited'}}
{{/is}}
</li>
</span>
{{else}}
<li class="meta-data">{{date created_at timeago=true}}</li>
<span class="meta-data">{{date created_at timeago=true}}</span>
{{/if}}
{{#each stats}}
<li class="meta-data">{{label}}</li>
<span class="meta-data">{{label}}</span>
{{/each}}
</ul>
</div>
</li>

{{/each}}
Expand Down

0 comments on commit 81e11d3

Please sign in to comment.