WCAG page reflow

[lucascumsille]

Fixes: https://github.com/mysociety/societyworks/issues/4209

Around page

Currently when users zooming over 175% in a screen that is 1280px by 720px, the mobile version is trigger in the around page. This behaviour doesn't allow them to see the list of reports made in the area. This fix prevent classes(map-fullscreen only-map map-reporting) to be added, resulting in a mobile view with a non-full page map with a scrollable page so users can see the list of reports.

https://github.com/user-attachments/assets/5a03ebaa-2cc2-45d7-be2d-aa5d446a17cb

Local RRSS page

.alerts__nearby-activity__photos is now horizontally scrollable, so when zooming users can see all the images.

https://github.com/user-attachments/assets/9171dbb0-9ed3-4a9c-a4e1-bff2e3862432

[Skip changelog]

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 82.68%. Comparing base (4b95f7b) to head (0edcd90).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #4981 +/- ## ======================================= Coverage 82.68% 82.68% ======================================= Files 403 403 Lines 31359 31359 Branches 4973 4973 ======================================= Hits 25928 25928 Misses 3958 3958 Partials 1473 1473 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[lucascumsille]

@dracos I made a start on this issue, but working on it I noticed that the issue might be a bit bigger, for example when zooming at 400% the logo was massive, because the units were on pixels instead rem or em. By making that change, now when zooming we don't have the mobile view anymore instead we have the desktop version in the around page.

Not sure how we should tackle this problem:

SW ref 12 1.4.10 Report a problem

I tried replication the problem TFL raised by using a 1280px window at 400%, the map space is quite small, but you can actually make a report. However if a user needs that level of zooming not sure how well they'll be able to use the map and read the street names.

SW ref 11 Search results (text only)

For this one we presumably want to keep displaying a list of reports, so there is no loss of information/features. Assuming we continue using the mobile version, we don't have a list of reports, instead we have them on the map, but the map looks so small at 400% that is not really helpful, hence why we probably want to display a list of reports instead like we do on Desktop.

Let me know if you have any ideas to solve SW ref 11 Search results (text only)

[dracos]

calc($header-height + 0.25em); is breaking as you've put a SASS variable inside a calc, which is why you're seeing what you're seeing. If you fix that, you still get the mobile view when zooming in, that's not changed.

More generally:

• The W3C page you link to says that text must work up to 200%, for zooms up to 400%. Seems a bit odd (why are they zooming to 400%, if not to make the text bigger?), but this 14px change is shrinking the text across the board, which doesn't seem like it'll be very accessible - making all the text smaller for everyone to cope with the few people who are zooming in to it. I don't think we'd want to do this without knowing it was definitely an accessibility improvement for everyone.
• The last issue of the alert page, they are just examples, and tbh if they were all very wide photos they would do the same behaviour at non-400% zoom, I assume? I don't think this is really an issue, there are still examples shown. Guess we could have overflow scroll like an image gallery, or wrap, or whatever, but I think /functionality wise/ nothing is lost, and only simple change needed.
• On the others - I'm not sure it's information/functionality lost at high zoom - as you say, you are getting the 'mobile' view, the reports are available in mobile view from the pins. We can definitely argue/agree whether that's good enough for the mobile view in general, and whether we should add a list view - in general - to the mobile view (it is there! hidden behind/under the reporting map, so is conceivably something that might be good idea), but I don't think it's something to specially do due to the high zoom. The site is responsive, you can report using the map, and can click the pins.

Re ref 12 - I've just been to https://streetcare.tfl.gov.uk/report/new?longitude=-0.137823&latitude=51.512234 at 400% zoom, and clicked Continue and the form all seems to work fine? Not sure if I've missed something there at least. Ref 11 you could put down to the large difference in display due to the responsiveness, but it all seems to still work as expected at least.

So I guess my best 'solution' to this would be to:

• not change the default font size at any zoom;
• have a media query/JS based on window height as well as width for the setting of the map-fullscreen classes etc - so if we're sort of aware that we are in a view with an extremely small map area, then we switch to the non-full-screen map view (you know, what you get on a report page), which then has a small non-fullscreen map and the page is scrollable to see the list of reports as well. I think that would be enough for this scenario, what do you think?

[lucascumsille]

@dracos Thanks I went with your suggested approach, I think is the least intrusive one we have so far, however I think it is still tricky at 400%

https://github.com/user-attachments/assets/a6fe4b38-bbec-4c68-8191-cd5136123df7

I wonder if someone that is zooming at 400% will be able to use the map anyway? I wonder if we should tweak this approach to basically skip the map box, but display the list of reports. and if someone wants to make a report they just would do it like someone that "Can't use the map? skip this step"

What do you think?

[dracos]

Sorry, I must not have been clear enough. I wasn't suggesting having the desktop view for small height browsers, I don't think that will work (as per your screenshot). I think they should keep the mobile view, and what I was suggesting was that the code in header.js (and its compressed equivalent in the header) that sets the map-fullscreen only-map map-reporting classes if it's "mobile" should not run if it's a small height browser. If those classes aren't set, then you get mobile view, but with a non-full page map with a scrollable page so you can see the list of reports.

[lucascumsille]

Thanks @dracos that makes more sense =) I have updated the first message at the top so it reflects our approach. Let me know if this is what you had in mind

[lucascumsille]

@dracos Thanks for the fixup, I'm happy how it looks, however there is one thing that now I realised is happening. When I click on the map I can't put the pin on it, only with the space bar. Do you know why is that happening or is it even happening to you?

[dracos]

I can't get that happening to me, no. What cobrand/URL are you trying? Is there any error message in the console? is your CSS compiled/up to date (not that that should matter!)?

[lucascumsille]

@dracos I'm on /around?js=1&zoom=5&lat=52.47798&lon=-1.89987. No particular cobrand, just FMS https://fixmystreet.localhost:3000/around?js=1&zoom=5&lat=52.47798&lon=-1.89987

I'm not getting an error in the console though.