dequelabs / dequelabs/axe-core
New Rule: Zoomed text content is not clipped with overflow:none
- 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
Assessment
This issue has not been assessed yet.