search

dequelabs / cauldron

https://cauldron.dequelabs.com/
Mozilla Public License 2.0
90 stars 21 forks source link

Tooltip: Horizontal scrolling at 320px width #905

Open scurker opened 1 year ago

scurker commented 1 year ago

Original Auditor URL: https://axeauditor.dequecloud.com/test-run/f6620faa-6d1e-11ec-a0b7-97f3ccf70959/issue/62507eac-da86-11ec-80f9-57a989c2c515?sortField=identifier&sortDir=asc&page=0&activeTab=dt-issue&pageSize=50&viewMode=issues&row=4&issuesCount%5B0%5D=&issuesCount%5B1%5D=&filter%5Bgroup_id%5D%5B0%5D=42b8f3a2-ac6e-11ed-adb1-3bfa602e0928&filter%5Bgroup_id%5D%5B1%5D=df2b20c0-1317-11ed-acb1-c7cbc98656eb

URL: https://cauldron.dequelabs.com/components/Tooltip

Description

Content does not reflow to fit horizontally within the viewpoint when page width is adjusted to 320px.

Element 1: Left button- tooltip content cut off

Location: Below Info-tooltip

Element 2: Right button-tooltip content is cut off and it has a horizontal scroll bar.

Location: Below Info-tooltip

Note: For reflow, resize the browser viewport to 640px width by 512px height and zoom in to 200%

Recommendation to fix

RULE :

The content MUST be viewable without scrolling horizontally when the viewport is set to 320 CSS pixels wide.

HOW TO FIX:

Fix this issue by using ANY of the following techniques:

  1. Use CSS techniques such as media queries, grids, or flexbox to reflow content down to 320px width.
  2. Provide options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text.

REFERENCE:

Deque University:https://dequeuniversity.com/class/responsive-zoom2/zoom/linear-text-reflow https://dequeuniversity.com/class/responsive-zoom2/responsive/ WCAG Understanding document: https://www.w3.org/WAI/WCAG21/Understanding/reflow

BACKGROUND:

People with low vision often read content on a desktop computer by scaling content using the browser zoom - up to 400%. When zooming content creates the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport, it significantly increases the effort required to read text and sometimes causes content hidden off-screen with no way to scroll or pan to it. When content is created so that it reflows at screen widths down to 320px, users can view a web page in a 1280px width browser screen and zoom the content to 400% (320px) without having to scroll side to side to read and without losing access to content.

tooltip not positioning itself correctly within cauldron documentation

scurker commented 1 year ago

Some investigation is needed here, it appears to only be happening to info tooltips and not the default tooltip. The default tooltip is getting repositioned when it overflows.