aria-ease 1.4.2 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,9 +10,11 @@ Out of the box accessibility utility package to develop production ready applica
|
|
|
10
10
|
|
|
11
11
|
## Features
|
|
12
12
|
|
|
13
|
+
Don't spend hours wrestling with accessibility code. Aria-Ease provides pre-built, customizable functions that help you integrate accessibility seamlessly into your development workflow. It simplifies the process of adding essential accessibility features to common UI components like menus, accordions, and checkboxes, e.t.c. This allows you to focus on building great user experiences for everyone.
|
|
14
|
+
|
|
13
15
|
The package currently has support for 5 components: accordions, blocks, checkboxes, menus, radio buttons
|
|
14
16
|
|
|
15
|
-
Add accessibility to menu: menu can be a dropdown,
|
|
17
|
+
Add accessibility to menu: menu can be a dropdown, slide navigation menu, e.t.c. Basically any component that toggles display and has a list of interactive children items. The function creates a focus trap within the menu and focus can be navigated using the arrow keys. The escape key also closes the menu and returns the focus back to the trigger.
|
|
16
18
|
|
|
17
19
|
The makeMenuAccessible function takes two string arguments; the id of the menu, the class name of the children items of the menu. And should only be invoked after the menu has become visible or added to the DOM. When the menu is visible the first item of the menu is in focus and focus can be navigated using the Arrow keys. The Space and Enter keys clicks the menu item if they are buttons or links element. The Escape key closes the menu, and returns the focus back to the button that toggles the menu. The Tab key exits the trap.
|
|
18
20
|
|
|
@@ -20,22 +22,29 @@ The updateMenuTriggerAriaAttributes function take two string arguments; the id o
|
|
|
20
22
|
|
|
21
23
|
#### Usage
|
|
22
24
|
|
|
23
|
-
```
|
|
24
|
-
import {
|
|
25
|
+
```javascript
|
|
26
|
+
import {
|
|
27
|
+
makeMenuAccessible,
|
|
28
|
+
updateMenuTriggerAriaAttributes,
|
|
29
|
+
cleanUpMenuEventListeners,
|
|
30
|
+
} from "aria-ease";
|
|
25
31
|
|
|
26
32
|
const MenuExample = () => {
|
|
27
33
|
const toggleMenuDisplay = (event) => {
|
|
28
|
-
if (
|
|
34
|
+
if (
|
|
35
|
+
event.type === "mousedown" ||
|
|
36
|
+
(event.type === "keydown" && (event.key === "Enter" || event.key === " "))
|
|
37
|
+
) {
|
|
29
38
|
event.preventDefault();
|
|
30
|
-
const menu = document.querySelector(
|
|
31
|
-
if (getComputedStyle(menu).display ===
|
|
32
|
-
menu.style.display =
|
|
33
|
-
makeMenuAccessible(
|
|
34
|
-
updateMenuTriggerAriaAttributes(
|
|
39
|
+
const menu = document.querySelector("#menu-div");
|
|
40
|
+
if (getComputedStyle(menu).display === "none") {
|
|
41
|
+
menu.style.display = "block";
|
|
42
|
+
makeMenuAccessible("menu-div", "menu-interactive-items");
|
|
43
|
+
updateMenuTriggerAriaAttributes("display-button", "Close profile menu");
|
|
35
44
|
} else {
|
|
36
|
-
cleanUpMenuEventListeners(
|
|
37
|
-
menu.style.display =
|
|
38
|
-
updateMenuTriggerAriaAttributes(
|
|
45
|
+
cleanUpMenuEventListeners("menu-div", "menu-interactive-items");
|
|
46
|
+
menu.style.display = "none";
|
|
47
|
+
updateMenuTriggerAriaAttributes("display-button", "Open profile menu");
|
|
39
48
|
}
|
|
40
49
|
}
|
|
41
50
|
};
|
|
@@ -50,38 +59,64 @@ const MenuExample = () => {
|
|
|
50
59
|
aria-expanded={false}
|
|
51
60
|
aria-controls="menu-div"
|
|
52
61
|
aria-label="Display profile menu"
|
|
53
|
-
className=
|
|
62
|
+
className="menu-example-trigger-button"
|
|
54
63
|
onKeyDown={toggleMenuDisplay}
|
|
55
64
|
>
|
|
56
65
|
Display Example Menu
|
|
57
66
|
</button>
|
|
58
|
-
<div
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
67
|
+
<div
|
|
68
|
+
id="menu-div"
|
|
69
|
+
role="menu"
|
|
70
|
+
aria-labelledby="display-button"
|
|
71
|
+
style={{ display: "none", marginTop: "5px" }}
|
|
72
|
+
>
|
|
73
|
+
<button
|
|
74
|
+
role="menuitem"
|
|
75
|
+
className="menu-interactive-items"
|
|
76
|
+
onClick={() => alert("Button clicked")}
|
|
77
|
+
>
|
|
78
|
+
One
|
|
79
|
+
</button>
|
|
80
|
+
<button
|
|
81
|
+
role="menuitem"
|
|
82
|
+
className="menu-interactive-items"
|
|
83
|
+
onClick={() => alert("Button clicked")}
|
|
84
|
+
>
|
|
85
|
+
Two
|
|
86
|
+
</button>
|
|
87
|
+
<button
|
|
88
|
+
role="menuitem"
|
|
89
|
+
className="menu-interactive-items"
|
|
90
|
+
onClick={() => alert("Button clicked")}
|
|
91
|
+
>
|
|
92
|
+
Three
|
|
93
|
+
</button>
|
|
62
94
|
</div>
|
|
63
95
|
</div>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
96
|
+
);
|
|
97
|
+
};
|
|
66
98
|
|
|
67
|
-
export default MenuExample
|
|
99
|
+
export default MenuExample;
|
|
68
100
|
```
|
|
69
101
|
|
|
70
|
-
Add accessibility to block: block can be entire web page body,
|
|
102
|
+
Add accessibility to block: block can be tabs, entire web page body, interactive sliders and carousels e.t.c. Basically any 'block' component that is permanently displayed and has a list of related interractive children items. The function creates a focus trap within the block and the focus can be navigated using the arrow keys. Using the entire page as a block, the page serves as a focus trap, and the page can be navigated from one interactive item to another from the top of the page to the bottom and cycle back.
|
|
71
103
|
|
|
72
104
|
The makeBlockAccessible function takes two string arguments; the id of the block main div, and the class name of the children items of the div. The function should be called on page render, so the event listeners get activated. On click of a button, the clicked button gets focused and the focus can be navigated using the arrow keys.
|
|
73
105
|
|
|
74
106
|
#### Usage
|
|
75
107
|
|
|
76
|
-
```
|
|
77
|
-
import { useEffect } from
|
|
78
|
-
import { makeBlockAccessible } from "aria-ease"
|
|
108
|
+
```javascript
|
|
109
|
+
import { useEffect } from "react";
|
|
110
|
+
import { makeBlockAccessible } from "aria-ease";
|
|
79
111
|
|
|
80
112
|
const BlockExample = () => {
|
|
81
113
|
useEffect(() => {
|
|
82
|
-
const accessibleBlock = makeBlockAccessible(
|
|
114
|
+
const accessibleBlock = makeBlockAccessible(
|
|
115
|
+
"block-div",
|
|
116
|
+
"block-div-interactive-items"
|
|
117
|
+
);
|
|
83
118
|
return accessibleBlock;
|
|
84
|
-
},[])
|
|
119
|
+
}, []);
|
|
85
120
|
|
|
86
121
|
return (
|
|
87
122
|
<div>
|
|
@@ -91,10 +126,10 @@ const BlockExample = () => {
|
|
|
91
126
|
<button className="block-div-interactive-items">Three</button>
|
|
92
127
|
</div>
|
|
93
128
|
</div>
|
|
94
|
-
)
|
|
95
|
-
}
|
|
129
|
+
);
|
|
130
|
+
};
|
|
96
131
|
|
|
97
|
-
export default BlockExample
|
|
132
|
+
export default BlockExample;
|
|
98
133
|
```
|
|
99
134
|
|
|
100
135
|
[Check out more features/functionality in the docs](https://aria-ease.vercel.app/docs)
|
|
@@ -105,6 +140,17 @@ Find a bug? Head on over to [issue page](https://github.com/aria-ease/aria-ease/
|
|
|
105
140
|
|
|
106
141
|
Aria-ease is open-source software by [Isaac Victor](https://isaacvictordev.web.app/)
|
|
107
142
|
|
|
108
|
-
### P.S.
|
|
143
|
+
### P.S. Don't Forget About Focus Styling!
|
|
109
144
|
|
|
110
|
-
|
|
145
|
+
While Aria-Ease significantly aids in making your web applications more accessible, it's essential to remember that visual cues play a crucial role in accessibility. This is especially true for keyboard navigation, where focus styling indicates which element is currently selectable or active.
|
|
146
|
+
|
|
147
|
+
Without clear focus styling, users who rely on keyboard navigation may find it challenging to determine which part of the page they are interacting with. Therefore, we strongly encourage you to implement distinct focus styles for interactive elements on your web pages.
|
|
148
|
+
|
|
149
|
+
Here's a simple CSS example to enhance focus visibility:
|
|
150
|
+
|
|
151
|
+
```css
|
|
152
|
+
:focus {
|
|
153
|
+
outline: 2px solid rgba(0, 91, 211, 1); /* Blue outline for high contrast */
|
|
154
|
+
outline-offset: 1px;
|
|
155
|
+
}
|
|
156
|
+
```
|