Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Mar 12, 2024
Merged

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

merged 4 commits into from
Mar 12, 2024

Conversation

straker
Copy link
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
View reviewed changes
test/commons/dom/get-visible-child-text-rects.js
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
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
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.

straker
straker commented Mar 12, 2024
View reviewed changes
lib/commons/dom/get-visible-child-text-rects.js
return clientRects.length ? clientRects : [nodeRect];
return clientRects.length
? clientRects
: filterHiddenRects([nodeRect], overflowHiddenNodes);
Copy link
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

WilcoFiers
WilcoFiers previously requested changes Mar 12, 2024
View reviewed changes
Copy link
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

lib/rules/color-contrast-matches.js Outdated Show resolved Hide resolved
lib/rules/color-contrast-matches.js Outdated Show resolved Hide resolved
lib/rules/color-contrast-matches.js Outdated Show resolved Hide resolved
straker and others added 2 commits March 12, 2024 09:44
@straker @WilcoFiers
Apply suggestions from code review
2d1c426 
Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
@straker
fixes
f23a60d
@straker straker merged commit bdb7300 into develop Mar 12, 2024
21 checks passed
@straker straker deleted the element-midpoint-text-hidden branch March 12, 2024 15:56
@attest-team-ci attest-team-ci mentioned this pull request Mar 25, 2024
Merged
WilcoFiers added a commit that referenced this pull request Mar 25, 2024
@WilcoFiers
chore(release): v4.9.0 (#4380)
d847924 
##
[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 🤖 🎉
@data-sync-user data-sync-user mentioned this pull request Jun 3, 2024
Closed
@wingn8t wingn8t mentioned this pull request Jun 14, 2024
Open
@gurudeep9 gurudeep9 mentioned this pull request Jun 23, 2024
Open
@abdulrahman305 abdulrahman305 mentioned this pull request Jul 3, 2024
Open
@Stanislav1975 Stanislav1975 mentioned this pull request Aug 9, 2024
Open
@Stanislav1975 Stanislav1975 mentioned this pull request Aug 19, 2024
Open
@Stanislav1975 Stanislav1975 mentioned this pull request Sep 9, 2024
Open
@organich organich mentioned this pull request Sep 24, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@WilcoFiers WilcoFiers WilcoFiers approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

"Element midpoint exceeds the grid bounds"
2 participants
@straker @WilcoFiers