Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit c1f8175

Browse filesBrowse files
committed
Update docs to be more helpful
1 parent 51ce6c5 commit c1f8175
Copy full SHA for c1f8175

File tree

Expand file treeCollapse file tree

2 files changed

+25
-4
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+25
-4
lines changed

‎docs/rules/accessibility/aria-label-is-well-formatted.md

Copy file name to clipboardExpand all lines: docs/rules/accessibility/aria-label-is-well-formatted.md
+23-3Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,18 @@
22

33
## Rule Details
44

5-
`[aria-label]` content should be formatted in the same way you would visual text. Please use sentence case.
5+
`[aria-label]` content should be formatted in the same way you would visual text.
66

7-
Do not kebab case the words like you would an HTML ID. An `aria-label` is different from `aria-labelledby`.
8-
An `aria-label` is not an ID, and should be formatted as human-friendly text.
7+
Keep the following practices in mind:
8+
9+
- Use sentence case.
10+
- Do not kebab case the words like you would an HTML ID. An `aria-label` is different from `aria-labelledby`. An `aria-label` represents the name of a control, and has the same purpsoe as a visual label would for screen reader users. Therefore, it should be formatted as human-friendly text.
11+
- Do not use line-break characters like, `
`. An accessible name should be concise to start with.
12+
- Do not set the `aria-label` to a URL. Instead, use an appropriate name.
13+
14+
## Resources
15+
16+
- [Staff only: Guidance on naming controls](https://github.com/github/accessibility-playbook/blob/main/content/link-and-button-guidance.mdx#guidance-on-naming-controls)
917

1018
## Config
1119

@@ -35,6 +43,14 @@ If you determine that there are valid scenarios for `aria-label` to start with l
3543
<button aria-label="button-1">
3644
```
3745

46+
```erb
47+
<button aria-label="Go to my&#10;website.">
48+
```
49+
50+
```erb
51+
<a href="https://github.com/shopify/erb-lint"> aria-label="github.com/shopify/erb-lint"></a>
52+
```
53+
3854
### **Correct** code for this rule 👍
3955

4056
```erb
@@ -44,3 +60,7 @@ If you determine that there are valid scenarios for `aria-label` to start with l
4460
```erb
4561
<button aria-label="Close">
4662
````
63+
64+
```erb
65+
<a href="https://github.com/shopify/erb-lint"> aria-label="Shopify/erb-lint on GitHub"></a>
66+
```

‎test/linters/accessibility/aria_label_is_well_formatted_test.rb

Copy file name to clipboardExpand all lines: test/linters/accessibility/aria_label_is_well_formatted_test.rb
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,11 @@ def test_warns_when_aria_label_starts_with_downcase
1313
<button aria-label="check-box-1" ></button>
1414
<button aria-label="ok" ></button>
1515
<button aria-label="no" ></button>
16+
<button aria-label="Go to my&#10;website." ></button>
1617
HTML
1718
@linter.run(processed_source)
1819

19-
assert_equal 4, @linter.offenses.count
20+
assert_equal 5, @linter.offenses.count
2021
end
2122

2223
def test_does_not_warn_when_aria_labelledby_starts_with_downcase

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.