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.

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

Certain visible styling being calculated to not be visible (label-title-only, potentially other rules) #4016

Closed
1 task done
nolandanley opened this issue May 9, 2023 · 1 comment · Fixed by #4405 or organich/lighthouse#4 · May be fixed by wingn8t/wagtail#1, gurudeep9/mattermost-test#2 or abdulrahman305/docs#4
Assignees
Labels
commons Issues in the common code (lib/commons) fix Bug fixes rules Issue or false result from an axe-core rule

Comments

@nolandanley
Copy link
Contributor

Product

axe-core

Product Version

v4.7.0

Latest Version

  • I have tested the issue with the latest version of the product

Issue Description

Expectation

Labels that are both visible and programmatically provided should not raise a violation of label-title-only.

Actual

The logic behind the calculation of whether a label is visible seems to not take certain potential styling into consideration, leading to violations of label-title-only even with the label is both provided and visible. It's likely this may affect more rules than just label-title-only.

How to Reproduce

<!-- 
  Copyright 2023 Google LLC.
  SPDX-License-Identifier: Apache-2.0
-->

<span id="description">Description</span>

<!-- LABEL VISIBLE, NO VIOLATION -->
<input aria-labelledby="label" aria-describedby="description">
<div>
  <span id="label">label</span>
</div>

<!-- LABEL VISIBLE, NO VIOLATION -->
<input aria-labelledby="absolute-label" aria-describedby="description">
<div>
  <span id="absolute-label" style="position: absolute">label</span>
</div>

<!-- LABEL VISIBLE, NO VIOLATION -->
<input aria-labelledby="overflow-label" aria-describedby="description">
<div style="overflow: hidden;">
  <span id="overflow-label">label</span>
</div>

<!-- LABEL VISIBLE, VIOLATION -->
<input aria-labelledby="overflow-absolute-label" aria-describedby="description">
<div style="overflow: hidden;">
  <span id="overflow-absolute-label" style="position: absolute">label</span>
</div>

Additional context

Tested with v4.7.0 on Chrome.

@nolandanley nolandanley added the ungroomed Ticket needs a maintainer to prioritize and label label May 9, 2023
@WilcoFiers
Copy link
Contributor

Thanks for reporting this. Took a little digging to figure out what's going on. Axe has a getOverflowHiddenAncestors method which tries to identify ancestors that may be hiding elements. That method should look at the CSS position while looking up the ancestor tree to find elements that may be hiding it.

@WilcoFiers WilcoFiers added fix Bug fixes rules Issue or false result from an axe-core rule commons Issues in the common code (lib/commons) and removed ungroomed Ticket needs a maintainer to prioritize and label labels May 15, 2023
@WilcoFiers WilcoFiers added this to the Axe-core 4.8 milestone May 15, 2023
@WilcoFiers WilcoFiers modified the milestones: Axe-core 4.8, Axe-core 4.9 Oct 12, 2023
@straker straker self-assigned this Apr 10, 2024
straker added a commit that referenced this issue Apr 15, 2024
…e overflow container (#4405)

Also tested various ways to try to get the `position: absolute` to be
hidden by the node. Turns out there are a few cases where it will be
hidden:

* overflow node uses position itself other than static
* node in-between the overflow node and the positioned child uses
position `relative` or `sticky`

and cases where it won't be hidden

* positioned child uses a position of `fixed` (it won't be hidden by any
ancestor overflow, even if the ancestor uses position itself)

Closes: #4016
WilcoFiers added a commit that referenced this issue May 6, 2024
###
[4.9.1](v4.9.0...v4.9.1)
(2024-05-06)

### Bug Fixes

- Prevent errors when loading axe in a page with prototype.js
- **aria-allowed-attr:** allow meter role allowed aria-\* attributes on
meter element
([#4435](#4435))
([7ac6392](7ac6392))
- **aria-allowed-role:** add gridcell, separator, slider and treeitem to
allowed roles of button element
([#4398](#4398))
([4788bf8](4788bf8))
- **aria-roles:** correct abstract roles (types) for
aria-roles([#4421](#4421))
- **aria-valid-attr-value:** aria-controls & aria-haspopup incomplete
([#4418](#4418))
- fix building axe-core translation files with region locales
([#4396](#4396))
([5c318f3](5c318f3)),
closes [#4388](#4388)
- **invalidrole:** allow upper and mixed case role names
([#4358](#4358))
([105016c](105016c)),
closes [#2695](#2695)
- **isVisibleOnScreen:** account for position: absolute elements inside
overflow container
([#4405](#4405))
([2940f6e](2940f6e)),
closes [#4016](#4016)
- **label-content-name-mismatch:** better dismiss and wysiwyg symbolic
text characters
([#4402](#4402))
- **region:** Decorative images ignored by region rule
([#4412](#4412))
- **target-size:** ignore descendant elements in shadow dom
([#4410](#4410))
([6091367](6091367))
- **target-size:** pass for element that has nearby elements that are
obscured ([#4422](#4422))
([3a90bb7](3a90bb7)),
closes [#4387](#4387)


This PR was opened by a robot 🤖 🎉 (And updated by @WilcoFiers
)
@WilcoFiers WilcoFiers removed this from the Axe-core 4.11 milestone Jul 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment