🎩 What? Why?

The header and footer are lacking the correct ARIA roles which tell screen readers these are repeatable parts of the page.

• Adds banner role for the header
• Adds contentinfo role for the footer

This also adds the .header and .footer classes for these elements respectively, for easier targeting of elements inside these wrappers.

WCAG 2.1 A / SC 1.3.1

📌 Related Issues

• Related to Seek alternatives to design changes due to accessibility #5942, Accessibility/final #6246, Improve accessibility vol 2 #6124, Improve accessibility issues #5684

Testing

Check the source of any page.

📋 Checklist

• ❓ CONSIDER adding a unit test if your PR resolves an issue.
• ✔️ DO check open PR's to avoid duplicates.
• ✔️ DO keep pull requests small so they can be easily reviewed.
• ✔️ DO build locally before pushing.
• ✔️ DO make sure tests pass.
• ✔️ DO make sure any new changes are documented in docs/.
• ✔️ DO add and modify seeds if necessary.
• ✔️ DO add CHANGELOG upgrade notes if required.
• ✔️ DO add to GraphQL API if there are new public fields.
• ✔️ DO add link to MetaDecidim if it's a new feature.
• ❌AVOID breaking the continuous integration build.
• ❌AVOID making significant changes to the overall architecture.