Skip to content

Commit 065a3ff

Browse files
accessibility feature
1 parent 84ec3ea commit 065a3ff

File tree

1 file changed

+28
-1
lines changed

1 file changed

+28
-1
lines changed

README.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ import { FetchLoading } from 'fetch-loading'
2020
<FetchLoading />
2121
2222
### with no arguments being passed,
23-
### the animation will fall back to its default color #52525c
23+
### the animation will fall back to its default color #52525c,
24+
### and it will not contain any accessible attributes
2425
2526
...
2627
@@ -49,3 +50,29 @@ You can also pass any Hex- / RGB- or RGBA-value as an argument for the `theme` p
4950
```
5051

5152
![Theme Fetch Loading Animation Preview](https://github.com/user-attachments/assets/e0179995-309a-46f0-988f-70bf3e2ce9d6)
53+
54+
By passing a descriptive value for `ariaLabel`, the following properties are added:
55+
56+
```
57+
...
58+
59+
<FetchLoading ariaLabel="Loading" />
60+
61+
### role="status"
62+
### aria-live="polite"
63+
### aria-label="Loading"
64+
65+
...
66+
```
67+
68+
This results in screen reader users hearing “Status - Loading” being read aloud.
69+
70+
Of course, `theme` and `ariaLabel` can also be used simultaneously:
71+
72+
```
73+
...
74+
75+
<FetchLoading ariaLabel="Loading" theme="#ffe98c"/>
76+
77+
...
78+
```

0 commit comments

Comments
 (0)