From 417409575c108a82219d98594efe5dc51629235a Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Sat, 17 Aug 2024 10:56:54 +0100 Subject: [PATCH] Add heading level option to label component called `headingLevel` This optional setting only works if the label is a page heading i.e `isPageHeading` is set to true. A HMPPS service had an external accessibility audit raised the following point on a few of it pages: > The form labels are styled to look like headings and stand out visually. While sighted users can identify headings based on larger font size and bold formatting, screen reader users rely on proper HTML markup to understand the structure of a page. > Screen reader users sometimes jump between the headings of the page to gain a better understanding of the structure and content on the page. The [WebAIM screen reader survey](https://webaim.org/projects/) has found that [headings are the number one means by which screen reader users get a sense of a complex page](https://webaim.org/projects/screenreadersurvey9/#finding). When headings are not available programmatically to users, it affects the time and effort needed to understand how the content is presented on the page. Furthermore, this creates a discrepancy between information available to a sighted individual and users relying on assistive technology. They suggested something like ```

``` The problem is that the existing label component: 1. It does support custom html, but that would place the headings inside the label means Inline elements would contain block level elements which is not valid 2. Using isPageHeading, uses a hard coded h1 so cannot use that options These changes are backwards compatible by setting the heading level to 1. --- .../govuk-frontend/src/govuk/components/label/label.yaml | 5 +++++ .../govuk-frontend/src/govuk/components/label/template.njk | 7 +++++-- .../src/govuk/components/label/template.test.js | 7 +++++++ 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/label/label.yaml b/packages/govuk-frontend/src/govuk/components/label/label.yaml index 567150ce7f..6e15535d08 100644 --- a/packages/govuk-frontend/src/govuk/components/label/label.yaml +++ b/packages/govuk-frontend/src/govuk/components/label/label.yaml @@ -72,6 +72,11 @@ examples: options: text: National Insurance number isPageHeading: true + - name: as page heading with defined heading level + options: + text: National Insurance number + isPageHeading: true + headingLevel: 2 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures - name: empty diff --git a/packages/govuk-frontend/src/govuk/components/label/template.njk b/packages/govuk-frontend/src/govuk/components/label/template.njk index 49a8985e08..02824a2428 100644 --- a/packages/govuk-frontend/src/govuk/components/label/template.njk +++ b/packages/govuk-frontend/src/govuk/components/label/template.njk @@ -10,9 +10,12 @@ {% endset -%} {% if params.isPageHeading %} -

+{#- Optional. The page heading level(1-6) to be used with ``isPageHeading` defaults to heading level 1-#} +{% set headingLevel = params.headingLevel if params.headingLevel else 1 %} + + {{ labelHtml | safe | trim | indent(2) }} -

+ {% else %} {{ labelHtml | safe | trim }} {% endif %} diff --git a/packages/govuk-frontend/src/govuk/components/label/template.test.js b/packages/govuk-frontend/src/govuk/components/label/template.test.js index 0abf76bf9f..370c9f6115 100644 --- a/packages/govuk-frontend/src/govuk/components/label/template.test.js +++ b/packages/govuk-frontend/src/govuk/components/label/template.test.js @@ -68,6 +68,13 @@ describe('Label', () => { expect($selector.length).toBeTruthy() }) + it('can be nested inside an heading tag using isPageHeading and headingLevel', () => { + const $ = render('label', examples['as page heading with defined level']) + + const $selector = $('h2 > .govuk-label') + expect($selector.length).toBeTruthy() + }) + it('allows additional attributes to be added to the component', () => { const $ = render('label', examples.attributes)