@cocreate/aria 1.6.0 → 2.0.0
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/.github/FUNDING.yml +1 -1
- package/.github/workflows/automated.yml +18 -7
- package/CHANGELOG.md +46 -20
- package/CONTRIBUTING.md +7 -7
- package/README.md +132 -17
- package/demo/index.html +1 -1
- package/docs/index.html +7 -7
- package/package.json +8 -7
- package/src/index.js +1242 -353
package/.github/FUNDING.yml
CHANGED
|
@@ -12,16 +12,27 @@ jobs:
|
|
|
12
12
|
- name: Checkout repository
|
|
13
13
|
uses: actions/checkout@v7
|
|
14
14
|
|
|
15
|
-
- name: Sync package.json description to GitHub
|
|
15
|
+
- name: Sync package.json description and keywords to GitHub repository
|
|
16
16
|
env:
|
|
17
|
-
|
|
17
|
+
GH_TOKEN: ${{ secrets.GITHUB }}
|
|
18
18
|
run: |
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
if [ ! -f package.json ]; then
|
|
20
|
+
echo "No package.json found; skipping repository metadata sync."
|
|
21
|
+
exit 0
|
|
22
|
+
fi
|
|
23
|
+
|
|
24
|
+
DESCRIPTION=$(jq -r '.description // empty' package.json)
|
|
25
|
+
if [ -n "$DESCRIPTION" ]; then
|
|
26
|
+
gh api --method PATCH "repos/${GITHUB_REPOSITORY}" -f description="$DESCRIPTION"
|
|
27
|
+
else
|
|
28
|
+
echo "No package description found; leaving GitHub description unchanged."
|
|
29
|
+
fi
|
|
30
|
+
|
|
31
|
+
if jq -e '.keywords | type == "array"' package.json >/dev/null; then
|
|
32
|
+
TOPICS=$(jq -c '.keywords | map(ascii_downcase | gsub("[^a-z0-9-]+"; "-") | gsub("(^-+|-+$)"; "") | .[0:50]) | map(select(length > 0)) | unique | .[0:20]' package.json)
|
|
33
|
+
printf '{"names":%s}' "$TOPICS" | gh api --method PUT -H "Accept: application/vnd.github+json" "repos/${GITHUB_REPOSITORY}/topics" --input -
|
|
23
34
|
else
|
|
24
|
-
echo "No
|
|
35
|
+
echo "No package keywords found; leaving GitHub topics unchanged."
|
|
25
36
|
fi
|
|
26
37
|
|
|
27
38
|
release:
|
package/CHANGELOG.md
CHANGED
|
@@ -1,64 +1,90 @@
|
|
|
1
|
-
|
|
1
|
+
# [2.0.0](https://github.com/CoCreateJS/aria/compare/v1.3.2...v2.0.0) (2026-11-02)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add Deno specific entries to .gitignore ([e4ecba9](https://github.com/CoCreateJS/aria/commit/e4ecba9483cdb38446b691a41e3f48751a3d76a9))
|
|
7
|
+
* avoid closing unconfigured popup triggers ([bc08a16](https://github.com/CoCreateJS/aria/commit/bc08a169bd2e4b6cb37725a72bc7f96a9feaea58))
|
|
8
|
+
* bump [@cocreate](https://github.com/cocreate) dependencies ([1a13ab0](https://github.com/CoCreateJS/aria/commit/1a13ab0b08b55fc4876f95fd6ea6609915f7d022))
|
|
9
|
+
* bump versions ([c2463fa](https://github.com/CoCreateJS/aria/commit/c2463faa4f8d885ef4101e50436ba68d7d13d204))
|
|
10
|
+
* bump versions ([816a7b0](https://github.com/CoCreateJS/aria/commit/816a7b0d5a05db62fc64053a47d053602f15eac6))
|
|
11
|
+
* enhance ARIA control initialization and selection handling ([1f89432](https://github.com/CoCreateJS/aria/commit/1f89432fa0f85d06c129d1e34a27280dc8a93119))
|
|
12
|
+
* preserve native popup interactions ([8c2574b](https://github.com/CoCreateJS/aria/commit/8c2574bd1646f6e5e2ecfcab799f32204f38e8b2))
|
|
13
|
+
* remove trailing slash from node_modules entry in .gitignore ([0afb83e](https://github.com/CoCreateJS/aria/commit/0afb83e605bec7eaeeac4278b4ad18a19c747313))
|
|
14
|
+
* update git url ([b1a4ee6](https://github.com/CoCreateJS/aria/commit/b1a4ee6adbb3289a0add83f4d18a00675729f128))
|
|
15
|
+
* update GitHub Actions to use latest versions and sync package.json description ([ab3a85b](https://github.com/CoCreateJS/aria/commit/ab3a85b7d4a384f423ed6cd6cc21d2ac16867d64))
|
|
7
16
|
|
|
8
|
-
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* align CoCreate repository and package naming ([39a5de4](https://github.com/CoCreateJS/aria/commit/39a5de421c7a6bec3a9c90745ce21bea8718d594))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### BREAKING CHANGES
|
|
24
|
+
|
|
25
|
+
* consumers must use the renamed CoCreate package and repository identities; the previous prefixed names are no longer supported.
|
|
26
|
+
|
|
27
|
+
## [1.3.2](https://github.com/CoCreateJS/CoCreate-aria/compare/v1.3.1...v1.3.2) (2026-07-19)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### Bug Fixes
|
|
31
|
+
|
|
32
|
+
* set default branch to main ([36e8f2e](https://github.com/CoCreateJS/CoCreate-aria/commit/36e8f2eaa4fd0a7e4e871737f93a964aaea0f373))
|
|
33
|
+
|
|
34
|
+
## [1.3.1](https://github.com/CoCreateJS/CoCreate-aria/compare/v1.3.0...v1.3.1) (2026-07-17)
|
|
9
35
|
|
|
10
36
|
|
|
11
37
|
### Bug Fixes
|
|
12
38
|
|
|
13
|
-
* bump dependencies ([81718d0](https://github.com/
|
|
39
|
+
* bump dependencies ([81718d0](https://github.com/CoCreateJS/CoCreate-aria/commit/81718d04eb9806d2d841f0728af775465595c2e6))
|
|
14
40
|
|
|
15
|
-
# [1.3.0](https://github.com/
|
|
41
|
+
# [1.3.0](https://github.com/CoCreateJS/CoCreate-aria/compare/v1.2.1...v1.3.0) (2026-07-17)
|
|
16
42
|
|
|
17
43
|
|
|
18
44
|
### Features
|
|
19
45
|
|
|
20
|
-
* update automated workflow and release configuration for improved semantic release handling ([496feb1](https://github.com/
|
|
46
|
+
* update automated workflow and release configuration for improved semantic release handling ([496feb1](https://github.com/CoCreateJS/CoCreate-aria/commit/496feb179258d215ed33d644e0e412712bf9b2a7))
|
|
21
47
|
|
|
22
|
-
## [1.2.1](https://github.com/
|
|
48
|
+
## [1.2.1](https://github.com/CoCreateJS/CoCreate-aria/compare/v1.2.0...v1.2.1) (2026-07-11)
|
|
23
49
|
|
|
24
50
|
|
|
25
51
|
### Bug Fixes
|
|
26
52
|
|
|
27
|
-
* bump package versions ([2ad08d0](https://github.com/
|
|
28
|
-
* removed post install and add add packages to apprved list ([100c02b](https://github.com/
|
|
29
|
-
* semantic version handling ([a64a089](https://github.com/
|
|
30
|
-
* update aria-open and aria-close attribute handling to treat them as boolean-like ([608bb59](https://github.com/
|
|
53
|
+
* bump package versions ([2ad08d0](https://github.com/CoCreateJS/CoCreate-aria/commit/2ad08d0434fd16624190902a3da18d3e1aabdee2))
|
|
54
|
+
* removed post install and add add packages to apprved list ([100c02b](https://github.com/CoCreateJS/CoCreate-aria/commit/100c02b93154001d03f2cb9ce6da41ea9c337df2))
|
|
55
|
+
* semantic version handling ([a64a089](https://github.com/CoCreateJS/CoCreate-aria/commit/a64a089292f5d7dd86d6439066081f8d701c8404))
|
|
56
|
+
* update aria-open and aria-close attribute handling to treat them as boolean-like ([608bb59](https://github.com/CoCreateJS/CoCreate-aria/commit/608bb59372d3fc0dabbcda96f8be4ef4e34d8405))
|
|
31
57
|
|
|
32
|
-
# [1.2.0](https://github.com/
|
|
58
|
+
# [1.2.0](https://github.com/CoCreateJS/CoCreate-aria/compare/v1.1.1...v1.2.0) (2026-02-09)
|
|
33
59
|
|
|
34
60
|
|
|
35
61
|
### Bug Fixes
|
|
36
62
|
|
|
37
|
-
* root factory variable Module ([6f35875](https://github.com/
|
|
63
|
+
* root factory variable Module ([6f35875](https://github.com/CoCreateJS/CoCreate-aria/commit/6f358757c9917ec52c397a35bc6f5e97976de6ed))
|
|
38
64
|
|
|
39
65
|
|
|
40
66
|
### Features
|
|
41
67
|
|
|
42
|
-
* aria-attribute-group for tab navigation grouping to deactivate state of other tabs in the group ([12822c0](https://github.com/
|
|
68
|
+
* aria-attribute-group for tab navigation grouping to deactivate state of other tabs in the group ([12822c0](https://github.com/CoCreateJS/CoCreate-aria/commit/12822c04fbe41672833852018242a58c179b9229))
|
|
43
69
|
|
|
44
|
-
## [1.1.1](https://github.com/
|
|
70
|
+
## [1.1.1](https://github.com/CoCreateJS/CoCreate-aria/compare/v1.1.0...v1.1.1) (2025-12-26)
|
|
45
71
|
|
|
46
72
|
|
|
47
73
|
### Bug Fixes
|
|
48
74
|
|
|
49
|
-
* update worklow ([32b1cff](https://github.com/
|
|
75
|
+
* update worklow ([32b1cff](https://github.com/CoCreateJS/CoCreate-aria/commit/32b1cffdce4f66ab078407cae412a5583afb92a4))
|
|
50
76
|
|
|
51
|
-
# [1.1.0](https://github.com/
|
|
77
|
+
# [1.1.0](https://github.com/CoCreateJS/CoCreate-aria/compare/v1.0.0...v1.1.0) (2025-11-16)
|
|
52
78
|
|
|
53
79
|
|
|
54
80
|
### Features
|
|
55
81
|
|
|
56
|
-
* Enhance popup close conditions and aria attributes handling ([608da59](https://github.com/
|
|
57
|
-
* Initialize aria controls and enhance event handling ([a62f790](https://github.com/
|
|
82
|
+
* Enhance popup close conditions and aria attributes handling ([608da59](https://github.com/CoCreateJS/CoCreate-aria/commit/608da59ac5f179a2c9ddf27d2657c2f28d355766))
|
|
83
|
+
* Initialize aria controls and enhance event handling ([a62f790](https://github.com/CoCreateJS/CoCreate-aria/commit/a62f79079a0c889b8d395406df2ef4a704ac6552))
|
|
58
84
|
|
|
59
85
|
# 1.0.0 (2025-08-25)
|
|
60
86
|
|
|
61
87
|
|
|
62
88
|
### Features
|
|
63
89
|
|
|
64
|
-
* Initial Release ([ea0d83d](https://github.com/
|
|
90
|
+
* Initial Release ([ea0d83d](https://github.com/CoCreateJS/CoCreate-aria/commit/ea0d83d31949a2cd9d66a7dd784f6622f32258ef))
|
package/CONTRIBUTING.md
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
# Contributing to CoCreate-aria
|
|
2
2
|
|
|
3
|
-
This project is work of [many contributors](https://github.com/
|
|
4
|
-
You're encouraged to submit [pull requests](https://github.com/
|
|
5
|
-
[propose features and discuss issues](https://github.com/
|
|
3
|
+
This project is work of [many contributors](https://github.com/CoCreateJS/aria/graphs/contributors).
|
|
4
|
+
You're encouraged to submit [pull requests](https://github.com/CoCreateJS/aria/pulls),
|
|
5
|
+
[propose features and discuss issues](https://github.com/CoCreateJS/aria/issues).
|
|
6
6
|
|
|
7
7
|
In the examples below, substitute your Github username for `contributor` in URLs.
|
|
8
8
|
|
|
9
9
|
## Fork the Project
|
|
10
10
|
|
|
11
|
-
Fork the [project on Github](https://github.com/
|
|
11
|
+
Fork the [project on Github](https://github.com/CoCreateJS/aria) and check out your copy.
|
|
12
12
|
|
|
13
13
|
```
|
|
14
14
|
git clone https://github.com/contributor/CoCreate-aria.git
|
|
15
15
|
cd CoCreate-aria
|
|
16
|
-
git remote add upstream https://github.com/
|
|
16
|
+
git remote add upstream https://github.com/CoCreateJS/aria.git
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## Create a Topic Branch
|
|
@@ -70,7 +70,7 @@ git push origin my-feature-branch
|
|
|
70
70
|
|
|
71
71
|
## Make a Pull Request
|
|
72
72
|
|
|
73
|
-
Go to [https://github.com/
|
|
73
|
+
Go to [https://github.com/CoCreateJS/aria](https://github.com/CoCreateJS/aria) and select your feature branch.
|
|
74
74
|
Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
|
|
75
75
|
|
|
76
76
|
## Rebase
|
|
@@ -88,7 +88,7 @@ git push origin my-feature-branch -f
|
|
|
88
88
|
Update the [CHANGELOG](CHANGELOG.md) with the pull request number. A typical entry looks as follows.
|
|
89
89
|
|
|
90
90
|
```
|
|
91
|
-
* [#123](https://github.com/
|
|
91
|
+
* [#123](https://github.com/CoCreateJS/industry/pull/123): Reticulated splines - [@contributor](https://github.com/contributor).
|
|
92
92
|
```
|
|
93
93
|
|
|
94
94
|
Amend your previous commit and force push the changes.
|
package/README.md
CHANGED
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
# CoCreate-aria
|
|
2
2
|
|
|
3
|
-
Orchestrate dynamic UI behavior and ARIA state with event-driven action chains, configured via HTML5 attributes or the JavaScript API. Take it for a spin in our [playground!](https://
|
|
3
|
+
Orchestrate dynamic UI behavior and ARIA state with event-driven action chains, configured via HTML5 attributes or the JavaScript API. Take it for a spin in our [playground!](https://CoCreateJS.com/docs/aria)
|
|
4
4
|
|
|
5
|
-
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
|
|
13
13
|
|
|
14
|
-
## [Docs & Demo](https://
|
|
14
|
+
## [Docs & Demo](https://CoCreateJS.com/docs/aria)
|
|
15
15
|
|
|
16
|
-
For a complete guide and working demo refer to the [doumentation](https://
|
|
16
|
+
For a complete guide and working demo refer to the [doumentation](https://CoCreateJS.com/docs/aria)
|
|
17
17
|
|
|
18
18
|
## CDN
|
|
19
19
|
|
|
20
20
|
```html
|
|
21
|
-
<script src="https://cdn.
|
|
21
|
+
<script src="https://cdn.CoCreateJS.com/aria/latest/CoCreate-aria.min.js"></script>
|
|
22
22
|
```
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<script src="https://cdn.
|
|
25
|
+
<script src="https://cdn.CoCreateJS.com/aria/latest/CoCreate-aria.min.css"></script>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## NPM
|
|
@@ -50,13 +50,13 @@ $ yarn install @cocreate/aria
|
|
|
50
50
|
|
|
51
51
|
# Announcements
|
|
52
52
|
|
|
53
|
-
All updates to this library are documented in our [CHANGELOG](https://github.com/
|
|
53
|
+
All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreateJS/aria/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreateJS/aria/releases). You may also subscribe to email for releases and breaking changes.
|
|
54
54
|
|
|
55
55
|
<a name="roadmap"></a>
|
|
56
56
|
|
|
57
57
|
# Roadmap
|
|
58
58
|
|
|
59
|
-
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/
|
|
59
|
+
If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreateJS/aria/issues) and [pull requests](https://github.com/CoCreateJS/aria/pulls). We would love to hear your feedback.
|
|
60
60
|
|
|
61
61
|
<a name="about"></a>
|
|
62
62
|
|
|
@@ -64,7 +64,7 @@ If you are interested in the future direction of this project, please take a loo
|
|
|
64
64
|
|
|
65
65
|
CoCreate-aria is guided and supported by the CoCreate Developer Experience Team.
|
|
66
66
|
|
|
67
|
-
Please Email the Developer Experience Team [here](mailto:develop@
|
|
67
|
+
Please Email the Developer Experience Team [here](mailto:develop@CoCreateJS.com) in case of any queries.
|
|
68
68
|
|
|
69
69
|
CoCreate-aria is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
|
|
70
70
|
|
|
@@ -72,9 +72,9 @@ CoCreate-aria is maintained and funded by CoCreate. The names and logos for CoCr
|
|
|
72
72
|
|
|
73
73
|
# How to Contribute
|
|
74
74
|
|
|
75
|
-
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/
|
|
75
|
+
We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreateJS/aria/blob/master/CONTRIBUTING.md) guide for details.
|
|
76
76
|
|
|
77
|
-
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/
|
|
77
|
+
We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreateJS/aria/issues) and [pull requests](https://github.com/CoCreateJS/aria/pulls) or merely upvote or comment on existing issues or pull requests.
|
|
78
78
|
|
|
79
79
|
We appreciate your continued support, thank you!
|
|
80
80
|
|
|
@@ -82,4 +82,119 @@ We appreciate your continued support, thank you!
|
|
|
82
82
|
|
|
83
83
|
# License
|
|
84
84
|
|
|
85
|
-
[The MIT License (MIT)](https://github.com/
|
|
85
|
+
[The MIT License (MIT)](https://github.com/CoCreateJS/aria/blob/master/LICENSE)
|
|
86
|
+
|
|
87
|
+
## Toggle buttons and selection groups
|
|
88
|
+
|
|
89
|
+
Use `aria-pressed` on a button for an independent toggle. Related toggles can
|
|
90
|
+
sit inside `role="group"`; grouping does not make them mutually exclusive.
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<div role="group" aria-label="Text formatting">
|
|
94
|
+
<button type="button" aria-pressed="false">Bold</button>
|
|
95
|
+
<button type="button" aria-pressed="false">Italic</button>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
For one selected option, use custom radios inside a labelled `radiogroup`.
|
|
100
|
+
These controls do not need `aria-controls` or a panel to display.
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<div role="radiogroup" aria-label="API category">
|
|
104
|
+
<button type="button" role="radio" aria-checked="true">All</button>
|
|
105
|
+
<button type="button" role="radio" aria-checked="false">Storage</button>
|
|
106
|
+
<button type="button" role="radio" aria-checked="false">Cloud</button>
|
|
107
|
+
</div>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Activating a radio selects it and deselects its siblings. Arrow keys move and
|
|
111
|
+
select, Home/End jump to the first/last available item, and Space/Enter activate.
|
|
112
|
+
Inside a toolbar, arrow keys move focus without selecting. Nested radio groups
|
|
113
|
+
are independent. Disabled and hidden items are skipped during group navigation.
|
|
114
|
+
|
|
115
|
+
Custom `role="checkbox"` and `role="switch"` controls toggle `aria-checked`.
|
|
116
|
+
Native checkbox and radio inputs retain native behavior. Toggle and custom
|
|
117
|
+
checked controls synchronize their `active` class with the state attribute;
|
|
118
|
+
external attribute changes and dynamically inserted controls are supported.
|
|
119
|
+
An initial `mixed` state is preserved until activation, which selects `true`.
|
|
120
|
+
|
|
121
|
+
Controls handled by this module block activation when disabled or when
|
|
122
|
+
`aria-disabled="true"`. Existing tab panel behavior continues to use
|
|
123
|
+
`aria-selected` with its `tablist` and `aria-controls` targets.
|
|
124
|
+
|
|
125
|
+
CoCreate links selection controls that reference the same `aria-controls` target.
|
|
126
|
+
Clicking a custom radio clears linked pressed/checked controls; activating a
|
|
127
|
+
linked toggle clears the radios while preserving other toggles. Mark a radio
|
|
128
|
+
with `aria-default="true"` (or an empty `aria-default`) to select it when the
|
|
129
|
+
last toggle is cleared. Without a default, all controls may remain unselected.
|
|
130
|
+
`aria-default="false"` disables fallback; disabled radios are not eligible.
|
|
131
|
+
If multiple eligible defaults are declared, no fallback is selected.
|
|
132
|
+
`aria-checked` describes current selection independently of this default.
|
|
133
|
+
`aria-default` is a CoCreate extension, not a standard ARIA attribute.
|
|
134
|
+
This is CoCreate behavior, not native ARIA grouping. Tabs and disclosure
|
|
135
|
+
controls remain separate, and the target's visibility is unchanged.
|
|
136
|
+
|
|
137
|
+
Use `aria-default="next"` for a moving default. Its initial radio is the
|
|
138
|
+
starting fallback. Selecting another radio sharing the controlled target
|
|
139
|
+
removes the marker from the previous radio and places it on the selected one.
|
|
140
|
+
"Next" means the next radio selected by the user, including keyboard activation,
|
|
141
|
+
not the next radio in DOM order. Pressed buttons and checked toggles never
|
|
142
|
+
receive or move this marker. Clearing the last toggle returns to the radio
|
|
143
|
+
currently carrying it. A fixed `aria-default="true"` does not move.
|
|
144
|
+
Declare one default per linked set; use either a fixed or a moving default.
|
|
145
|
+
The marker lives in DOM attributes and is not automatically persisted across
|
|
146
|
+
reloads. Direct changes to `aria-checked` do not transfer it.
|
|
147
|
+
|
|
148
|
+
```html
|
|
149
|
+
<div role="group" aria-label="Results mode">
|
|
150
|
+
<div role="radiogroup" aria-label="Preset">
|
|
151
|
+
<button role="radio" aria-checked="true" aria-controls="results" aria-default="next">All</button>
|
|
152
|
+
<button role="radio" aria-checked="false" aria-controls="results">Recommended</button>
|
|
153
|
+
</div>
|
|
154
|
+
<button aria-pressed="false" aria-controls="results">Storage</button>
|
|
155
|
+
<button aria-pressed="false" aria-controls="results">Cloud</button>
|
|
156
|
+
</div>
|
|
157
|
+
<div id="results"></div>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Native `input[type="radio"]` and `input[type="checkbox"]` with `aria-controls`
|
|
161
|
+
also participate in linked selection and fixed/moving defaults. They use their
|
|
162
|
+
native `checked` property and keyboard behavior, without redundant `aria-checked`
|
|
163
|
+
or `aria-pressed` attributes. When coordination changes another native input,
|
|
164
|
+
CoCreate dispatches `input` and `change` after the linked values are updated;
|
|
165
|
+
unselected radios do not dispatch these notifications.
|
|
166
|
+
|
|
167
|
+
## Multiselectable grids
|
|
168
|
+
|
|
169
|
+
An element with `role="grid" aria-multiselectable="true"` scopes selection to
|
|
170
|
+
its descendant rows. Mark selectable rows with `role="row"` and
|
|
171
|
+
`aria-selected="false"`; include a `gridcell` in each row. Native `table`, `tr`,
|
|
172
|
+
and `td` elements provide the corresponding row and cell structure. The module
|
|
173
|
+
sets one row in the grid's tab sequence and leaves selection on the row's
|
|
174
|
+
`aria-selected` attribute so other actions can query it directly.
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<div role="grid" aria-label="Files" aria-multiselectable="true">
|
|
178
|
+
<div role="row" aria-selected="false">
|
|
179
|
+
<div role="gridcell">Document A</div>
|
|
180
|
+
</div>
|
|
181
|
+
<div role="row" aria-selected="false">
|
|
182
|
+
<div role="gridcell">Document B</div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
Click selects one row; Control/Command-click toggles one row; Shift-click
|
|
188
|
+
selects a range; and Control/Command-Shift-click adds a range. Arrow keys and
|
|
189
|
+
Home/End move focus without changing selection. Space toggles the focused row,
|
|
190
|
+
Shift with an arrow extends selection, Control/Command-A selects the loaded
|
|
191
|
+
rows, and Escape clears them. These interactions do not activate links or other
|
|
192
|
+
controls inside a row. Selection actions are scoped to the nearest grid.
|
|
193
|
+
|
|
194
|
+
A grid row can instead contain a native checkbox. Its own `checked` state is
|
|
195
|
+
the selection state; the row does not need `aria-selected`. Checkbox clicks
|
|
196
|
+
toggle independently, including Control/Command-click. Shift-click applies
|
|
197
|
+
the clicked checkbox's new state to the range since the last checkbox click.
|
|
198
|
+
Checkboxes with the same `name` form a range within one grid. CoCreate Aria
|
|
199
|
+
does not synchronize checkbox `checked` with row `aria-selected`; an app can
|
|
200
|
+
bind them explicitly when it needs both.
|
package/demo/index.html
CHANGED
|
@@ -52,6 +52,6 @@
|
|
|
52
52
|
|
|
53
53
|
<!--<script src="../dist/CoCreate-aria.js" ></script>-->
|
|
54
54
|
<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
|
|
55
|
-
<script src="https://
|
|
55
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
56
56
|
</body>
|
|
57
57
|
</html>
|
package/docs/index.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
rel="icon"
|
|
10
10
|
type="image/png"
|
|
11
11
|
sizes="32x32"
|
|
12
|
-
href="https://
|
|
12
|
+
href="https://CoCreateJS.com/images/favicon.ico" />
|
|
13
13
|
<meta
|
|
14
14
|
name="description"
|
|
15
15
|
content="A convenient chain handler allows user to chain multiple components together. When one aria is complete next one will start untill all aria completed." />
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<meta name="robots" content="index,follow" />
|
|
20
20
|
<meta
|
|
21
21
|
property="og:image"
|
|
22
|
-
content="https://cdn.
|
|
22
|
+
content="https://cdn.CoCreateJS.com/docs/aria.png" />
|
|
23
23
|
|
|
24
24
|
<link
|
|
25
25
|
rel="stylesheet"
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
share-title="CoCreate aria"
|
|
70
70
|
share-height="600"
|
|
71
71
|
share-width="700"
|
|
72
|
-
share-media="https://cdn.
|
|
72
|
+
share-media="https://cdn.CoCreateJS.com/docs/aria.png"
|
|
73
73
|
hover="display:block!important"
|
|
74
74
|
hover-query=".social-networks">
|
|
75
75
|
<div class="display:none social-networks">
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
></a>
|
|
108
108
|
</div>
|
|
109
109
|
<a
|
|
110
|
-
href="https://github.com/
|
|
110
|
+
href="https://github.com/CoCreateJS/CoCreate-aria"
|
|
111
111
|
target="_blank"
|
|
112
112
|
class=""
|
|
113
113
|
><i src="/assets/svg/github.svg"></i
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
<p class="padding:10px_0px line-height:1.5">
|
|
149
149
|
Or you can use cdn link:
|
|
150
150
|
</p>
|
|
151
|
-
<pre><code class="language-html"><script>https://cdn.
|
|
151
|
+
<pre><code class="language-html"><script>https://cdn.CoCreateJS.com/aria/latest/CoCreate-aria.min.js</script></code></pre>
|
|
152
152
|
|
|
153
153
|
<div
|
|
154
154
|
id="aria-usage"
|
|
@@ -336,12 +336,12 @@
|
|
|
336
336
|
</div>
|
|
337
337
|
</div>
|
|
338
338
|
<button
|
|
339
|
-
href="https://github.com/
|
|
339
|
+
href="https://github.com/CoCreateJS/CoCreate-aria/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
|
|
340
340
|
target="_blank"
|
|
341
341
|
class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
342
342
|
<i src="../assets/svg/pencil-alt.svg"></i>
|
|
343
343
|
</button>
|
|
344
344
|
</main>
|
|
345
|
-
<script src="https://
|
|
345
|
+
<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
|
|
346
346
|
</body>
|
|
347
347
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cocreate/aria",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Orchestrate dynamic UI behavior and ARIA state with event-driven action chains, configured via HTML5 attributes or the JavaScript API.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"aria",
|
|
@@ -25,24 +25,25 @@
|
|
|
25
25
|
},
|
|
26
26
|
"repository": {
|
|
27
27
|
"type": "git",
|
|
28
|
-
"url": "git+https://github.com/
|
|
28
|
+
"url": "git+https://github.com/CoCreateJS/aria.git"
|
|
29
29
|
},
|
|
30
30
|
"author": "CoCreate LLC",
|
|
31
31
|
"license": "MIT",
|
|
32
32
|
"bugs": {
|
|
33
|
-
"url": "https://github.com/
|
|
33
|
+
"url": "https://github.com/CoCreateJS/aria/issues"
|
|
34
34
|
},
|
|
35
|
-
"homepage": "https://
|
|
35
|
+
"homepage": "https://CoCreateJS.com/docs/aria",
|
|
36
36
|
"funding": {
|
|
37
37
|
"type": "GitHub Sponsors ❤",
|
|
38
|
-
"url": "https://github.com/sponsors/
|
|
38
|
+
"url": "https://github.com/sponsors/CoCreateJS"
|
|
39
39
|
},
|
|
40
40
|
"main": "./src/index.js",
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@cocreate/observer": "^1.
|
|
42
|
+
"@cocreate/observer": "^1.23.0",
|
|
43
|
+
"@cocreate/state": "^1.29.0"
|
|
43
44
|
},
|
|
44
45
|
"devDependencies": {
|
|
45
|
-
"@cocreate/webpack": "^1.
|
|
46
|
+
"@cocreate/webpack": "^1.9.0"
|
|
46
47
|
},
|
|
47
48
|
"allowScripts": {
|
|
48
49
|
"@cocreate/observer@1.19.0": true,
|