From 3e89baf1173c60b2c303f23d52f791d257a5f773 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 14 Feb 2017 14:21:36 +0000 Subject: [PATCH 1/2] =?UTF-8?q?Mark=20up=20=E2=80=98pill=E2=80=99=20compon?= =?UTF-8?q?ent=20as=20being=20tabs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `