dequelabs / dequelabs/axe-core

New Rule: Zoomed text content is not clipped with overflow:none

Open
#2,292 1 comment 0 reactions 0 assignees View on GitHub
wai-tools
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

## Rule: `rules/zoomed-text-not-clipped`

This rule checks that text nodes are not unintentionally clipped by `overflow`, when a page is zoomed to 200% on 1280 by 1024 viewport;

The spec for the rule will be as below:

```json
{
"id": "zoomed-text-not-clipped",
"selector": "",
"matches": "zoomed-text-not-clipped-matches",
"tags": ["wcag21", "wcag144"],
"metadata": {
"description": "",
"help": ""
},
"preload": false,
"all": [
"zoomed-text-not-clipped"
],
"any": [],
"none": []
}
```

## Matcher: `rules/zoomed-text-not-clipped-matches`

- The matches function will **gather all text nodes** in a given document (including Shadow DOM).
> Note: Will be using the [color contrast matches](https://github.com/dequelabs/axe-core/blob/73d2d2b59a01b969bed630ff76c36a7f80e2c9b9/lib/rules/color-contrast-matches.js#L9) as a base towards gathering all text nodes.
- The gathered text nodes will then be filtered, to ones that fulfil the below criterion:
- The text node is visible; and
- The text node has an HTML element as a parent in the flat tree; and
- The text node has an ancestor in the flat tree with a computed `overflow-x` or `overflow-y` of hidden or clip; and
- The text node does not have an ancestor in the flat tree with an `aria-hidden` attribute set to true.

## Check: `checks/shared/zoomed-text-not-clipped`

- Check that the given text nodes does is not clipped by overflow of an ancestor in the flat tree, except when the ancestor (that clips) has
- `text-overflow`: A computed white-space of nowrap, and a computed text-overflow that is not clip; or
- `line wrapping`: A computed line-height equal to or greater than the height of its bounding box, or in case of a computed overflow of clip, its content box.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.