NB-Public/kandimat-user-app
14
0
Fork 0
Code Pull requests Releases 1 Activity

♿ Improves accessibility

Browse source
This commit is contained in:
Moritz Kröger 2019-04-19 10:00:00 +02:00
parent 9963ebc448
commit d53b742ec6
7 changed files with 52 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -30,6 +30,10 @@
<meta name="msapplication-TileColor" content="#40A6EE">
</head>
<body>
<a href="#main" class="visuallyhidden go-to-main">
Skip to main content
</a>
<script>
if (window.netlifyIdentity) {
window.netlifyIdentity.on('init', user => {

14
src/app/about/components/index.vue
View file

@ -15,6 +15,7 @@
<img
class="team-logo polis"
:src="polisLogo"
:alt="teamLabel.polis.label"
width="150"
height="100"
>
@ -43,6 +44,7 @@
<a :href="teamLabel.poe.url" target="_blank">
<img
class="team-logo poe"
:alt="teamLabel.poe.label"
:src="poeLogo"
width="400"
height="60"
@ -177,18 +179,6 @@
@media (max-width: $breakpoint) {
flex: 0 0 100%;
width: 100%;
&.poe {
order: 1;
}
&.polis {
order: 2;
}
&.dev {
order: 3;
}
}
}

31
src/app/app.vue
View file

@ -3,6 +3,7 @@
<header class="app-header">
<router-link :to="{ path: `/${$i18n.locale}/` }">
<img class="header-logo"
alt="EUROMAT Logo"
:src="euromatLogo"
:width="logoSize"
:height="logoSize / 2"
@ -12,7 +13,7 @@
<app-menu :main="topMenu" :languages="languages" />
</header>
<main>
<main id="main">
<router-view />
</main>
@ -154,6 +155,32 @@
overflow-x: hidden;
}
.visuallyhidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.go-to-main.visuallyhidden {
position: absolute;
background: $background-secondary;
left: 0;
top: 0;
padding: calc(#{$small-gap} / 2);
z-index: 100;
&:focus {
color: $text-color-secondary;
}
}
h1 {
font-size: $font-size-xlarge;
line-height: 110%;
@ -189,7 +216,7 @@
}
&:not(.btn):focus {
outline: none;
outline: 2px solid $orange;
color: $text-color-special;
}
}

8
src/app/euromat/components/emphasis.vue
View file

@ -178,6 +178,10 @@
margin-right: $base-gap;
margin-left: $base-gap * 2;
&:focus + label::before {
border: 2px solid $orange;
}
&:checked + label::after {
opacity: 1;
transform: translate(-70px, -50%);
@ -189,6 +193,10 @@
@media (max-width: $breakpoint) {
margin-bottom: $small-gap / 2;
&:checked:focus + label::after {
transform: translate(62px, -133%);
}
&:checked + label::after {
transform: translate(60px, -125%);
}

4
src/components/app-footer.vue
View file

@ -163,6 +163,10 @@
&:hover {
color: $text-color-special;
}
&:focus {
color: $text-color-base;
}
}
li:not(:first-child) {

5
src/components/app-menu.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="app-menu">
<nav role="navigation" class="app-menu">
<ul class="top-menu">
<li v-for="(item, index) of main" :key="item.label + index">
<router-link tag="a" :to="item.route">
@ -43,7 +43,7 @@
</ul>
</div>
</div>
</div>
</nav>
</template>
<script>
@ -154,6 +154,7 @@
&:focus {
box-shadow: none;
border: 2px solid $orange;
background: $button-background-secondary;
}
}

2
src/styles/buttons.scss
View file

@ -38,6 +38,7 @@ button,
&:focus,
&:active {
outline: none;
border: 2px solid $orange;
box-shadow: $button-shadow, 0 0 8px $pink;
}
@ -93,6 +94,7 @@ button,
&:focus,
&:active {
outline: none;
border: 2px solid $orange;
box-shadow: 0 0 8px transparentize($dark-blue, 0.7);
}