caMicroscope icon indicating copy to clipboard operation
caMicroscope copied to clipboard

[Accessibility] Info Page: Zooming disabled in mobile view

Open nwanduka opened this issue 3 months ago • 1 comments

Describe the bug Zooming is disabled on mobile view of the Info Page. User Impact: Critical Tool used: Axe

To Reproduce Steps to reproduce the behavior:

  1. Go to http://localhost:4010/apps/Info.html
  2. Right-click on the page and click "inspect" to open the developer tools window
  3. Zoom in on the Info page while it's in desktop view. The page zooms in and out.
  4. Then switch to mobile view in the inspect panel and try to zoom. You'd notice that zoom doesn't work in mobile view

Expected behavior The info page contains a table that fills a desktop view. In mobile view, only a small part of the table is shown. So to view the rest of the table, users need to be able to scale the table up or down by zooming.

Screenshots image

Zoom accessibility issue

Desktop (please complete the following information):

  • OS: [Windows
  • Browser: Microsoft Edge
  • Version [e.g. 22]

Why is this important? The user-scalable="no" parameter inside the content attribute of element disables zooming on a page. The maximum-scale parameter limits the amount the user can zoom. This is problematic for people with low vision who rely on screen magnifiers to properly see the contents of a web page.

How to Fix the Problem Remove the user-scalable="no" parameter from the content attribute of the element in order to allow zooming and ensure the maximum-scale parameter is not less than 2.

nwanduka avatar Mar 20 '24 22:03 nwanduka

@nwanduka Fixed disabled in mobile #830 I would appreciate a review of my work to ensure it meets the project's standards.

Ayesh-07 avatar Mar 23 '24 13:03 Ayesh-07