Fix breadcrumbs WCAG fails in government-frontend

[unoduetre]

⚠️ This repo is Continuously Deployed: make sure you follow the guidance ⚠️

Follow these steps if you are doing a Rails upgrade.

What

goverment-frontend places breadcrumbs inside the <main> container in some places, creating a WCAG fail. I’ve investigated all the templates in the repo and this problem is present in all the page templates that import the breadcrumbs, apart from /app/views/layouts/application.html.erb:

• app/views/histories/1_horse_guards_road.html.erb
• app/views/histories/11_downing_street.html.erb
• app/views/histories/king_charles_street.html.erb
• app/views/histories/10_downing_street.html.erb
• app/views/histories/lancaster_house.html.erb
• app/views/content_items/service_manual_service_standard.html.erb; example page: /service-manual/service-standard
• app/views/content_items/service_manual_guide.html.erb; example page: /service-manual/measuring-success/using-data-to-improve-your-service-an-introduction
• app/views/content_items/service_manual_topic.html.erb; example page: /service-manual/communities

Move the breadcrumbs out of the main container in each of the impacted templates.

There is one more template using the breadcrumbs component: /app/views/content_items/manuals/_manual_section_layout.html.erb
This is used e.g. in /guidance/immigration-rules/immigration-rules-appendix-continuous-residence but it represents the second breadcrumb component, not the first one, so nothing needs to be done but as pointed out by @MartinJJones it also needs to be addressesed.

Why

Having the breadcrumbs inside the main container is a WCAG fail.

Trello card

[MartinJJones]

Nice work!, the changes look good to me overall.

I think that we should still move the breadcrumbs component before the main element in the _main_section_layout template, this will follow the design system guidance and fix the accessibility issue by allowing users to jump straight to the main content.

Another issue spotted when reviewing this is that the breadcrumbs also have the same aria-label value, I will create a new Trello card to capture this issue so it can be fixed.

[unoduetre]

I think that we should still move the breadcrumbs component before the main element in the _main_section_layout template, this will follow the design system guidance and fix the accessibility issue by allowing users to jump straight to the main content.

I've moved the breadcrumbs out of main, so this should now be fixed.

Pages to test:

• /guidance/immigration-rules/immigration-rules-appendix-continuous-residence
• /hmrc-internal-manuals/denatured-alcohol/dnalc0500

[MartinJJones]

Changes look good to me, nice work 👍