From 09f2e28b3915c17e1ba73496a0c099f2f301c858 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Mon, 9 May 2016 10:57:14 +0100 Subject: [PATCH 1/2] Set tabindex for the main element Chromium bug: Skip links do not work when using screenreader. https://bugs.chromium.org/p/chromium/issues/detail?id=37721 Once the page has loaded, press tab to navigate the page. Tab to a skip link and press enter. Adding tabindex="-1" to the destination element fixes this. --- views/examples/example_date.html | 2 +- views/examples/example_details_summary.html | 2 +- views/examples/example_form_elements.html | 2 +- views/examples/example_form_validation_multiple_questions.html | 2 +- .../examples/example_form_validation_single_question_radio.html | 2 +- views/examples/example_grid_layout.html | 2 +- views/examples/example_icons.html | 2 +- views/examples/example_radios_checkboxes.html | 2 +- views/examples/example_typography.html | 2 +- views/guide_alpha_beta.html | 2 +- views/guide_buttons.html | 2 +- views/guide_colour.html | 2 +- views/guide_data.html | 2 +- views/guide_errors.html | 2 +- views/guide_form_elements.html | 2 +- views/guide_icons_images.html | 2 +- views/guide_layout.html | 2 +- views/guide_typography.html | 2 +- views/index.html | 2 +- 19 files changed, 19 insertions(+), 19 deletions(-) diff --git a/views/examples/example_date.html b/views/examples/example_date.html index c5ac8afab..b40c3ecc2 100644 --- a/views/examples/example_date.html +++ b/views/examples/example_date.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Date — Form elements — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_details_summary.html b/views/examples/example_details_summary.html index abb0dade8..ef3b7eabc 100644 --- a/views/examples/example_details_summary.html +++ b/views/examples/example_details_summary.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Details summary — Typography — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_form_elements.html b/views/examples/example_form_elements.html index ce35e76a7..30530ea00 100644 --- a/views/examples/example_form_elements.html +++ b/views/examples/example_form_elements.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Form elements — Form elements — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_form_validation_multiple_questions.html b/views/examples/example_form_validation_multiple_questions.html index 6bb38d535..fbc51aeab 100644 --- a/views/examples/example_form_validation_multiple_questions.html +++ b/views/examples/example_form_validation_multiple_questions.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Form validation — Errors — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_form_validation_single_question_radio.html b/views/examples/example_form_validation_single_question_radio.html index c795c3b97..18704fa2c 100644 --- a/views/examples/example_form_validation_single_question_radio.html +++ b/views/examples/example_form_validation_single_question_radio.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Form validation — Errors — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_grid_layout.html b/views/examples/example_grid_layout.html index 734826f5b..b476fce7e 100644 --- a/views/examples/example_grid_layout.html +++ b/views/examples/example_grid_layout.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Grid layout — Layout — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_icons.html b/views/examples/example_icons.html index 976070a50..c5ca5f2df 100644 --- a/views/examples/example_icons.html +++ b/views/examples/example_icons.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Icons — Icons and images — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_radios_checkboxes.html b/views/examples/example_radios_checkboxes.html index aca784450..a95ab5060 100644 --- a/views/examples/example_radios_checkboxes.html +++ b/views/examples/example_radios_checkboxes.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Radio buttons and checkboxes — Form elements — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/examples/example_typography.html b/views/examples/example_typography.html index 3e6199f20..2db3405af 100644 --- a/views/examples/example_typography.html +++ b/views/examples/example_typography.html @@ -3,7 +3,7 @@ {{$pageTitle}}Example: Typography — Typography — GOV.UK elements{{/pageTitle}} {{$content}} -
+
{{>breadcrumb}} diff --git a/views/guide_alpha_beta.html b/views/guide_alpha_beta.html index dc1936be2..59bbc5ca3 100755 --- a/views/guide_alpha_beta.html +++ b/views/guide_alpha_beta.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_buttons.html b/views/guide_buttons.html index de0952709..1c0afd1ba 100755 --- a/views/guide_buttons.html +++ b/views/guide_buttons.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_colour.html b/views/guide_colour.html index ed5bde6b5..11b056618 100755 --- a/views/guide_colour.html +++ b/views/guide_colour.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_data.html b/views/guide_data.html index acd1c1160..6583bbc36 100755 --- a/views/guide_data.html +++ b/views/guide_data.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_errors.html b/views/guide_errors.html index b9f2f386e..66b9701ab 100755 --- a/views/guide_errors.html +++ b/views/guide_errors.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_form_elements.html b/views/guide_form_elements.html index e09c93746..25500fb95 100755 --- a/views/guide_form_elements.html +++ b/views/guide_form_elements.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_icons_images.html b/views/guide_icons_images.html index 443ff4eaa..3970b010f 100755 --- a/views/guide_icons_images.html +++ b/views/guide_icons_images.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_layout.html b/views/guide_layout.html index 04ee239ff..02913d16e 100755 --- a/views/guide_layout.html +++ b/views/guide_layout.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/guide_typography.html b/views/guide_typography.html index b97b050c5..546caeeb1 100755 --- a/views/guide_typography.html +++ b/views/guide_typography.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} diff --git a/views/index.html b/views/index.html index 1b931b0d8..859d9f36e 100755 --- a/views/index.html +++ b/views/index.html @@ -4,7 +4,7 @@ {{$content}} -
+
{{>phase_banner}} {{>breadcrumb}} From a384ee4913906805b37d862d9be5f0f8c66500d1 Mon Sep 17 00:00:00 2001 From: Gemma Leigh Date: Wed, 25 May 2016 16:33:30 +0100 Subject: [PATCH 2/2] Remove the blue focus outline from the main content area Pressing enter when focus is on the skiplink sets focus on the #content area, remove this outline. --- public/sass/elements-page.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/public/sass/elements-page.scss b/public/sass/elements-page.scss index c99812f28..5816c5c8f 100644 --- a/public/sass/elements-page.scss +++ b/public/sass/elements-page.scss @@ -4,6 +4,13 @@ // Elements page styles // ========================================================================== +// Pressing enter when focus is on the skiplink sets focus on the #content area +// Remove the blue outline + +#content { + outline: none; +} + // These are example styles, used only for the elements pages .elements-index {