Merge pull request #225 from alphagov/add-tabindex-to-fix-skiplink

Add `tabindex-1` to fix the skiplink in Safari
alphagov · May 25, 2016 · 4cb1170 · 4cb1170
2 parents f109c7a + a384ee4
commit 4cb1170
Show file tree

Hide file tree

Showing 20 changed files with 26 additions and 19 deletions.
diff --git 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 {

diff --git 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}}
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main class="js-error-example" id="content" role="main">
+<main class="js-error-example" id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main class="js-error-example" id="content" role="main">
+<main class="js-error-example" id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git 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}}
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>breadcrumb}}
 

diff --git a/views/guide_alpha_beta.html b/views/guide_alpha_beta.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_buttons.html b/views/guide_buttons.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_colour.html b/views/guide_colour.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_data.html b/views/guide_data.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_errors.html b/views/guide_errors.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_form_elements.html b/views/guide_form_elements.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_icons_images.html b/views/guide_icons_images.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_layout.html b/views/guide_layout.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/guide_typography.html b/views/guide_typography.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main id="content" role="main">
+<main id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}

diff --git a/views/index.html b/views/index.html
@@ -4,7 +4,7 @@
 
 {{$content}}
 
-<main class="elements-index" id="content" role="main">
+<main class="elements-index" id="content" role="main" tabindex="-1">
 
   {{>phase_banner}}
   {{>breadcrumb}}