8268 | Mobile header accessibility

[chris-lawton]

Link to Ticket

Description of Changes Made

• Add and toggle aria-expanded attr on the mobile menu toggle
• Add skip link to the homepage
• Ensure hidden mobile menu links cannot receive focus
• Remove 100% height from logo as it was preventing links further down the page from being clicked on smaller viewports
• Move the mobile menu toggle button on the home page so it's in a logical tabbing order

How to Test

• Visit the homepage locally and double check the above

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed.
• Consider adding unit tests, especially for bug fixes. If you don't, tell us why.
• Tests and linting passes.
• Consider updating documentation. If you don't, tell us why.
• If relevant, list the environments / browsers in which you tested your changes.

[helenb]

Something is not quite right with the links in the menu drop-down on the home page, where the focus is skipping straight past the drop down. I don't think it is this rule that is the issue - I haven't tracked it down from a quick look.

[chris-lawton]

Have you got a video?

[helenb]

Here you go:

Screen.Recording.2023-08-01.at.18.50.55.mov

[helenb]

Flagging that this is still an issue although this is on staging now. I'll mention in stand-up.

[chris-lawton]

I think it's to do with the order of the DOM elements on the home page template, as with other pages on staging the focus moves in a logical order - https://torchbox.staging.torchbox.com/digital-products/

On the homepage template I moved patterns/atoms/menu-button/menu-button.html down to here as otherwise the menu button was out of tab order - you can test this on https://torchbox.com/.

I think the fix will be to move patterns/molecules/navigation/mobile-nav.html to directly after menu-button.html on the homepage template I linked to above.

[chris-lawton]

Had more of a look into this and think i've resolved it here - 08590fd

It looks like we were overriding the {% block header %} tag on home_page.html as we don't include the primary nav on it but moving elements out of that header messes up the tabbing order.

So i've now matched the contents of {% block header %} on home_page.html to that of base_page.html but add a conditional on the primary nav as to wether to include it or not.

This in turn also fixes inconsistencies in logo placement when comparing the homepage to any other page.

[helenb]

Well done - that sounds like a good solution. I haven't been able to test it as for some reason that commit you linked to is not associated with a branch - not sure how that is possible?!

[chris-lawton]

I rebased the branch shortly after which is probably why.

It's here now (140b626) but prob easier to checkout the branch and pull : )

[helenb]

Ah that would do it - this is working nicely now - well done. I will update staging.

[helenb]

Everything looks good apart from an issue with tabbing the menu links in the dropdown on the home page. It would be nice if possible to also fix the 'more' button on the home page which currently can't be expanded via the keyboard.

[chris-lawton]

It would be nice if possible to also fix the 'more' button on the home page which currently can't be expanded via the keyboard.

Should be fixed in #509. I think it can be opened via keyboard but there's no focus state so you can't tell it's the active element.

[helenb]

It would be nice if possible to also fix the 'more' button on the home page which currently can't be expanded via the keyboard.

Should be fixed in #509. I think it can be opened via keyboard but there's no focus state so you can't tell it's the active element.

Great thanks - you're right it's just the focus state that was the issue