add badge #74
add badge #74
Conversation
lib/rules/badge-missing-aria-v9.js
Outdated
| @@ -0,0 +1,53 @@ | |||
| // Copyright (c) Microsoft Corporation. | |||
There was a problem hiding this comment.
Could we also change the COVERAGE.md file?
lib/rules/badge-missing-aria-v9.js
Outdated
| @@ -0,0 +1,53 @@ | |||
| // Copyright (c) Microsoft Corporation. | |||
| // Licensed under the MIT License. | |||
|
|
|||
There was a problem hiding this comment.
We might also need to run the update:eslint-docs command to update the README file.
lib/rules/badge-missing-aria-v9.js
Outdated
| // visitor functions for different types of nodes | ||
| JSXOpeningElement(node) { | ||
| // if it is not a Badge, return | ||
| if (elementType(node) !== "Badge") { |
There was a problem hiding this comment.
I'm not sure if we need two separate rules for the Badge component.
A badge will take the accessible name of the parent such as a Tooltip or a Button, and will need to further labelling in that case.
A badge containing text content will have an accessible name so there is no need for other labels.
If a badge has an icon, we must add aria-label or aria-labelledby UNLESS the Badge is marked as decorative with aria-hidden.
If a badge has no content or an icon and the color conveys meaning, we can add the meaning with an aria-label. It depends on the context.
Suggestion:
We can consolidate the two newly created rules into one and we can have code like this:
// if it has a tooltip parent, return
if (hasToolTipParent(context)) {
return;
}
// if it has text content, return
if (hasTextContentChild(node)) {
return;
}
// the button has an associated label
if (hasAssociatedLabelViaAriaLabelledBy(openingElement, context)) {
return;
}
No description provided.