Skip to content

Comments

Icons for accessibility headings#12626

Merged
gestchild merged 9 commits intomainfrom
ge/icons-for-headings
Jan 12, 2026
Merged

Icons for accessibility headings#12626
gestchild merged 9 commits intomainfrom
ge/icons-for-headings

Conversation

@gestchild
Copy link
Contributor

What does this change?

For #12603

Conditional adds icons for certain headings on the accessibility page:
Added exact text matching (case-insensitive) for:
"BSL" → BSL square icon
"Wheelchair and physical access" → Accessible icon
"Audio description" → Audio described icon
"Induction loops" → Induction loop icon

How to test

  • Visit the accessibility page (with and without 'Accessibility prototype page' toggle)
  • Matching headings should show the appropriate icon
  • Compare the implementation to the Figma design

How can we measure success?

People can quickly find the section they are interested in

Have we considered potential risks?

None really

Copilot AI review requested due to automatic review settings January 8, 2026 17:15
@gestchild gestchild requested a review from a team as a code owner January 8, 2026 17:15
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds conditional icon rendering to specific accessibility-related headings on the accessibility pages. When certain heading text matches predefined strings (case-insensitive), corresponding accessibility icons are displayed inline with the heading text.

Key changes:

  • Added pageUid to the SliceZoneContext to identify which page is being rendered
  • Modified the Text slice component to conditionally use a new accessibilitySerializer for accessibility pages
  • Created accessibilitySerializer that matches heading text and renders appropriate icons (BSL, wheelchair access, audio description, and induction loop)

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File Description
content/webapp/views/components/Body/index.tsx Added pageUid field to SliceZoneContext type and default context to enable page-specific rendering logic
common/views/slices/Text/index.tsx Added conditional logic to use accessibilitySerializer when rendering text on accessibility pages
common/views/components/HTMLSerializers/index.tsx Implemented new accessibilitySerializer that matches heading text and renders icons alongside headings for accessibility features

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Contributor

@rcantin-w rcantin-w left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Behaves well in all browsers and on smaller screens; with and without toggle

@rcantin-w
Copy link
Contributor

Do we care about adding a test for this? Could flag when there's an issue? 🤔

@gestchild gestchild merged commit 2110780 into main Jan 12, 2026
9 checks passed
@gestchild gestchild deleted the ge/icons-for-headings branch January 12, 2026 11:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants