Linter: Implement `a11y-svg-has-accessible-text` rule

[marcoroth]

Implement the GitHub::Accessibility::SvgHasAccessibleText rule from erblint-github.

Rule Details

<svg> must have accessible text. Set aria-label, or aria-labelledby, or nest a <title> element. However, if the <svg> is purely decorative, hide it with aria-hidden="true".

Examples

Incorrect code for this rule:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

Correct code for this rule:

<svg aria-label="A circle" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

<svg aria-labelledby="circle_title" height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

<svg height="100" width="100">
  <title>A circle</title>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

References

• erblint-github source
• erblint-github docs
• Accessible SVGs (CSS-Tricks)

Parent Issue

• erblint-github compatibility/parity #1205

[joelhawksley]

I'll take this one! PR: #1669