New rule to flag invalid aria-label format #418

khiga8 · 2023-03-23T17:10:28Z

This new lint rule flags when aria-label content is not well-formatted. Specifically, it flags when a JSX opening tag has an aria-label content that is a Literal, and starts with downcase.

aria-label content should be formatted in the same way as one would visual text, but there seems to be a misconception that it doesn't have to be. As a result, we're seeing aria-label that looks like an ID, or is downcased.

Staff-only: For fun, here's a list of flagged aria-label in ERB using this logic.

Comment from @jscholes:

I don't know where the impression comes from that aria-label shouldn't be treated exactly like visual text in terms of formatting and such, but it should be.

Relates to:

I plan to follow-up with a similar rule in erblint-github.

khiga8 · 2023-03-23T17:52:56Z

README.md

-| [require-passive-events](docs/rules/require-passive-events.md)       | enforce marking high frequency event handlers as passive                                                                 | 🔍 |    |    |
-| [role-supports-aria-props](docs/rules/role-supports-aria-props.md)   | Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. | ⚛️ |    |    |
-| [unescaped-html-literal](docs/rules/unescaped-html-literal.md)       | disallow unescaped HTML literals                                                                                         | 🔍 |    |    |
+| Name                                                                     | Description                                                                                                              | 💼 | 🔧 | ❌  |


this auto-generator is so cool!

accessibility-bot · 2023-03-23T18:14:06Z

👋 Hello and thanks for pinging us! An accessibility first responder will review this soon.

💻 On PRs for our review: please provide a review environment with steps to validate, screenshots (with alt text), or videos demonstrating functionality we should be checking. This will help speed up our review and feedback cycle.
⚠️ If this is urgent, please visit us in #accessibility on Slack and tag the first responder(s) listed in the channel topic.

khiga8 · 2023-03-23T18:18:21Z

I think we can assume that there's no valid aria-label that is downcased that's hard-coded.

If aria-label is populated based on something like a users content like a filename, that would be dynamically generated and would not be flagged by static analysis.

kendallgassner · 2023-03-23T18:19:27Z

tests/a11y-aria-label-is-well-formatted.js

+})
+
+const errorMessage =
+  '[aria-label] text should be formatted the same as you would visual text. Use sentence case and make sure you are not using hyphens.'


What about words with hyphens? Example: six-pack

Does this answer your concern: #418 (comment)?

I think it's highly unlike we'll run into a valid, hard-coded aria-label that downcased with only letters and optionally a hyphen. If we do run into one, we can consider adding a way to configure an exception list that can be set at the config level. Do you think this rule should ship with that?

Theoretically, this rule would flag six-pack (since it does not start with an uppercase letter), but it wouldn't flag Six-pack 😂.

Hmmm, what if we also only flag these aria-labels if they don't have a single space?... Technically six-pack would still get flagged but it's a more safe check?

what if we also only flag these aria-labels if they don't have a single space?...

I think we'd still want to flag something like:

show hide close

(these are examples I'm pulling from real aria-label we have right now in our codebase)

kendallgassner

approving -- we worked through the six-pack idea on slack

khiga8 added 6 commits March 23, 2023 13:09

New rule to flag invalid aria-label format

2c0e476

Update tests

9614192

Update docs and preset

ede8536

Update README

d286fa5

Fix lint

a083b52

Rename rule

440f6f3

khiga8 commented Mar 23, 2023

View reviewed changes

khiga8 added 2 commits March 23, 2023 13:55

Update text

980be83

Run prettier

381f2bc

khiga8 force-pushed the kh-new-rule-to-flag-invalid-aria-label-format branch from 16f28f6 to 381f2bc Compare March 23, 2023 17:57

khiga8 requested review from a team and accessibility-bot March 23, 2023 18:09

khiga8 marked this pull request as ready for review March 23, 2023 18:10

khiga8 requested a review from a team as a code owner March 23, 2023 18:10

khiga8 requested a review from dgreif March 23, 2023 18:10

kendallgassner reviewed Mar 23, 2023

View reviewed changes

khiga8 requested a review from kendallgassner March 23, 2023 18:43

kendallgassner approved these changes Mar 23, 2023

View reviewed changes

Clean up regex

bff637e

khiga8 force-pushed the kh-new-rule-to-flag-invalid-aria-label-format branch from c410285 to bff637e Compare March 23, 2023 20:00

dgreif approved these changes Mar 23, 2023

View reviewed changes

dgreif merged commit 3126329 into main Mar 23, 2023

dgreif deleted the kh-new-rule-to-flag-invalid-aria-label-format branch March 23, 2023 20:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New rule to flag invalid aria-label format #418

New rule to flag invalid aria-label format #418

khiga8 commented Mar 23, 2023 •

edited

Loading

khiga8 Mar 23, 2023

accessibility-bot commented Mar 23, 2023

khiga8 commented Mar 23, 2023

kendallgassner Mar 23, 2023 •

edited

Loading

khiga8 Mar 23, 2023 •

edited

Loading

khiga8 Mar 23, 2023 •

edited

Loading

kendallgassner Mar 23, 2023

kendallgassner Mar 23, 2023

khiga8 Mar 23, 2023

kendallgassner left a comment

New rule to flag invalid aria-label format #418

New rule to flag invalid aria-label format #418

Conversation

khiga8 commented Mar 23, 2023 • edited Loading

khiga8 Mar 23, 2023

Choose a reason for hiding this comment

accessibility-bot commented Mar 23, 2023

khiga8 commented Mar 23, 2023

kendallgassner Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

khiga8 Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

khiga8 Mar 23, 2023 • edited Loading

Choose a reason for hiding this comment

kendallgassner Mar 23, 2023

Choose a reason for hiding this comment

kendallgassner Mar 23, 2023

Choose a reason for hiding this comment

khiga8 Mar 23, 2023

Choose a reason for hiding this comment

kendallgassner left a comment

Choose a reason for hiding this comment

khiga8 commented Mar 23, 2023 •

edited

Loading

kendallgassner Mar 23, 2023 •

edited

Loading

khiga8 Mar 23, 2023 •

edited

Loading

khiga8 Mar 23, 2023 •

edited

Loading