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.
alphagov · May 9, 2016 · 09f2e28 · 09f2e28
1 parent 37a93c7
commit 09f2e28
Show file tree

Hide file tree

Showing 19 changed files with 19 additions and 19 deletions.
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}}