♿ [#2625] Add mobile design for keeping accessibility functions available on small screens

[jiromaykin]

issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/2625

• functionality visible on desktop must remain available when zooming in 200%
• skip links are not allowed in Navs, so I moved it higher up
• when desktop users zoom in > 200% they will see the mobile view, but usually do not have typical mobile touch functions like "pinching" etc. so they still need the 'Vergroten' function

Design: https://www.figma.com/design/iKGhWhstaLIlFSaND2q7cE/OIP---Designs-(new)?node-id=1664-13773&m=dev

A11Y docs from NL Design-System: : https://nl-design-system.github.io/utrecht/storybook/?path=/docs/css_css-skip-link--docs

Skiplink on Desktop and Mobile becomes visible as very first Tabbable focus-visible element:

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.31%. Comparing base (5aba3cc) to head (aa2b195).
Report is 3 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop    #1470   +/-   ##
========================================
  Coverage    94.31%   94.31%           
========================================
  Files         1066     1066           
  Lines        40063    40065    +2     
========================================
+ Hits         37785    37787    +2     
  Misses        2278     2278           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jiromaykin]

@pi-sigma @swrichards How to review this PR:

• terminate all your NPM processes
• do a npm ci --legacy-peer-deps = this will retrieve the latest packages, like the updated Utrecht Components and including my updated package with new design-tokens
• npm run build
• runserver
• clear browser caches
• click and see if accessibility functionality is working in the opened mobile menu, like: if Vergroten/Verkleinen and its attributes are still toggling correctly (for the Speech stuff: either use Browserstack or use official Google Chrome browsers on Linux)
• you can reach the Skiplink by reverse(Shift) Tabbing, (if it is not the first element in your visible focus anymore).
• +codereview: I had to change some of the Tests, since it's no longer needed to show a Search bar when mobile menu is opened.

[swrichards]

Thanks for the review steps @jiromaykin -- very helpful!

I see the a11y buttons and they're functional (enlarge, read aloud work as expected, at least for the latter with the known caveats for Linux). I can also reach the skiplink. The styling of "Inloggen" en "Zoeken" does look slightly off to me compared to the design:

Is that expected? I went through the steps outlined above (and did another collectstatic for good measure).

[swrichards]

Just a question and small points, thanks.

[swrichards]

Nitpick I guess, but: can't we simply do something like doc.find("form:has(> button[title='Zoeken'])")?

[jiromaykin]

I did at first! But then I got the error "cssselect.parser.SelectorSyntaxError: Expected an argument, got <DELIM '[' at 15>..." and it seems due to cssselect, which doesn’t support all the same selectors as the jQuery-like PyQuery. Specifically, it seems to not support :has() with attribute selectors directly.

To get around this limitation, I tried an alternative approach: first find all forms on the page, then filter them programmatically to check if they contain a button[title='Zoeken'] with a simple CSS attribute selector that would work in all browser engines.

[swrichards]

Shame that the selector support appears to be limited, but no worries, thanks for the explanation!

[swrichards]

Might not be a bad idea to still include a reference to this repo? Not in these steps indeed, but just as a note (perhaps in step 5, "Note the project makes use of the open-inwoner-design-tokens package, which contains the project's design tokens for the NL Design System."

[jiromaykin]

Oh yeah, I could, though programmatically it has the same importance as all other NPM packages needed for this project to work, so NLDS package is just another Node module now.
This Readme contained a remnant from when we were still using some subdirectory packages.

[jiromaykin]

[...]The styling of "Inloggen" en "Zoeken" does look slightly off to me compared to the design: [...]
Is that expected? I went through the steps outlined above (and did another collectstatic for good measure).

@swrichards Oh no's that screenshot doesn't look correct at all.
If you did a proper NPM build and (perhaps multiple) browser cache reloads, it should look like this:
in your screenshot e.g. I am missing the new Home icon, FAQ icon, and also the new Close button:

[swrichards]

[...]The styling of "Inloggen" en "Zoeken" does look slightly off to me compared to the design: [...]
Is that expected? I went through the steps outlined above (and did another collectstatic for good measure).

@swrichards Oh no's that screenshot doesn't look correct at all. If you did a proper NPM build and (perhaps multiple) browser cache reloads, it should look like this: in your screenshot e.g. I am missing the new Home icon, FAQ icon, and also the new Close button:

This is now fixed (presumably due to working from a stale branch ref on my end).