UniversalViewer / universalviewer

A community-developed open source project on a mission to help you share your πŸ“šπŸ“œπŸ“°πŸ“½οΈπŸ“»πŸ—Ώ with the 🌎
http://universalviewer.io
Other
490 stars 184 forks source link

Accessibility issue: when spacing is increased, Go button is pushed out of view and image string cut off #1066

Open scoutb-cogapp opened 1 month ago

scoutb-cogapp commented 1 month ago

UV version: universalviewer@4.0.25

I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below

Page area

header panel navigation bar

Issue description

When the user adjusts the spacing on the site, this can break the header panel:

Steps to reproduce

  1. install this bookmarklet which will increase the text spacing on the test page according to the WCAG requirements: https://dylanb.github.io/bookmarklets.html
  2. open this manifest
  3. switch to Welsh
  4. click the bookmarklet and obsere the header panel: the term for "image" and the "Go" button

Expected behaviour:

All components remain fully visible and legible when increased spacing is applied to the page.

WCAG criterion

1.4.12 Text Spacing (Level AA 2.1 only)

Related code:

"Image" string:

<div class="mode"><label for="image">Delwedd</label><input type="radio" id="image" name="mode" tabindex="0" checked="checked" style="display: none;"><label for="page" class="disabled" style="display: none;">Tudalen</label><input type="radio" id="page" name="mode" tabindex="0" disabled="disabled" style="display: none;"></div>

"Go" button:

<a class="go btn btn-primary" tabindex="0">GWELD</a>

Rating:

high

Other information:

Note: I have seen both those issues happening in Firefox even without spacing out the elements on the page when switched to French

To reproduce: Open the page in Firefox and switch to French. In this case both issues happen without even increasing the spacing on the page.

Screenshot:

UV-cutoff-controls

hannahb-cogapp commented 3 weeks ago

Note: You don't even need to install the text spacing bookmark to see this happening (not to say this shouldn't also be considered), it happens when the language is changed to French.