Skip to content

fix(color-contrast): handle text that is outside overflow: hidden ancestor#4357

Merged
straker merged 4 commits intodevelopfrom
element-midpoint-text-hidden
Mar 12, 2024
Merged

fix(color-contrast): handle text that is outside overflow: hidden ancestor#4357
straker merged 4 commits intodevelopfrom
element-midpoint-text-hidden

Conversation

@straker
Copy link
Copy Markdown
Contributor

@straker straker commented Mar 5, 2024

Closes: #4253

@straker straker requested a review from a team as a code owner March 5, 2024 17:12
WilcoFiers
WilcoFiers previously approved these changes Mar 7, 2024
const node = fixture.querySelector('#target');
const actual = getVisibleChildTextRects(node);
const rect = getClientRects(node)[0];
const expected = new DOMRect(rect.left, rect.top, 25, rect.height);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as addressing the issue this makes sense. But this example is odd. This element has no visible text, yet axe is deciding it does.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After thinking and looking into it, I don't believe this is the correct solution. color-contrast-matches uses a function to determine if an element has visible text children, if it doesn't it moves it to inapplicable. So text nodes that fully start outside an overflow hidden ancestor are ignored. I think text nodes that are causing this bug should also be ignored in that case.

return clientRects.length ? clientRects : [nodeRect];
return clientRects.length
? clientRects
: filterHiddenRects([nodeRect], overflowHiddenNodes);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Decided to leave this in as a failsafe though it technically shouldn't be needed anymore

Copy link
Copy Markdown
Contributor

@WilcoFiers WilcoFiers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Editorial

straker and others added 2 commits March 12, 2024 09:44
Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
@straker straker merged commit bdb7300 into develop Mar 12, 2024
@straker straker deleted the element-midpoint-text-hidden branch March 12, 2024 15:56
WilcoFiers added a commit that referenced this pull request Mar 25, 2024
##
[4.9.0](v4.8.4...v4.9.0)
(2024-03-25)

### Features

- adding the wcag131 tag to the aria-hidden-body rule
([#4349](#4349))
([dd4c3c3](dd4c3c3)),
closes [#4315](#4315)
- **checks:** deprecate aria-busy check
([#4356](#4356))
([be0b555](be0b555)),
closes [#4347](#4347)
[#4340](#4340)
- **color:** add color channel values and luminosity, saturation, clip
functions ([#4366](#4366))
([9e70199](9e70199)),
closes
[/github.com//pull/4365/files#r1517706612](https://github.com/dequelabs//github.com/dequelabs/axe-core/pull/4365/files/issues/r1517706612)
- **i18n:** add Greek Translations
([#3836](#3836))
([3ea9a48](3ea9a48))
- **i18n:** Add Italian translation
([#4344](#4344))
([de1baa9](de1baa9))
- **i18n:** Add Simplified Chinese translation
([#4379](#4379))
([bda7c8d](bda7c8d))
- **i18n:** Add Taiwanese Mandarin translation
([#4299](#4299))
([c5e11de](c5e11de))

### Bug Fixes

- Add LICENSE-3RD-PARTY.txt file
([#4304](#4304))
([daa0fe6](daa0fe6))
- add Object.values polyfill for node <=6
([#4274](#4274))
([5eb867b](5eb867b))
- **aria-required-children:** avoid confusing aria-busy message in
failures ([#4347](#4347))
([591607d](591607d)),
closes [#fail13](https://github.com/dequelabs/axe-core/issues/fail13)
[#4340](#4340)
- avoid reading element-specific node properties of non-element node
types ([#4317](#4317))
([b853b18](b853b18)),
closes [#4316](#4316)
[#4316](#4316)
- **color-contrast:** handle text that is outside `overflow: hidden`
ancestor ([#4357](#4357))
([bdb7300](bdb7300)),
closes [#4253](#4253)
- **color-contrast:** support color blend modes hue, saturation, color,
luminosity ([#4365](#4365))
([7ae4761](7ae4761))
- **d.ts:** RawNodesResult issues
([#4229](#4229))
([d660518](d660518))
- **d.ts:** RunOptions.reporter can be any string
([#4218](#4218))
([e53f5c5](e53f5c5))
- **i18n:** update Italian translations
([#4377](#4377))
([4d65d4b](4d65d4b))
- **listitem:** clarify roleNotValid message
([#4374](#4374))
([0f8a9af](0f8a9af))
- **scrollable-region-focusable:** missing wcag213 tag
([#4201](#4201))
([0080a72](0080a72))
- **target-size:** always pass 10x targets (avoid perf bottleneck)
([#4376](#4376))
([be327c4](be327c4))
- **target-size:** do not crash for nodes with many overlapping widgets
([#4373](#4373))
([1dbea83](1dbea83)),
closes [#4359](#4359)
[#4359](#4359)
[#4360](#4360)
- **utils/get-selector:** ignore 'xmlns' attribute when generating a
selector ([#4303](#4303))
([938b411](938b411))

This PR was opened by a robot 🤖 🎉
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"Element midpoint exceeds the grid bounds"

2 participants