WCAG 2.2 Accessibility - No Visible Labels

[jpherr]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

For WCAG 2.2 Accessibility optimisation

WCAG - DAC 01 No Visible Label

Legends not visible in Entry Date form on Entity page

Below the ‘Entry date’ section are two groups of input fields which have
visually hidden legend elements. Whilst the legends are useful for
screen reader users, voice activation users are unable to identify the
questions being asked for each group of input fields and may be unable
to make enter correct data as a result. Removing the visually hidden
class enables voice activation users to understand the questions being
asked related to the groups of input fields.

Changes:

• Remove visually hidden class

WCAG - DAC 02 No Visible Label

Visually hidden labels on Find an area form on maps page

The input fields below the h2 heading ‘Find an area’ have labels but
they have been visually hidden. This issue may affect voice activation
users who may be unable to reference the input fields with no visible
label present. This change ensures visible labels are exposed to enable
voice activation users to reference the input fields by their visible
labels

Changes:

• Expose labels to all users
  • Update CSS so that the now visual labels are correctly aligned

Related Tickets & Documents

• Closes DAC_No_Visible_Label_01 – Input fields below ‘Entry date’ have no visible label digital-land#706
• Closes DAC_No_Visible_Label_02 – Input fields below ‘Find an area’ have no visible label digital-land#707

QA Instructions, Screenshots, Recordings

https://www.planning.data.gov.uk/entity/

Before	After

https://www.planning.data.gov.uk/map/?

Before	After

Added/updated tests?

We encourage you to keep the code coverage percentage at 80% and above. Please refer to the Digital Land Testing Guidance for more information.

• Yes
• No, and this is why: please replace this line with details on why tests
  have not been included
• I need help with writing tests

[optional] Are there any post deployment tasks we need to perform?

[optional] Are there any dependencies on other PRs or Work?

Summary by CodeRabbit

• Accessibility Improvements

  • Made search method and map search fields easier to identify with visible labels.
  • Made entry date filter descriptions visible for clearer navigation.

• Style

  • Improved the map search form layout, aligning controls consistently and allowing them to wrap on smaller screens.

[coderabbitai]

Walkthrough

The map search form now displays its input labels and uses a wrapping flex layout. The two entry-date filter legends are also visible, while existing input associations and search behaviour remain unchanged.

Changes

Visible form controls

Layer / File(s)	Summary
Map search control layout application/templates/components/map-find-an-area-form/macro.jinja, assets/stylesheets/pages/_map.scss	Adds a wrapper for the search-method control, makes postcode, UPRN and LPA labels visible, and stacks labels above inputs within a wrapping flex layout.
Entry-date filter legends application/templates/partials/search-facets.html	Makes both entry-date fieldset legends visible.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• digital-land/digital-land.info#533: Also modifies the entry-date filter legend markup in search-facets.html.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly reflects the accessibility-focused change to make labels visible.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 706-dac_no_visible_label_01-input-fields-below-entry-date-have-no-visible-label

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@application/templates/partials/search-facets.html`:
- Around line 203-205: Update the legend text in the search facets fieldset to
clearly describe the available radio options, matching the labels “Since” and
“Before” and removing the confusing “since ... or after” wording.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b5448f19-dd5a-4916-8cb7-301444aa27a0

📥 Commits

Reviewing files that changed from the base of the PR and between 1b50b71 and bf42710.

📒 Files selected for processing (3)

• application/templates/components/map-find-an-area-form/macro.jinja
• application/templates/partials/search-facets.html
• assets/stylesheets/pages/_map.scss

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Correct the confusing legend text.

Now that this legend is visible, the wording "since the date or after the date?" is exposed. Since "since" and "after" are effectively synonyms in this context, and the radio buttons below are labelled Since and Before, this text is confusing.

Update the text to match the available options.

📝 Proposed fix

         <fieldset class="govuk-fieldset">
           <legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
-            Do you want to see entries since the date or after the date?
+            Do you want to see entries since the date or before the date?
           </legend>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
	Do you want to see entries since the date or after the date?
	</legend>
	<legend class="govuk-fieldset__legend govuk-fieldset__legend--s">
	Do you want to see entries since the date or before the date?
	</legend>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@application/templates/partials/search-facets.html` around lines 203 - 205,
Update the legend text in the search facets fieldset to clearly describe the
available radio options, matching the labels “Since” and “Before” and removing
the confusing “since ... or after” wording.

[fabiafowler]

Both these examples are multi-step questions, so the label should be covering both input fields. I don't know if theres a way to do this?

I've done some figma mock-ups of approaches we could do. I know the map work is upcoming so I think we should either hold off to save effort or do option 3 which will be reused in the map (although this would take up more space on the page).

Also done 2 versions for the entry date filter - option 1 is preferable if it solves the problem.

Figma design file