Skip to content

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

Description

@scoutb-cogapp

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:

  • the term "image" before the number field gets cut off at the end and disappears behind the number field (see screenshot). This is worse for languages where this word has more letters
  • the Go button is pushed into a new line. This makes it mostly disappear, only the top is visible (see screenshot).

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

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

Status
Community Sprint COMPLETED

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions