WCAG 2.2 Accessibility - Screen Reader Focus Order

[jpherr]

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

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

Description

WCAG 2.2 Accessibility optimisation

Update focus order of title in summary card on entity page

When screen reader users encounter the planning and housing data results, the focus order does not match the way the data is presented visually on the page. The order of elements in the DOM does not match the visual sequence, meaning screen reader users encounter the headings initially and then the information above it visually, followed by information below it in the description lists. Additionally, sections are presented inside <article> tags, which is an incorrect element type for this type of data and should be used for content such as newspaper
articles, forum or blog posts.

The original implementation reversed the order of elements via CSS but there's no description in the original PR, so it's not known why it was implemented this way. It may have in itself been for accessibility reasons. This change retains the natural order of elements for all users.

Changes:

• Update order of elements in DOM and acknowledge in CSS
• Change article element to section

Related Tickets & Documents

• Closes DAC_Screen_Reader_Focus_Order_01 – Focus order does not match visual order in results digital-land#708

QA Instructions, Screenshots, Recordings

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: changes to markup only
• 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

• Style
  • Updated entity card markup for improved semantic structure.
  • Adjusted card header layout to display its contents in the correct order.
  • Reformatted entity card title rendering without changing the displayed information.

[coderabbitai]

Walkthrough

Entity cards now use <section> wrappers, retain existing entity title rendering, and display header content in normal column order to align document and visual sequencing.

Changes

Entity card accessibility

Layer / File(s)	Summary
Card semantics and header order application/templates/components/entity-card/macro.jinja, assets/stylesheets/component/_card.scss	Entity card wrappers change from <article> to <section>, title rendering remains conditional on e["name"], and header flex items use column order instead of column-reverse.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: eveleighoj, pooleycodes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The PR updates the result card markup and flex ordering to match the visual sequence and replaces article with section, satisfying #708.
Out of Scope Changes check	✅ Passed	All reported changes relate to the accessibility card reordering and semantic wrapper update; no unrelated edits are evident.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the accessibility-focused screen reader focus-order changes in the card markup and header layout.

✨ 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 708-dac_screen_reader_focus_order_01-focus-order-does-not-match-visual-order-in-results

---

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.}

[pooleycodes]

LGTM