aria-ease 1.5.0 → 1.5.2
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 +3 -3
- package/package.json +1 -1
- package/src/handleKeyPress.js +2 -2
- package/src/handleKeyPress.ts +3 -4
package/README.md
CHANGED
|
@@ -10,9 +10,9 @@ 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 functions that help you integrate accessibility seamlessly into your development workflow. It simplifies the process of adding essential accessibility features (e.g. assistive capability, keyboard navigation, focus management) to common UI components like menus, accordions,
|
|
13
|
+
Don't spend hours wrestling with accessibility code. Aria-Ease provides pre-built functions that help you integrate accessibility seamlessly into your development workflow. It simplifies the process of adding essential accessibility features (e.g. assistive capability, keyboard navigation, focus management) to common UI components like menus, accordions, checkboxes, e.t.c. This allows you to focus on building great user experiences for everyone.
|
|
14
14
|
|
|
15
|
-
The package currently has support for 5 components: accordions, blocks, checkboxes, menus, radios, toggle butttons
|
|
15
|
+
The package currently has support for 5 components: accordions, blocks, checkboxes, menus, radios, toggle butttons.
|
|
16
16
|
|
|
17
17
|
Add accessibility to menu: menu can be a dropdown, combo box, 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.
|
|
18
18
|
|
|
@@ -99,7 +99,7 @@ const MenuExample = () => {
|
|
|
99
99
|
export default MenuExample;
|
|
100
100
|
```
|
|
101
101
|
|
|
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
|
|
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 interactive 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 cycled back.
|
|
103
103
|
|
|
104
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.
|
|
105
105
|
|
package/package.json
CHANGED
package/src/handleKeyPress.js
CHANGED
|
@@ -11,7 +11,7 @@ export function handleKeyPress(event, elementItems, elementItemIndex, menuElemen
|
|
|
11
11
|
switch (event.key) {
|
|
12
12
|
case 'ArrowUp':
|
|
13
13
|
case 'ArrowLeft':
|
|
14
|
-
if ((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')
|
|
14
|
+
if (((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')) || (elementItems.item(elementItemIndex).tagName === 'INPUT' && (elementItems.item(elementItemIndex).type !== 'text' && elementItems.item(elementItemIndex).type !== 'email' && elementItems.item(elementItemIndex).type !== 'password' && elementItems.item(elementItemIndex).type !== 'tel' && elementItems.item(elementItemIndex).type !== 'number'))) {
|
|
15
15
|
event.preventDefault();
|
|
16
16
|
if (elementItemIndex === 0) {
|
|
17
17
|
elementItems.item(elementItems.length - 1).focus();
|
|
@@ -34,7 +34,7 @@ export function handleKeyPress(event, elementItems, elementItemIndex, menuElemen
|
|
|
34
34
|
break;
|
|
35
35
|
case 'ArrowDown':
|
|
36
36
|
case 'ArrowRight':
|
|
37
|
-
if ((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')
|
|
37
|
+
if (((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')) || (elementItems.item(elementItemIndex).tagName === 'INPUT' && (elementItems.item(elementItemIndex).type !== 'text' && elementItems.item(elementItemIndex).type !== 'email' && elementItems.item(elementItemIndex).type !== 'password' && elementItems.item(elementItemIndex).type !== 'tel' && elementItems.item(elementItemIndex).type !== 'number'))) {
|
|
38
38
|
event.preventDefault();
|
|
39
39
|
if (elementItemIndex === elementItems.length - 1) {
|
|
40
40
|
elementItems.item(0).focus();
|
package/src/handleKeyPress.ts
CHANGED
|
@@ -15,7 +15,7 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
|
|
|
15
15
|
switch(event.key) {
|
|
16
16
|
case 'ArrowUp':
|
|
17
17
|
case 'ArrowLeft':
|
|
18
|
-
if((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')
|
|
18
|
+
if(((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')) || (elementItems.item(elementItemIndex).tagName === 'INPUT' && (elementItems.item(elementItemIndex).type !== 'text' && elementItems.item(elementItemIndex).type !== 'email' && elementItems.item(elementItemIndex).type !== 'password' && elementItems.item(elementItemIndex).type !== 'tel' && elementItems.item(elementItemIndex).type !== 'number'))) {
|
|
19
19
|
event.preventDefault()
|
|
20
20
|
if (elementItemIndex === 0) {
|
|
21
21
|
elementItems.item(elementItems.length - 1).focus();
|
|
@@ -36,7 +36,7 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
|
|
|
36
36
|
break;
|
|
37
37
|
case 'ArrowDown':
|
|
38
38
|
case 'ArrowRight':
|
|
39
|
-
if((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')
|
|
39
|
+
if(((elementItems.item(elementItemIndex).tagName !== 'INPUT') && (elementItems.item(elementItemIndex).tagName !== 'TEXTAREA')) || (elementItems.item(elementItemIndex).tagName === 'INPUT' && (elementItems.item(elementItemIndex).type !== 'text' && elementItems.item(elementItemIndex).type !== 'email' && elementItems.item(elementItemIndex).type !== 'password' && elementItems.item(elementItemIndex).type !== 'tel' && elementItems.item(elementItemIndex).type !== 'number'))) {
|
|
40
40
|
event.preventDefault()
|
|
41
41
|
if (elementItemIndex === elementItems.length - 1) {
|
|
42
42
|
elementItems.item(0).focus();
|
|
@@ -51,8 +51,7 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
|
|
|
51
51
|
elementItems.item(0).focus();
|
|
52
52
|
} else {
|
|
53
53
|
elementItems.item(elementItemIndex + 1).focus();
|
|
54
|
-
}
|
|
55
|
-
|
|
54
|
+
}
|
|
56
55
|
}
|
|
57
56
|
}
|
|
58
57
|
break;
|