search

NHSLeadership / nightingale-2-0

A WordPress theme for the NHS using the NHS.UK frontend library
Other
28 stars 15 forks source link

2 Dimensional Scrolling on mobile/small screens - accessibility issue #545

Closed ShanayaKR closed 1 year ago

ShanayaKR commented 2 years ago

Describe the bug While using this theme, any 'Archive' pages scroll in 2 dimensions on smaller screens.

To Reproduce Steps to reproduce the behaviour:

  1. Create a news item/post and give it a category
  2. View the news item and scroll to the bottom - click in the bottom-right on the category link
  3. The category/archive page you land on is where the issue happens
  4. See error on small screens (I haven't tested it on all mobile screen sizes, but one I know for definite is that it happens on iPhone SE)

Expected behaviour Websites should not scroll in 2 dimensions as per WCAG

Additional context I am not sure why this only happens on the archive pages, as I believe the problem stems from the '-16px' of margin on the 'nhsuk-grid-row' class which is of course on every page. To fix on our own site, we simply did the following CSS:

.nhsuk-grid-row { margin-left: 0; margin-right: 0; }

I would assume our fix is not the best one however, as it affects all pages slightly, rather than just fixing the issue on the archive pages.

maheshmuralip commented 2 years ago

Thanks @ShanayaKR. We will be looking into this soon.

maheshmuralip commented 1 year ago

Hi @ShanayaKR We have released Nightingale version 2.4.9 which will fix this issue. Many thanks.