Implement the GitHub::Accessibility::NoAriaLabelMisuse rule from erblint-github.
Rule Details
This rule aims to discourage common misuse of the aria-label and aria-labelledby attributes. Support for these attributes is only guaranteed on interactive elements like button or a, or on static elements like div and span with a permitted role.
This rule will allow aria-label and aria-labelledby usage on div and span elements if set to a role other than the ones listed in W3C: roles which cannot be named. This rule will never permit usage on h1–h6, strong, i, p, b, or code.
Examples
Incorrect code for this rule:
<span aria-label="This is a tooltip">I am some text.</span>
<div aria-labelledby="heading1">Goodbye</div>
<h1 aria-label="This will override the page title completely">Page title</h1>
Correct code for this rule:
<button aria-label="Close">
<svg src="closeIcon"></svg>
</button>
<span>Hello</span>
<div role="dialog" aria-labelledby="dialogHeading">
<h1 id="dialogHeading">Heading</h1>
</div>
References
Parent Issue
Implement the
GitHub::Accessibility::NoAriaLabelMisuserule fromerblint-github.Rule Details
This rule aims to discourage common misuse of the
aria-labelandaria-labelledbyattributes. Support for these attributes is only guaranteed on interactive elements likebuttonora, or on static elements likedivandspanwith a permittedrole.This rule will allow
aria-labelandaria-labelledbyusage ondivandspanelements if set to a role other than the ones listed in W3C: roles which cannot be named. This rule will never permit usage onh1–h6,strong,i,p,b, orcode.Examples
Incorrect code for this rule:
Correct code for this rule:
References
Parent Issue
erblint-githubcompatibility/parity #1205