Implement aria-tooltip-name rule
#35
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: Michiel Pauw <[email protected]> Co-authored-by: onkar75 <[email protected]>
koddsson
commented
Jun 19, 2024
Comment on lines
+9
to
+32
| /** | ||
| * Make sure that a elements text is "visible" to a screenreader user. | ||
| * | ||
| * - Inner text that is discernible to screen reader users. | ||
| * - Non-empty aria-label attribute. | ||
| * - aria-labelledby pointing to element with text which is discernible to screen reader users. | ||
| */ | ||
| function hasAccessibleText(el: Element): boolean { | ||
| if (el.hasAttribute("aria-label")) { | ||
| return el.getAttribute("aria-label")!.trim() !== ""; | ||
| } | ||
|
|
||
| if (!labelledByIsValid(el)) return false; | ||
|
|
||
| if (el.getAttribute("title")) { | ||
| return el.getAttribute("title")!.trim() !== ""; | ||
| } | ||
|
|
||
| if (el.textContent) { | ||
| return el.textContent.trim() !== ""; | ||
| } | ||
|
|
||
| return true; | ||
| } |
There was a problem hiding this comment.
This could probably be extracted out as a utility as I imagine that other rules implement this pattern often as well.
koddsson
commented
Jun 19, 2024
Comment on lines
+4
to
+7
| // Metadata | ||
| const id = "aria-tooltip-name"; | ||
| const text = "ARIA tooltip must have an accessible name"; | ||
| const url = `https://dequeuniversity.com/rules/axe/4.4/${id}?application=RuleDescription`; |
There was a problem hiding this comment.
At some point we should standardise how this metadata is recorded and exposed.
koddsson
commented
Jun 19, 2024
Comment on lines
+36
to
+37
| const tooltips = querySelectorAll("[role=tooltip]", el); | ||
| if (el.matches("[role=tooltip]")) tooltips.push(el); |
There was a problem hiding this comment.
This pattern is pretty universal and easy to forget to match the element that's passed into the rule. Maybe we can abstract that away?
LCOV of commit
|
koddsson
commented
Jun 19, 2024
Comment on lines
+7
to
+33
| const passes = [ | ||
| `<div role="tooltip" id="al" aria-label="Name"></div>`, | ||
| `<div> | ||
| <div role="tooltip" id="alb" aria-labelledby="labeldiv"></div> | ||
| <div id="labeldiv">Hello world!</div> | ||
| </div>`, | ||
| `<div role="tooltip" id="combo" aria-label="Aria Name">Name</div>`, | ||
| `<div role="tooltip" id="title" title="Title"></div>`, | ||
| ]; | ||
|
|
||
| const violations = [ | ||
| `<div role="tooltip" id="empty"></div>`, | ||
| `<div role="tooltip" id="alempty" aria-label=""></div>`, | ||
| `<div | ||
| role="tooltip" | ||
| id="albmissing" | ||
| aria-labelledby="nonexistent" | ||
| ></div>`, | ||
| `<div> | ||
| <div role="tooltip" id="albempty" aria-labelledby="emptydiv"></div> | ||
| <div id="emptydiv"></div> | ||
| </div>`, | ||
| ]; | ||
|
|
||
| describe("aria-tooltip-name", async function () { | ||
| for (const markup of passes) { | ||
| const el = await fixture(html`${markup}`); |
There was a problem hiding this comment.
We should change all the other rules to use this pattern so that the markup is correct for each rule. Otherwise it's all rendered into memory and then wiped from the DOM after the first test runs.
There was a problem hiding this comment.
In fact, standardising this whole suite might be the way to go. A developer should then just provide the test cases.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.