Accessibility fixes for map

Makes the controls and links inside it match GOVUK
Frontend styles and:
- gives the map container a focus style matching
  that for GOVUK Frontend text inputs
- makes it all work in high contrast modes (on
  Windows and Firefox)

Note: the focus style for the container is applied
with :focus-visible so only appears when it gets
focus directly, not when it does due to child
elements (like the controls or links) getting
focused. Browsers without support for
:focus-visible get the same styling for all forms
of focus.
This commit is contained in:
Tom Byers
2021-08-04 09:49:52 +01:00
parent bdf0fdbd5f
commit 388edeef5d
3 changed files with 152 additions and 3 deletions

View File

@@ -202,8 +202,8 @@ const javascripts = () => {
const sass = () => {
return src([
paths.src + '/stylesheets/main*.scss',
paths.src + '/stylesheets/print.scss',
paths.npm + '/leaflet/dist/leaflet.css'
paths.src + '/stylesheets/map.scss',
paths.src + '/stylesheets/print.scss'
])
.pipe(plugins.prettyerror())
.pipe(plugins.sass({
@@ -212,6 +212,7 @@ const sass = () => {
paths.npm + 'govuk-elements-sass/public/sass/',
paths.toolkit + 'stylesheets/',
paths.govuk_frontend,
paths.npm
]
}))
.pipe(plugins.cssUrlAdjuster({