feat [front]: accessibility styles

This commit is contained in:
Alice 2022-12-30 21:33:31 +01:00
parent 27c2a4fae2
commit 15eb2cfac9
2 changed files with 73 additions and 0 deletions

72
front/css/a11y.sass Normal file
View file

@ -0,0 +1,72 @@
/*
* Focus States
*/
// thanks @cityssm/bulma-a11y
a:focus,
button:focus
outline-color: $black
outline-offset: 4px
outline-style: dotted !important
outline-width: 2px !important
.has-background-black &,
.has-background-dark &
outline-color: $white
a:focus
.has-text-white
outline-color: $white
.button:focus
&.is-black
outline-color: $black
&.is-danger
outline-color: $danger-dark
&.is-dark
outline-color: $dark
&.is-info
outline-color: $info-dark
&.is-link
outline-color: $link-dark
&.is-primary
outline-color: $primary-dark
&.is-success
outline-color: $success-dark
&.is-warning
outline-color: $warning-dark
.has-background-black &.is-inverted,
.has-background-dark &.is-inverted
outline-color: $white
/*
* Skip Links
*/
a.is-sr-only:focus,
button.is-sr-only:focus
position: fixed !important
top: 10px
left: 10px
z-index: 100
width: initial !important
height: initial !important
padding: $button-padding-vertical $button-padding-horizontal !important
overflow: initial !important
clip: initial !important
white-space: initial !important
&:not(.button)
background-color: $body-background-color
border: initial !important

View file

@ -28,6 +28,7 @@
@import "bulma/sass/helpers/other" @import "bulma/sass/helpers/other"
@import "bulma/sass/layout/section" @import "bulma/sass/layout/section"
@import "bulma/sass/layout/footer" @import "bulma/sass/layout/footer"
@import "a11y"
@import "movie-card" @import "movie-card"
@import "fonts" @import "fonts"