data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

improve a11y of back button

Browse source
This commit is contained in:
Nolan Lawson 2018-01-22 08:30:36 -08:00
parent 9bba0d80d8
commit 5d9eba58be
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
routes/tags/[tagName].html
View file

@ -8,9 +8,9 @@
dynamicLabel="{{'#' + params.tagName}}" dynamicLabel="{{'#' + params.tagName}}"
dynamicIcon="#fa-hashtag" > dynamicIcon="#fa-hashtag" >
{{#if $isUserLoggedIn}} {{#if $isUserLoggedIn}}
<div class="hashtag-banner"> <div class="dynamic-page-banner">
<h1 class="hashtag-title">{{'#' + params.tagName}}</h1> <h1 class="dynamic-page-title">{{'#' + params.tagName}}</h1>
<a href="#" class="hashtag-go-back" on:click="onGoBack(event)">Back</a> <button type="button" class="dynamic-page-go-back" on:click="onGoBack(event)">Back</button>
</div> </div>
<LazyTimeline timeline='tag/{{params.tagName}}' /> <LazyTimeline timeline='tag/{{params.tagName}}' />
{{else}} {{else}}
@ -24,19 +24,26 @@
{{/if}} {{/if}}
</Layout> </Layout>
<style> <style>
.hashtag-banner { .dynamic-page-banner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0 20px 20px; margin: 0 20px 20px;
} }
h1.hashtag-title { h1.dynamic-page-title {
margin: 0; margin: 0;
} }
a.hashtag-go-back { button.dynamic-page-go-back {
font-size: 1.3em; font-size: 1.3em;
color: var(--anchor-text);
border: 0;
padding: 0;
background: none;
} }
a.hashtag-go-back::before { button.dynamic-page-go-back:hover {
text-decoration: underline;
}
button.dynamic-page-go-back::before {
content: '<'; content: '<';
margin-right: 5px; margin-right: 5px;
} }