├── .all-contributorsrc ├── .circleci └── config.yml ├── .github ├── CODEOWNERS ├── CODE_OF_CONDUCT.md ├── CONTRBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .vscode └── launch.json ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── __tests__ └── index.js ├── media └── hand-intuit-logo.png ├── package.json ├── snippets ├── css-snippets.json └── react-snippets.json └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "accessibility-snippets", 3 | "projectOwner": "kendall Gassner", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": true, 11 | "commitConvention": "none", 12 | "contributors": [ 13 | { 14 | "login": "kendallgassner", 15 | "name": "Kendall Gassner", 16 | "avatar_url": "https://avatars3.githubusercontent.com/u/15275462?v=4", 17 | "profile": "https://github.com/kendallgassner", 18 | "contributions": [ 19 | "code", 20 | "doc", 21 | "ideas", 22 | "infra" 23 | ] 24 | }, 25 | { 26 | "login": "kharrop", 27 | "name": "Kelly Harrop", 28 | "avatar_url": "https://avatars.githubusercontent.com/u/24794756?v=4", 29 | "profile": "https://github.com/kharrop", 30 | "contributions": [ 31 | "doc" 32 | ] 33 | }, 34 | { 35 | "login": "developer-diganta", 36 | "name": "Diganta Kr Banik", 37 | "avatar_url": "https://avatars.githubusercontent.com/u/65999534?v=4", 38 | "profile": "https://digantakrbanik.codes/", 39 | "contributions": [ 40 | "doc" 41 | ] 42 | }, 43 | { 44 | "login": "raych2", 45 | "name": "Rachel Tongco", 46 | "avatar_url": "https://avatars.githubusercontent.com/u/21354238?v=4", 47 | "profile": "https://github.com/raych2", 48 | "contributions": [ 49 | "doc" 50 | ] 51 | }, 52 | { 53 | "login": "aylinmarie", 54 | "name": "Aylin", 55 | "avatar_url": "https://avatars.githubusercontent.com/u/17627376?v=4", 56 | "profile": "https://github.com/aylinmarie", 57 | "contributions": [ 58 | "doc", 59 | "code" 60 | ] 61 | }, 62 | { 63 | "login": "jeffreyclu", 64 | "name": "Jeffrey Lu", 65 | "avatar_url": "https://avatars.githubusercontent.com/u/55211974?v=4", 66 | "profile": "https://github.com/jeffreyclu", 67 | "contributions": [ 68 | "doc", 69 | "code", 70 | "test" 71 | ] 72 | }, 73 | { 74 | "login": "Saran51", 75 | "name": "Saran51", 76 | "avatar_url": "https://avatars.githubusercontent.com/u/20996426?v=4", 77 | "profile": "https://github.com/Saran51", 78 | "contributions": [ 79 | "doc", 80 | "code" 81 | ] 82 | }, 83 | { 84 | "login": "tomarviii88", 85 | "name": "Ritika Tomar", 86 | "avatar_url": "https://avatars.githubusercontent.com/u/43980170?v=4", 87 | "profile": "https://github.com/tomarviii88", 88 | "contributions": [ 89 | "doc", 90 | "code", 91 | "test" 92 | ] 93 | }, 94 | { 95 | "login": "simin4950", 96 | "name": "Simin Savani", 97 | "avatar_url": "https://avatars.githubusercontent.com/u/38788938?v=4", 98 | "profile": "https://github.com/simin4950", 99 | "contributions": [ 100 | "doc", 101 | "code" 102 | ] 103 | }, 104 | { 105 | "login": "syedareehaquasar", 106 | "name": "reeha", 107 | "avatar_url": "https://avatars.githubusercontent.com/u/56428237?v=4", 108 | "profile": "https://syedareehaquasar.github.io/Portfolio/", 109 | "contributions": [ 110 | "doc", 111 | "code" 112 | ] 113 | }, 114 | { 115 | "login": "bolu-tife", 116 | "name": "Boluwatife Omosowon", 117 | "avatar_url": "https://avatars.githubusercontent.com/u/59070723?v=4", 118 | "profile": "https://www.linkedin.com/in/boluwatifeomosowon/", 119 | "contributions": [ 120 | "doc", 121 | "code", 122 | "test" 123 | ] 124 | }, 125 | { 126 | "login": "Pamelachristina", 127 | "name": "Pamelachristina", 128 | "avatar_url": "https://avatars.githubusercontent.com/u/46354272?v=4", 129 | "profile": "https://github.com/Pamelachristina", 130 | "contributions": [ 131 | "doc" 132 | ] 133 | }, 134 | { 135 | "login": "RadhikaHD", 136 | "name": "Radhika Dhaipule", 137 | "avatar_url": "https://avatars.githubusercontent.com/u/10150263?v=4", 138 | "profile": "https://radhikadhaipule.wordpress.com/", 139 | "contributions": [ 140 | "doc", 141 | "code", 142 | "test" 143 | ] 144 | }, 145 | { 146 | "login": "DianaTdr", 147 | "name": "Diana Toader", 148 | "avatar_url": "https://avatars.githubusercontent.com/u/35532678?v=4", 149 | "profile": "https://github.com/DianaTdr", 150 | "contributions": [ 151 | "code" 152 | ] 153 | } 154 | ], 155 | "contributorsPerLine": 7 156 | } 157 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | defaults: &defaults 4 | working_directory: ~/accessibility-snippets 5 | docker: 6 | - image: circleci/node:latest-browsers 7 | 8 | jobs: 9 | install: 10 | <<: *defaults 11 | steps: 12 | - checkout 13 | - restore_cache: 14 | keys: 15 | # Find a cache corresponding to this specific package.json checksum 16 | # when this file is changed, this key will fail 17 | - accessibility-snippets-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }} 18 | - accessibility-snippets-{{ .Branch }}-{{ checksum "yarn.lock" }} 19 | - accessibility-snippets-{{ .Branch }} 20 | # Find the most recent cache used from any branch 21 | - accessibility-snippets-master 22 | - accessibility-snippets- 23 | - run: 24 | name: Install Dependencies 25 | command: yarn install --frozen-lockfile 26 | - save_cache: 27 | key: accessibility-snippets-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum ".circleci/config.yml" }} 28 | paths: 29 | - node_modules 30 | - ~/.cache/yarn 31 | - persist_to_workspace: 32 | root: . 33 | paths: 34 | - . 35 | 36 | checkLabels: 37 | <<: *defaults 38 | steps: 39 | - attach_workspace: 40 | at: ~/accessibility-snippets 41 | - run: 42 | name: Check SemVer label 43 | command: yarn labelCheck --url $CIRCLE_BUILD_URL 44 | 45 | test: 46 | <<: *defaults 47 | steps: 48 | - attach_workspace: 49 | at: ~/accessibility-snippets 50 | - run: 51 | name: Test 52 | command: yarn test 53 | 54 | release: 55 | <<: *defaults 56 | steps: 57 | - attach_workspace: 58 | at: ~/accessibility-snippets 59 | - run: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config 60 | - run: 61 | name: Release 62 | command: yarn release 63 | 64 | workflows: 65 | version: 2 66 | build_and_test: 67 | jobs: 68 | - install 69 | 70 | - checkLabels: 71 | requires: 72 | - install 73 | - test: 74 | requires: 75 | - checkLabels 76 | - release: 77 | requires: 78 | - test 79 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | 2 | # List of source code paths and code owners 3 | # common services & repos 4 | * @kendallgassner -------------------------------------------------------------------------------- /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | Open source projects are “living.” Contributions in the form of issues and pull requests are welcomed and encouraged. When you contribute, you explicitly say you are part of the community and abide by its Code of Conduct. 2 | 3 | # The Code 4 | 5 | At Intuit, we foster a kind, respectful, harassment-free cooperative community. Our open source community works to: 6 | 7 | - Be kind and respectful; 8 | - Act as a global community; 9 | - Conduct ourselves professionally. 10 | 11 | As members of this community, we will not tolerate behaviors including, but not limited to: 12 | 13 | - Violent threats or language; 14 | - Discriminatory or derogatory jokes or language; 15 | - Public or private harassment of any kind; 16 | - Other conduct considered inappropriate in a professional setting. 17 | 18 | ## Reporting Concerns 19 | 20 | If you see someone violating the Code of Conduct please email TechOpenSource@intuit.com 21 | 22 | ## Scope 23 | 24 | This code of conduct applies to: 25 | 26 | All repos and communities for Intuit-managed projects, whether or not the text is included in a Intuit-managed project’s repository; 27 | 28 | Individuals or teams representing projects in official capacity, such as via official social media channels or at in-person meetups. 29 | 30 | ## Attribution 31 | 32 | This Code of Conduct is partly inspired by and based on those of Amazon, CocoaPods, GitHub, Microsoft, thoughtbot, and on the Contributor Covenant version 1.4.1. -------------------------------------------------------------------------------- /.github/CONTRBUTING.md: -------------------------------------------------------------------------------- 1 | # Contribution Guidelines 2 | 3 | ## Reporting Bugs and Suggesting Enhancements 4 | - First check the issues section to see what bugs and enhancements are already being tracked. 5 | - If you do not see your idea or bug please log the issue by following our issues template. 6 | - Make sure your issue: 7 | - Has a clear and concise description of what the problem is. If it is possible please include screenshots and code snippets. 8 | - Describes what you would like to happen and how the enhancement will be useful. 9 | - Provide the version of the plugin you are using. 10 | 11 | ## Installation 12 | - In order to contribute you will need to fork this repo and install locally. 13 | - Once you have the repo locally run `yarn` to install all necessary dependencies. 14 | 15 | ## Pull Requests 16 | - Maintain quality. 17 | - Please add new tests to the code base that test the new feature or the bug you are fixing. 18 | - Provide a description in your PR on what you are trying to accomplish. 19 | - Include a semantic version label in your pr (NOTE: the pr build will fail if you do not provide a label). 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | 12 | 13 | 14 | **Describe the solution you'd like** 15 | 16 | 17 | 18 | **Describe alternatives you've considered** 19 | 20 | 21 | 22 | **Additional context** 23 | 24 | 25 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # What Changed 2 | 3 | # Why 4 | 5 | Todo: 6 | - [ ] Add Semantic Version Label 7 | - [ ] Add tests 8 | - [ ] Add docs 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | yarn-error.log* 3 | dist/ 4 | node_modules/ 5 | coverage 6 | .env -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "args": [ 13 | "--extensionDevelopmentPath=${workspaceFolder}" 14 | ] 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | .gitignore 4 | vsc-extension-quickstart.md 5 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # v0.27.0 (Wed Oct 27 2021) 2 | 3 | #### 🚀 Enhancement 4 | 5 | - Added ARIA: List [#57](https://github.com/intuit/accessibility-snippets/pull/57) ([@tomarviii88](https://github.com/tomarviii88)) 6 | 7 | #### Authors: 1 8 | 9 | - Ritika Tomar ([@tomarviii88](https://github.com/tomarviii88)) 10 | 11 | --- 12 | 13 | # v0.26.1 (Fri Oct 08 2021) 14 | 15 | #### 🐛 Bug Fix 16 | 17 | - chore(run-tests): run tests in circle ci [#65](https://github.com/intuit/accessibility-snippets/pull/65) (dianatoader@Dianas-MacBook-Pro.local) 18 | 19 | #### Authors: 1 20 | 21 | - Diana Toader ([@DianaTdr](https://github.com/DianaTdr)) 22 | 23 | --- 24 | 25 | # v0.25.0 (Mon Oct 04 2021) 26 | 27 | #### 🚀 Enhancement 28 | 29 | - Added MeterAria [#62](https://github.com/intuit/accessibility-snippets/pull/62) ([@bolu-tife](https://github.com/bolu-tife)) 30 | 31 | #### 📝 Documentation 32 | 33 | - Update README.md for MeterAria description [#64](https://github.com/intuit/accessibility-snippets/pull/64) ([@bolu-tife](https://github.com/bolu-tife)) 34 | 35 | #### Authors: 1 36 | 37 | - Boluwatife Omosowon ([@bolu-tife](https://github.com/bolu-tife)) 38 | 39 | --- 40 | 41 | # v0.24.7 (Fri Oct 01 2021) 42 | 43 | #### 🐛 Bug Fix 44 | 45 | - Making README.md more readable [#51](https://github.com/intuit/accessibility-snippets/pull/51) ([@RadhikaHD](https://github.com/RadhikaHD)) 46 | 47 | #### Authors: 1 48 | 49 | - Radhika Dhaipule ([@RadhikaHD](https://github.com/RadhikaHD)) 50 | 51 | --- 52 | 53 | # v0.24.5 (Fri Oct 01 2021) 54 | 55 | #### 🐛 Bug Fix 56 | 57 | - added tabpanelaria react code snippet [#61](https://github.com/intuit/accessibility-snippets/pull/61) (pamela_sanchezhernandez@intuit.com [@Pamelachristina](https://github.com/Pamelachristina)) 58 | 59 | #### Authors: 2 60 | 61 | - [@Pamelachristina](https://github.com/Pamelachristina) 62 | - psanchezher (pamela_sanchezhernandez@intuit.com) 63 | 64 | --- 65 | 66 | # v0.24.3 (Fri Oct 01 2021) 67 | 68 | #### 🐛 Bug Fix 69 | 70 | - Add tests [#44](https://github.com/intuit/accessibility-snippets/pull/44) ([@jeffreyclu](https://github.com/jeffreyclu)) 71 | 72 | #### Authors: 1 73 | 74 | - Jeffrey Lu ([@jeffreyclu](https://github.com/jeffreyclu)) 75 | 76 | --- 77 | 78 | # v0.24.1 (Fri Oct 01 2021) 79 | 80 | #### 🐛 Bug Fix 81 | 82 | - Sorted snippets in alphabetical order for sort test [#59](https://github.com/intuit/accessibility-snippets/pull/59) ([@syedareehaquasar](https://github.com/syedareehaquasar)) 83 | 84 | #### Authors: 1 85 | 86 | - reeha ([@syedareehaquasar](https://github.com/syedareehaquasar)) 87 | 88 | --- 89 | 90 | # v0.23.0 (Fri Oct 01 2021) 91 | 92 | #### 🚀 Enhancement 93 | 94 | - Add ARIA: Light color scheme css snippet [#55](https://github.com/intuit/accessibility-snippets/pull/55) (amcginnis@rsglab.com [@aylinmarie](https://github.com/aylinmarie)) 95 | 96 | #### Authors: 2 97 | 98 | - Aylin Atkins ([@aylinmarie](https://github.com/aylinmarie)) 99 | - Aylin McGinnis (amcginnis@rsglab.com) 100 | 101 | --- 102 | 103 | # v0.22.1 (Fri Oct 01 2021) 104 | 105 | #### 🐛 Bug Fix 106 | 107 | - Add Aria: Figure Role [#54](https://github.com/intuit/accessibility-snippets/pull/54) ([@bolu-tife](https://github.com/bolu-tife)) 108 | 109 | #### Authors: 1 110 | 111 | - Boluwatife Omosowon ([@bolu-tife](https://github.com/bolu-tife)) 112 | 113 | --- 114 | 115 | # v0.21.0 (Fri Oct 01 2021) 116 | 117 | #### 🚀 Enhancement 118 | 119 | - fixed Add Aria: separator#31 [#42](https://github.com/intuit/accessibility-snippets/pull/42) ([@syedareehaquasar](https://github.com/syedareehaquasar)) 120 | 121 | #### Authors: 1 122 | 123 | - reeha ([@syedareehaquasar](https://github.com/syedareehaquasar)) 124 | 125 | --- 126 | 127 | # v0.19.0 (Fri Oct 01 2021) 128 | 129 | #### 🚀 Enhancement 130 | 131 | - Adding contrast to csss accessibility snippets [#45](https://github.com/intuit/accessibility-snippets/pull/45) ([@simin4950](https://github.com/simin4950)) 132 | 133 | #### Authors: 1 134 | 135 | - Simin Savani ([@simin4950](https://github.com/simin4950)) 136 | 137 | --- 138 | 139 | # v0.17.0 (Fri Oct 01 2021) 140 | 141 | #### 🚀 Enhancement 142 | 143 | - Added CSS snippet: prefers-color-scheme: dark [#49](https://github.com/intuit/accessibility-snippets/pull/49) ([@tomarviii88](https://github.com/tomarviii88)) 144 | 145 | #### Authors: 1 146 | 147 | - Ritika Tomar ([@tomarviii88](https://github.com/tomarviii88)) 148 | 149 | --- 150 | 151 | # v0.15.0 (Fri Oct 01 2021) 152 | 153 | #### 🚀 Enhancement 154 | 155 | - Add Aria: Image Role [#48](https://github.com/intuit/accessibility-snippets/pull/48) (amcginnis@rsglab.com [@aylinmarie](https://github.com/aylinmarie)) 156 | 157 | #### Authors: 2 158 | 159 | - Aylin Atkins ([@aylinmarie](https://github.com/aylinmarie)) 160 | - Aylin McGinnis (amcginnis@rsglab.com) 161 | 162 | --- 163 | 164 | # v0.13.0 (Fri Oct 01 2021) 165 | 166 | #### 🚀 Enhancement 167 | 168 | - OSD Contribution : Add ARIA:Cell Role [#43](https://github.com/intuit/accessibility-snippets/pull/43) (sramkumar@microsoft.com [@Saran51](https://github.com/Saran51)) 169 | 170 | #### Authors: 2 171 | 172 | - [@Saran51](https://github.com/Saran51) 173 | - Saranya Ramkumar (sramkumar@microsoft.com) 174 | 175 | --- 176 | 177 | # v0.11.0 (Fri Oct 01 2021) 178 | 179 | #### 🚀 Enhancement 180 | 181 | - Added ARIA: Searchbox role [#35](https://github.com/intuit/accessibility-snippets/pull/35) ([@jeffreyclu](https://github.com/jeffreyclu)) 182 | 183 | #### Authors: 1 184 | 185 | - Jeffrey Lu ([@jeffreyclu](https://github.com/jeffreyclu)) 186 | 187 | --- 188 | 189 | # v0.1.0 (Fri Oct 01 2021) 190 | 191 | #### 🚀 Enhancement 192 | 193 | - Add Aria: Loading Spinner [#34](https://github.com/intuit/accessibility-snippets/pull/34) (amcginnis@rsglab.com [@aylinmarie](https://github.com/aylinmarie)) 194 | - Add ARIA:document role [#23](https://github.com/intuit/accessibility-snippets/pull/23) ([@raych2](https://github.com/raych2)) 195 | 196 | #### 🐛 Bug Fix 197 | 198 | - Add aria timer role [#29](https://github.com/intuit/accessibility-snippets/pull/29) ([@developer-diganta](https://github.com/developer-diganta)) 199 | - Just trying to get all contributors working [#24](https://github.com/intuit/accessibility-snippets/pull/24) ([@kendallgassner](https://github.com/kendallgassner)) 200 | - Fix build [#25](https://github.com/intuit/accessibility-snippets/pull/25) ([@kendallgassner](https://github.com/kendallgassner)) 201 | - Added ARIA:banner role [#21](https://github.com/intuit/accessibility-snippets/pull/21) ([@developer-diganta](https://github.com/developer-diganta)) 202 | - Updating README to include logo mark [#11](https://github.com/intuit/accessibility-snippets/pull/11) ([@kharrop](https://github.com/kharrop)) 203 | 204 | #### ⚠️ Pushed to `master` 205 | 206 | - Update CONTRBUTING.md ([@kendallgassner](https://github.com/kendallgassner)) 207 | 208 | #### Authors: 6 209 | 210 | - Aylin ([@aylinmarie](https://github.com/aylinmarie)) 211 | - Aylin McGinnis (amcginnis@rsglab.com) 212 | - Diganta Kr Banik ([@developer-diganta](https://github.com/developer-diganta)) 213 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 214 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 215 | - Rachel Tongco ([@raych2](https://github.com/raych2)) 216 | 217 | --- 218 | 219 | # v0.1.0 (Wed Jul 21 2021) 220 | 221 | #### 🚀 Enhancement 222 | 223 | - Add ARIA:document role [#23](https://github.com/intuit/accessibility-snippets/pull/23) ([@raych2](https://github.com/raych2)) 224 | 225 | #### 🐛 Bug Fix 226 | 227 | - Add aria timer role [#29](https://github.com/intuit/accessibility-snippets/pull/29) ([@developer-diganta](https://github.com/developer-diganta)) 228 | - Just trying to get all contributors working [#24](https://github.com/intuit/accessibility-snippets/pull/24) ([@kendallgassner](https://github.com/kendallgassner)) 229 | - Fix build [#25](https://github.com/intuit/accessibility-snippets/pull/25) ([@kendallgassner](https://github.com/kendallgassner)) 230 | - Added ARIA:banner role [#21](https://github.com/intuit/accessibility-snippets/pull/21) ([@developer-diganta](https://github.com/developer-diganta)) 231 | - Updating README to include logo mark [#11](https://github.com/intuit/accessibility-snippets/pull/11) ([@kharrop](https://github.com/kharrop)) 232 | 233 | #### ⚠️ Pushed to `master` 234 | 235 | - Update CONTRBUTING.md ([@kendallgassner](https://github.com/kendallgassner)) 236 | 237 | #### Authors: 4 238 | 239 | - Diganta Kr Banik ([@developer-diganta](https://github.com/developer-diganta)) 240 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 241 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 242 | - Rachel Tongco ([@raych2](https://github.com/raych2)) 243 | 244 | --- 245 | 246 | # v0.1.0 (Thu Jul 15 2021) 247 | 248 | #### 🚀 Enhancement 249 | 250 | - Add ARIA:document role [#23](https://github.com/intuit/accessibility-snippets/pull/23) ([@raych2](https://github.com/raych2)) 251 | 252 | #### 🐛 Bug Fix 253 | 254 | - Just trying to get all contributors working [#24](https://github.com/intuit/accessibility-snippets/pull/24) ([@kendallgassner](https://github.com/kendallgassner)) 255 | - Fix build [#25](https://github.com/intuit/accessibility-snippets/pull/25) ([@kendallgassner](https://github.com/kendallgassner)) 256 | - Added ARIA:banner role [#21](https://github.com/intuit/accessibility-snippets/pull/21) ([@developer-diganta](https://github.com/developer-diganta)) 257 | - Updating README to include logo mark [#11](https://github.com/intuit/accessibility-snippets/pull/11) ([@kharrop](https://github.com/kharrop)) 258 | 259 | #### ⚠️ Pushed to `master` 260 | 261 | - Update CONTRBUTING.md ([@kendallgassner](https://github.com/kendallgassner)) 262 | 263 | #### Authors: 4 264 | 265 | - Diganta Kr Banik ([@developer-diganta](https://github.com/developer-diganta)) 266 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 267 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 268 | - Rachel Tongco ([@raych2](https://github.com/raych2)) 269 | 270 | --- 271 | 272 | # v0.1.0 (Thu Jul 15 2021) 273 | 274 | #### 🚀 Enhancement 275 | 276 | - Add ARIA:document role [#23](https://github.com/intuit/accessibility-snippets/pull/23) ([@raych2](https://github.com/raych2)) 277 | 278 | #### 🐛 Bug Fix 279 | 280 | - Fix build [#25](https://github.com/intuit/accessibility-snippets/pull/25) ([@kendallgassner](https://github.com/kendallgassner)) 281 | - Added ARIA:banner role [#21](https://github.com/intuit/accessibility-snippets/pull/21) ([@developer-diganta](https://github.com/developer-diganta)) 282 | - Updating README to include logo mark [#11](https://github.com/intuit/accessibility-snippets/pull/11) ([@kharrop](https://github.com/kharrop)) 283 | 284 | #### ⚠️ Pushed to `master` 285 | 286 | - Update CONTRBUTING.md ([@kendallgassner](https://github.com/kendallgassner)) 287 | 288 | #### Authors: 4 289 | 290 | - Diganta Kr Banik ([@developer-diganta](https://github.com/developer-diganta)) 291 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 292 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 293 | - Rachel Tongco ([@raych2](https://github.com/raych2)) 294 | 295 | --- 296 | 297 | # v0.1.0 (Thu Jul 15 2021) 298 | 299 | #### 🚀 Enhancement 300 | 301 | - Add ARIA:document role [#23](https://github.com/intuit/accessibility-snippets/pull/23) ([@raych2](https://github.com/raych2)) 302 | 303 | #### 🐛 Bug Fix 304 | 305 | - Added ARIA:banner role [#21](https://github.com/intuit/accessibility-snippets/pull/21) ([@developer-diganta](https://github.com/developer-diganta)) 306 | - Updating README to include logo mark [#11](https://github.com/intuit/accessibility-snippets/pull/11) ([@kharrop](https://github.com/kharrop)) 307 | 308 | #### ⚠️ Pushed to `master` 309 | 310 | - Update CONTRBUTING.md ([@kendallgassner](https://github.com/kendallgassner)) 311 | 312 | #### Authors: 4 313 | 314 | - Diganta Kr Banik ([@developer-diganta](https://github.com/developer-diganta)) 315 | - Kelly Harrop ([@kharrop](https://github.com/kharrop)) 316 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 317 | - Rachel Tongco ([@raych2](https://github.com/raych2)) 318 | 319 | --- 320 | 321 | # v0.0.14 (Fri Mar 05 2021) 322 | 323 | #### 🐛 Bug Fix 324 | 325 | - fix snippet formatting [#9](https://github.com/intuit/accessibility-snippets/pull/9) ([@kendallgassner](https://github.com/kendallgassner)) 326 | 327 | #### Authors: 1 328 | 329 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 330 | 331 | --- 332 | 333 | # v0.0.12 (Thu Mar 04 2021) 334 | 335 | #### 🐛 Bug Fix 336 | 337 | - setup all Contributors [#8](https://github.com/intuit/accessibility-snippets/pull/8) ([@kendallgassner](https://github.com/kendallgassner)) 338 | 339 | #### Authors: 1 340 | 341 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 342 | 343 | --- 344 | 345 | # v0.0.10 (Fri Feb 26 2021) 346 | 347 | #### 🐛 Bug Fix 348 | 349 | - fix readme [#6](https://github.com/intuit/accessibility-snippets/pull/6) ([@kendallgassner](https://github.com/kendallgassner)) 350 | 351 | #### Authors: 1 352 | 353 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 354 | 355 | --- 356 | 357 | # v0.0.8 (Thu Feb 25 2021) 358 | 359 | #### 🐛 Bug Fix 360 | 361 | - edit icon file [#5](https://github.com/intuit/accessibility-snippets/pull/5) ([@kendallgassner](https://github.com/kendallgassner)) 362 | - edit readme [#4](https://github.com/intuit/accessibility-snippets/pull/4) ([@kendallgassner](https://github.com/kendallgassner)) 363 | - add publisher [#3](https://github.com/intuit/accessibility-snippets/pull/3) ([@kendallgassner](https://github.com/kendallgassner)) 364 | - add CheckLabel script [#2](https://github.com/intuit/accessibility-snippets/pull/2) ([@kendallgassner](https://github.com/kendallgassner)) 365 | - update yarn.lock [#1](https://github.com/intuit/accessibility-snippets/pull/1) ([@kendallgassner](https://github.com/kendallgassner)) 366 | 367 | #### ⚠️ Pushed to `master` 368 | 369 | - initialize public repo ([@hipstersmoothie](https://github.com/hipstersmoothie)) 370 | 371 | #### Authors: 2 372 | 373 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 374 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 375 | 376 | --- 377 | 378 | # v0.0.6 (Thu Feb 25 2021) 379 | 380 | #### 🐛 Bug Fix 381 | 382 | - edit readme [#4](https://github.com/intuit/accessibility-snippets/pull/4) ([@kendallgassner](https://github.com/kendallgassner)) 383 | - add publisher [#3](https://github.com/intuit/accessibility-snippets/pull/3) ([@kendallgassner](https://github.com/kendallgassner)) 384 | - add CheckLabel script [#2](https://github.com/intuit/accessibility-snippets/pull/2) ([@kendallgassner](https://github.com/kendallgassner)) 385 | - update yarn.lock [#1](https://github.com/intuit/accessibility-snippets/pull/1) ([@kendallgassner](https://github.com/kendallgassner)) 386 | 387 | #### ⚠️ Pushed to `master` 388 | 389 | - initialize public repo ([@hipstersmoothie](https://github.com/hipstersmoothie)) 390 | 391 | #### Authors: 2 392 | 393 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 394 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 395 | 396 | --- 397 | 398 | # v0.0.4 (Thu Feb 25 2021) 399 | 400 | #### 🐛 Bug Fix 401 | 402 | - add publisher [#3](https://github.com/intuit/accessibility-snippets/pull/3) ([@kendallgassner](https://github.com/kendallgassner)) 403 | - add CheckLabel script [#2](https://github.com/intuit/accessibility-snippets/pull/2) ([@kendallgassner](https://github.com/kendallgassner)) 404 | - update yarn.lock [#1](https://github.com/intuit/accessibility-snippets/pull/1) ([@kendallgassner](https://github.com/kendallgassner)) 405 | 406 | #### ⚠️ Pushed to `master` 407 | 408 | - initialize public repo ([@hipstersmoothie](https://github.com/hipstersmoothie)) 409 | 410 | #### Authors: 2 411 | 412 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 413 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 414 | 415 | --- 416 | 417 | # v0.0.2 (Thu Feb 25 2021) 418 | 419 | #### 🐛 Bug Fix 420 | 421 | - add CheckLabel script [#2](https://github.com/intuit/accessibility-snippets/pull/2) ([@kendallgassner](https://github.com/kendallgassner)) 422 | - update yarn.lock [#1](https://github.com/intuit/accessibility-snippets/pull/1) ([@kendallgassner](https://github.com/kendallgassner)) 423 | 424 | #### ⚠️ Pushed to `master` 425 | 426 | - initialize public repo ([@hipstersmoothie](https://github.com/hipstersmoothie)) 427 | 428 | #### Authors: 2 429 | 430 | - Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie)) 431 | - Kendall Gassner ([@kendallgassner](https://github.com/kendallgassner)) 432 | 433 | --- 434 | 435 | # Change Log 436 | 437 | All notable changes to the "accessibility-snippets" extension will be documented in this file. 438 | 439 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 440 | 441 | ## [Unreleased] 442 | 443 | - Initial release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | Copyright (c) 2019 Intuit 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 17 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 18 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 19 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 20 | OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | Accessibility snippets logo 3 |

accessibility-snippets

4 | 5 | 6 | [![All Contributors](https://img.shields.io/badge/all_contributors-14-orange.svg?style=flat-square)](#contributors-) 7 | 8 | 9 |

VScode Snippets created to help developers write accessible code.

10 |
11 | 12 | ## Features 13 | 14 | ### CSS snippet 15 | 16 | | Snippet | Description | Note | 17 | | :-------------| :---------------|:---------------| 18 | | reduced motion | Adds a reduced motion snippet with prefix `transition` | N/A| 19 | | less-contrast | Adds less contrast media snippet with prefix `less-contrast` | 🚨 Safari Only Queries 🚨 | 20 | | dark-color-scheme | Adds dark prefers-color-scheme snippet with prefix `darkColorScheme` | N/A | 21 | | light-color-scheme | Adds light prefers-color-scheme snippet with prefix `lightColorScheme`| N/A | 22 | 23 | ### React Aria Snippets 24 | 25 | | Snippet | Role | Description | 26 | | :-------------: |:-------------: | :------------| 27 | | **AlertAria** | role='alert' | Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live="assertive" and aria-atomic="true". | 28 | | **AlertDialogAria** | role='alertDialog' | Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls. | 29 | | **ArticleAria** | role='article' | Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed. | 30 | | **BannerAria** | role='banner' | Add `role='banner'` to define a banner landmark to assistive technologies. A banner landmark is informative content frequently placed at the beginning of the page. | 31 | | **ButtonAria** | role='button' | Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse. | 32 | | **CheckboxAria** | role='checkbox' | Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox.| 33 | | **ComboboxAria** | role='combobox' | Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns.| 34 | | **DialogAria** | role='dialog'| Add `role='dialog'` to a window separate from the rest of the webpage like a modal.| 35 | | **DocumentAria** | role='document' | Add `role='document'` to application or other interactive widget role to switch to browse or read mode. Add `aria-expanded` to indicate whether the document is currently expanded or collapsed if the document element is collapsible.| 36 | | **FeedAria** | role='feed' | Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed.| 37 | | **FigureAria** | role='figure' | Add `role='figure'` to identify a figure inside page content where appropriate semantics do not already exist. Add `aria-labelledby` when the text is a concise label. Add `aria-describedby` when the text is a longer description. Add `aria-label` if there is no element containing text that could serve as a label.| 38 | | **ImageAria** | role='img' | Add `role='img'` to identify a set of content as a single image that has multiple elements. Elements can be images, text, emojis or other content that delivers information visually. Add `aria-label` for descriptive alt text for the image. `aria-label` can be replaced with `aria-labelledby` if descriptive text is provide in another element within the role.| 39 | | **LinkAria** | role='link' | Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label.| 40 | | **ListAria** | role='list' | Add `role='list'` to elements that act as list.| 41 | | **ListItemAria** | role='list-item' | Add `role='list-item'` to elements that act as list-item contained inside the list.| 42 | | **MeterAria** | role='meter' | Add `role='meter'` to identify an element being used as a meter. A meter is a graphical display of a numeric value within a defined range. Each element must have either an `aria-label` or `aria-labelledby`. Add `aria-labelledby` to point to an element with text that describes the meter. Add `aria-valuenow` to indicate the current value of the meter, which is between the `aria-valuemin` and `aria-valuemax`. Add `aria-valuetext` to make the meter value understandable. Add `aria-valuemin` to indicate the minimum value, which is less than `aria-valuemax`. Add `aria-valuemax` to indicate the maximum value, which is greater than `aria-valuemin`.| 43 | | **LoadingAria** | role='status' | Add `role='status'` and `aria-live='polite'` to element wrapping a loading spinner or indicator. The live region must be present in the DOM before the loading indicator has rendered. Add `aria-label='Loading'` to loading indicator if no other text element or content is passed.| 44 | | **RadioAria** | role='radio' | Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox.| 45 | | **SeperatorAria** | role='separator' | Add `role='separator'` to a HR tag.Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. There are set default values 0. 100 and 50 respectively and can be modified. Setting `aria-seperator` automatically sets aria-orientation = 'horizontal'.| 46 | | **SearchboxAria** | role='searchbox' | Add `role='searchbox'` to a textbox intended for specifying search criteria. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.| 47 | | **SliderAria** | role='slider' | Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.| 48 | | **SwitchAria** | role='switch' | Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required.| 49 | | **TextboxAria** | role='textbox' | Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow.| 50 | | **TabPanelAria** | role='tabpanel' | "Use `role='tabpanel'` on elements that contains the content associated with a tab. Add `aria-controls` identifies the element (or elements) whose contents or presence are controlled by the current element (For example a tab controls the display of its associated tab panel). Add `aria-labelledby` Identifies the element (or elements) that labels the current element. Add `aria-details to identify the element that provides a detailed, extended description for the object. Add `aria-haspopup` Indicates the availability and type of interactive popup element, such as menu or dialog. Add `aria-readonly` if the user cannot modify the value. Add `aria-keyshortcuts` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.| 51 | | **TimerAria** | role='timer' | Add `role='timer'` to indicate to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point. Add `aria-label` to provide the name of the timer. Add `aria-live` to explicitly denote a live region (Elements with the role timer have an implicit aria-live value of off). Add `aria-describedby` to indicate the idref of an element that contains additional instructions for navigating or operating this element. Add `aria-roledescription` o give the timer a more descriptive role text for screen readers to speak. Add `aria-atomic` to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes.| 52 | | **SliderAria** | role='slider' | Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required.| 53 | | **CellAria** | role='cell' | Adds `role='cell'` aria attributes for a cell. A cell is identified as an element in a tabular container that does not contain column or row header information. “cells” are only valid within a construct that simulates a standard data table.| 54 | 55 | ## Rules of ARIA 56 | 57 | - The **first rule** of ARIA is try to `use native HTML elements` instead of aria attributes whenever possible. 58 | 59 | - The **second rule** of ARIA is do not change native HTML semantics, unless you really have to. 60 | 61 | Avoid: 62 | 63 | ``` 64 |

heading tab

65 | ``` 66 | 67 | Instead: 68 | 69 | ``` 70 |

heading tab

71 | ``` 72 | 73 | - The **third rule** of ARIA all aria controls must be usable by the keyboard. 74 | 75 | - The **fourth rule** of ARIA do not use role='presentation' and aria-hidden='true' on focusable elements. 76 | 77 | - The **fifth rule** of ARIA all interactive elements must have accessible names. 78 | 79 | ## Installation 80 | 81 | - Please follow the VSCode instructions to install accessibility-snippets in your editor: 82 | 83 | ``` 84 | https://code.visualstudio.com/docs/editor/userdefinedsnippets#_install-snippets-from-the-marketplace 85 | ``` 86 | 87 | - Once installed Navigate to Settings in vscode's preferences menu and toggle **on** `Editor: Accept Suggestion On Enter` 88 | > Controls whether suggestions should be accepted on Enter, in addition to Tab. Helps to avoid ambiguity between inserting new lines or accepting suggestions. 89 | 90 | ## Testing 91 | 92 | - Run `yarn test` from the project root to run the unit test suites. 93 | 94 | ## Contributing 95 | 96 | Contributions are welcome! If you encounter problems or have a feature suggestion we'd love to hear about it. Open an issue in the GitHub issue tracker and we will do our best to provide support. Thank you! 97 | 98 | ## License 99 | 100 | `accessibility-snippets` is provided under the MIT license. 101 | 102 | ## Contributors ✨ 103 | 104 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 |

Kendall Gassner
💻 📖 🤔 🚇
Kelly Harrop
📖
Diganta Kr Banik
📖
Rachel Tongco
📖
Aylin
📖 💻
Jeffrey Lu
📖 💻 ⚠️
Saran51
📖 💻

Ritika Tomar
📖 💻 ⚠️
Simin Savani
📖 💻
reeha
📖 💻
Boluwatife Omosowon
📖 💻 ⚠️
Pamelachristina
📖
Radhika Dhaipule
📖 💻 ⚠️
Diana Toader
💻
129 | 130 | 131 | 132 | 133 | 134 | 135 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 136 | -------------------------------------------------------------------------------- /__tests__/index.js: -------------------------------------------------------------------------------- 1 | // adapted from https://github.com/andys8/vscode-jest-snippets/blob/master/snippets/snippets.test.js 2 | 3 | const cssSnippets = require("../snippets/css-snippets.json"); 4 | const reactSnippets = require("../snippets/react-snippets.json"); 5 | 6 | const allSnippets = [cssSnippets, reactSnippets]; 7 | 8 | const unique = (xs) => [...new Set(xs)]; 9 | 10 | describe.each(allSnippets)("suite $#", (snippet) => { 11 | it("has entries", () => { 12 | expect(Object.keys(snippet).length).toBeGreaterThan(0); 13 | }); 14 | 15 | // TODO: get this test working 16 | // Currently the keys are not sorted alphabetically for react-snippets 17 | // it("is sorted alphabetically by key", () => { 18 | // const keys = Object.keys(snippet); 19 | // const sortedKeys = [...keys].sort(); 20 | // expect(keys).toEqual(sortedKeys); 21 | // }) 22 | 23 | it("has unique prefixes", () => { 24 | const prefixes = Object.values(snippet).map((snippet) => snippet.prefix); 25 | expect(prefixes).toEqual(unique(prefixes)); 26 | }) 27 | 28 | describe.each(Object.keys(snippet))("%s", (key) => { 29 | it("has a prefix", () => { 30 | const { prefix } = snippet[key]; 31 | expect(prefix).toBeDefined(); 32 | expect(prefix).not.toEqual(""); 33 | }) 34 | 35 | it("has a body", () => { 36 | const { body } = snippet[key]; 37 | expect(body).toBeDefined(); 38 | expect(body).not.toEqual(""); 39 | }) 40 | 41 | it("has a description", () => { 42 | const { description } = snippet[key]; 43 | expect(description).toBeDefined(); 44 | expect(description).not.toEqual(""); 45 | }) 46 | }) 47 | }) -------------------------------------------------------------------------------- /media/hand-intuit-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/intuit/accessibility-snippets/4915f4d1b3e9f7c73577c7a7ca1ef533df17ab4a/media/hand-intuit-logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "accessibility-snippets", 3 | "displayName": "accessibility-snippets", 4 | "description": "snippets to help create accessible code", 5 | "author": { 6 | "name": "Kendall Gassner", 7 | "email": "kendall.gassner@yahoo.com" 8 | }, 9 | "version": "0.28.0", 10 | "icon": "media/hand-intuit-logo.png", 11 | "engines": { 12 | "vscode": "^1.53.0" 13 | }, 14 | "categories": [ 15 | "Snippets" 16 | ], 17 | "contributes": { 18 | "snippets": [ 19 | { 20 | "language": "css", 21 | "path": "./snippets/css-snippets.json" 22 | }, 23 | { 24 | "language": "typescriptreact", 25 | "path": "./snippets/react-snippets.json" 26 | }, 27 | { 28 | "language": "javascriptreact", 29 | "path": "./snippets/react-snippets.json" 30 | } 31 | ] 32 | }, 33 | "scripts": { 34 | "release": "auto shipit -vv", 35 | "labelCheck": "auto pr-check", 36 | "test": "jest" 37 | }, 38 | "publisher": "accessibility-snippets", 39 | "devDependencies": { 40 | "@auto-it/all-contributors": "^10.16.6", 41 | "@auto-it/vscode": "^10.16.6", 42 | "auto": "^10.16.6", 43 | "jest": "^27.2.4" 44 | }, 45 | "repository": { 46 | "type": "git", 47 | "url": "https://github.com/intuit/accessibility-snippets.git" 48 | }, 49 | "auto": { 50 | "plugins": [ 51 | "npm", 52 | "all-contributors", 53 | "vscode" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /snippets/css-snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "transition": { 3 | "prefix": [ 4 | "transition" 5 | ], 6 | "body": [ 7 | "transition: \t$1", 8 | "", 9 | "@media screen and (prefers-reduced-motion) {", 10 | "transition: \t$0", 11 | "}" 12 | ], 13 | "description": "Adds reduced motion media query anytime transition is added to css file" 14 | }, 15 | 16 | "contrast": { 17 | "prefix": [ 18 | "less-contrast" 19 | ], 20 | "body": [ 21 | "@media (prefers-contrast: less) {", 22 | "\t$0", 23 | "}" 24 | 25 | ], 26 | "description": "Detects if user has requested that the web content is presented with less constrast. Note that this is only supported on Safari." 27 | }, 28 | 29 | "darkColorScheme": { 30 | "prefix": ["darkColorScheme"], 31 | "body": [ 32 | "", 33 | "@media screen and (prefers-color-scheme: dark) {", 34 | "\t$0", 35 | "}" 36 | ], 37 | "description": "Adds dark color scheme media query whenever user indicates dark theme in the operating system settings." 38 | }, 39 | 40 | "lightColorScheme": { 41 | "prefix": ["lightColorScheme"], 42 | "body": [ 43 | "@media screen and (prefers-color-scheme: light) {", 44 | "\t$0", 45 | "}" 46 | ], 47 | "description": "Adds light color scheme media query whenever user indicates light theme in the operating system settings." 48 | } 49 | } -------------------------------------------------------------------------------- /snippets/react-snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | "AlertAria": { 3 | "prefix": [ 4 | "AlertAria" 5 | ], 6 | "body": [ 7 | "role='alert'", 8 | "aria-live='$1'", 9 | "aria-atomic={$2}", 10 | "" 11 | ], 12 | "description": "Add `role='alert'` to a node containing an alert message. Setting role='alert' automatically sets aria-live='assertive' and aria-atomic='true'." 13 | }, 14 | "AlertDialogAria": { 15 | "prefix": [ 16 | "AlertDialogAria" 17 | ], 18 | "body": [ 19 | "role='alertdialog'", 20 | "aria-labelledby='$1'", 21 | "aria-describedby='$2'", 22 | "aria-modal={true}", 23 | "" 24 | ], 25 | "description": "alertDialog - Add `role='alertDialog'` when an alert is urgent and demands immediate attention. Only use alertDialog when the alert message has associated interactive controls." 26 | }, 27 | "ArticleAria": { 28 | "prefix": [ 29 | "ArticleAria" 30 | ], 31 | "body": [ 32 | "role='article'", 33 | "tabIndex={0}", 34 | "aria-labelledby='$1'", 35 | "aria-describedby='$2'", 36 | "aria-posinset={$3}", 37 | "aria-setsize={$4}", 38 | "" 39 | ], 40 | "description": "Add `role='article'` to a node that can easily stand on its own separate from the main content of the page. An example is a newspaper article or a forum post. Use `aria-posinset` to indicate of the article within the feed. Use `aria-setsize` to indicate how many articles are in the feed." 41 | }, 42 | "BannerAria":{ 43 | "prefix": [ 44 | "BannerAria" 45 | ], 46 | "body":[ 47 | "role='banner'" 48 | ], 49 | "description":"Add `role='banner'` to define a banner landmark to assistive technologies." 50 | }, 51 | "ButtonAria": { 52 | "prefix": [ 53 | "ButtonAria" 54 | ], 55 | "body": [ 56 | "role='button'", 57 | "tabIndex={0}", 58 | "aria-pressed={$1}", 59 | "aria-expanded={$2}", 60 | "" 61 | ], 62 | "description": "Add `role='button'` on a clickable element that triggers a response when activated by a user. Add `aria-pressed` when a button can toggle 'on' or 'off'. Add `aria-expanded` if a button triggers another node to expand or collapse." 63 | }, 64 | "CellAria": { 65 | "prefix": [ 66 | "CellAria" 67 | ], 68 | "body": [ 69 | "role='cell'", 70 | "aria-colspan={$1}", 71 | "aria-rowspan={$2}", 72 | "aria-colindex={$3}", 73 | "aria-rowindex={$4}", 74 | "" 75 | ], 76 | "description": "Adds `role='cell'` aria attributes for a cell. A cell is identified as an element in a tabular container that does not contain column or row header information. “cells” are only valid within a construct that simulates a standard data table." 77 | }, 78 | "CheckboxAria": { 79 | "prefix": [ 80 | "CheckboxAria" 81 | ], 82 | "body": [ 83 | "role='checkbox'", 84 | "tabIndex={0}", 85 | "aria-checked={$1}", 86 | "" 87 | ], 88 | "description": "Add `role='checkbox'` to a checkable interactive control. Add `aria-checked` to indicate the state of the checkbox." 89 | }, 90 | "ComboboxAria": { 91 | "prefix": [ 92 | "ComboboxAria" 93 | ], 94 | "body": [ 95 | "role='combobox'", 96 | "aria-haspopup='$1'", 97 | "aria-owns='$2'", 98 | "aria-expanded={$3}", 99 | "" 100 | ], 101 | "description": "Add `role='combobox'` to a composite widget containing a single-line textbox and another element such as listbox. Add `aria-haspopup` if the combobox contains a popup. Add `aria-expanded` if the combobox expands or collapses a node. Add `aria-owns` to indicate which elements the combobox owns." 102 | }, 103 | "DialogAria": { 104 | "prefix": [ 105 | "DialogAria" 106 | ], 107 | "body": [ 108 | "role='dialog'", 109 | "aria-labelledby='$1'", 110 | "aria-describedby='$2'", 111 | "aria-modal={true}", 112 | "" 113 | ], 114 | "description": "Adds aria attributes for a dialog. A dialog is a window separate from the rest of the webpage like a modal." 115 | }, 116 | "DocumentAria": { 117 | "prefix": [ 118 | "DocumentAria" 119 | ], 120 | "body": [ 121 | "role='document'", 122 | "tabIndex={0}", 123 | "aria-expanded={$1}", 124 | "" 125 | ], 126 | "description": "Add `role='document'` to application or other interactive widget role to switch to browse or read mode. Add `aria-expanded` to indicate whether the document is currently expanded or collapsed if the document element is collapsible." 127 | }, 128 | "FeedAria": { 129 | "prefix": [ 130 | "FeedAria" 131 | ], 132 | "body": [ 133 | "role='feed'", 134 | "aria-labelledby='$1'", 135 | "aria-busy={$2}", 136 | "" 137 | ], 138 | "description": "Add `role='feed'` to a dynamic list of articles. Add `aria-busy` if articles are being loaded or have been removed from the feed." 139 | }, 140 | "FigureAria": { 141 | "prefix": [ 142 | "FigureAria" 143 | ], 144 | "body": [ 145 | "role='figure'", 146 | "aria-label='$1'", 147 | "aria-labelledby='$2'", 148 | "aria-describedby='$3'", 149 | "" 150 | ], 151 | "description": "Add `role='figure'` to identify a figure inside page content where appropriate semantics do not already exist. Elements can be one or more images, code snippets, or other content that puts across information in a different way to a regular flow of text. Add `aria-labelledby` when the text is a concise label. Add `aria-describedby` when the text is a longer description. Add `aria-label` if there is no element containing text that could serve as a label." 152 | }, 153 | "ImageAria": { 154 | "prefix": [ 155 | "ImageAria" 156 | ], 157 | "body": [ 158 | "role='img'", 159 | "aria-label='$1'" 160 | ], 161 | "description": "Add `role='img'` to identify a set of content as a single image that has multiple elements. Elements can be images, text, emojis or other content that delivers information visually. Add `aria-label` for descriptive alt text for the image. `aria-label` can be replaced with `aria-labelledby` if descriptive text is provide in another element within the role." 162 | }, 163 | "LinkAria": { 164 | "prefix": [ 165 | "LinkAria" 166 | ], 167 | "body": [ 168 | "role='link'", 169 | "tabIndex={0}", 170 | "alt='$1'", 171 | "aria-label='$2'", 172 | "" 173 | ], 174 | "description": "Add `role='link'` to elements that act as hyperlinks. Ensure the link can be navigated to via the keyboard. If the link role is added to an image add `alt` text. Add an `aria-label` if the link does not provide a descriptive text label." 175 | }, 176 | "ListAria": { 177 | "prefix": ["ListAria"], 178 | "body": ["role='list'"], 179 | "description": "Add `role='list'` to identify a list of items." 180 | }, 181 | "ListItemAria": { 182 | "prefix": ["ListItemAria"], 183 | "body": ["role='listitem'"], 184 | "description": "Add `role='listitem'` to identify a list item contained inside the list." 185 | }, 186 | "LoadingAria": { 187 | "prefix": [ 188 | "LoadingAria" 189 | ], 190 | "body": [ 191 | "role='status'", 192 | "aria-live='polite'", 193 | "aria-label='Loading'" 194 | ], 195 | "description": "Add `role='status'` and `aria-live='polite'` to element wrapping a loading spinner or indicator. The live region must be present in the DOM before the loading indicator has rendered. Add `aria-label='Loading'` to loading indicator if no other text element or content is passed." 196 | }, 197 | "MeterAria": { 198 | "prefix": [ 199 | "MeterAria" 200 | ], 201 | "body": [ 202 | "role='meter'", 203 | "aria-label='$1'", 204 | "aria-labelledby='$2'", 205 | "aria-describedby='$3'", 206 | "aria-valuemax={$4}", 207 | "aria-valuemin={$5}", 208 | "aria-valuenow={$6}", 209 | "aria-valuetext='$7'", 210 | "" 211 | ], 212 | "description": "Add `role='meter'` to identify an element being used as a meter. A meter is a graphical display of a numeric value within a defined range. Each element must have either an `aria-label` or `aria-labelledby`. Add `aria-labelledby` to point to an element with text that describes the meter. Add `aria-valuenow` to indicate the current value of the meter, which is between the `aria-valuemin` and `aria-valuemax`. Add `aria-valuetext` to make the meter value understandable. Add `aria-valuemin` to indicate the minimum value, which is less than `aria-valuemax`. Add `aria-valuemax` to indicate the maximum value, which is greater than `aria-valuemin`. " 213 | }, 214 | "RadioAria": { 215 | "prefix": [ 216 | "RadioAria" 217 | ], 218 | "body": [ 219 | "role='radio'", 220 | "tabIndex={$1}", 221 | "aria-checked={$2}", 222 | "" 223 | ], 224 | "description": "Add `role='radio'` to a checkable interactive control. Use radio in place of checkbox if only one item in a group can be checked. Add `aria-checked` to indicate the state of the checkbox." 225 | }, 226 | "SearchboxAria" : { 227 | "prefix": [ 228 | "SearchboxAria" 229 | ], 230 | "body": [ 231 | "role='searchbox'", 232 | "aria-activedescendant='$1'", 233 | "aria-multiline={$2}", 234 | "aria-required={$3}", 235 | "aria-readonly={$4}", 236 | "aria-labelledby='$5'", 237 | "aria-placeholder='$6'", 238 | "aria-autocomplete='$7'", 239 | "" 240 | ], 241 | "description": "Add `role='searchbox'` to a textbox intended for specifying search criteria." 242 | }, 243 | "SeparatorAria": { 244 | "prefix": [ 245 | "SeparatorAria" 246 | ], 247 | "body": [ 248 | "role='separator'", 249 | "aria-orientation = 'horizontal'", 250 | "aria-valuemax={${1:0}}", 251 | "aria-valuemin={${2:100}}", 252 | "aria-valuenow={${3:50}}", 253 | "" 254 | ], 255 | "description": "Add `role='separator'` to a HR tag. Setting role='separator' automatically sets aria-orientation = 'horizontal'." 256 | }, 257 | "SliderAria": { 258 | "prefix": [ 259 | "SliderAria" 260 | ], 261 | "body": [ 262 | "role='slider'", 263 | "tabIndex={0}", 264 | "aria-orientation='$1'", 265 | "aria-valuemax={$2}", 266 | "aria-valuemin={$3}", 267 | "aria-valuenow={$4}", 268 | "aria-valuetext='$5'", 269 | "aria-labelledby='$6'", 270 | "" 271 | ], 272 | "description": "Add `role='slider'` to allow users to select from a certain range. Add `aria-orientation` to indicate what direction the slider is oriented in. Add `aria-valuemin` to indicate the minimum value. Add `aria-valuemax` to indicate the maximum value. Add `aria-valuenow` to indicate the current value. If the value is not represented by a number add `aria-valuetext` in place of aria-valuenow." 273 | }, 274 | "SwitchAria": { 275 | "prefix": [ 276 | "SwitchAria" 277 | ], 278 | "body": [ 279 | "role='switch'", 280 | "aria-checked={$1}", 281 | "aria-readonly={$2}", 282 | "" 283 | ], 284 | "description": "Use `role='switch'` on checkboxes that represent an 'on' or 'off' state. Add `aria-checked` to indicate whether component is on or off. Add `aria-required` if the field is required." 285 | }, 286 | "TextboxAria": { 287 | "prefix": [ 288 | "TextboxAria" 289 | ], 290 | "body": [ 291 | "role='textbox'", 292 | "aria-activedescendant='$1'", 293 | "aria-multiline={$2}", 294 | "aria-required={$3}", 295 | "aria-readonly={$4}", 296 | "aria-labelledby='$5'", 297 | "aria-placeholder='$6'", 298 | "aria-autocomplete='$7'", 299 | "" 300 | ], 301 | "description": "Use `role='textbox'` on elements that allow input of free-form text. Add `aria-activedescendant` to indicate the current active child (for example if the textbox has an autocomplete popup and the focus changes to the popup). Add `aria-autocomplete` to indicate if the textbox will display a list of suggestions. Use `aria-multiline` if the textbox can contain multiple lines of input. Add `aria-placeholder` to give users a hint of what the input should contain. Add `aria-readonly` if the user cannot modify the value. Add `aria-required` if the field is required." 302 | }, 303 | "TabPanelAria": { 304 | "prefix": ["TabpanelAria"], 305 | "body": [ 306 | "role='tabpanel'", 307 | "aria-controls='$1'", 308 | "aria-labelledby='$2'", 309 | "aria-details='$3'", 310 | "aria-haspopup='$4'", 311 | "aria-keyshortcuts='$5'" 312 | ], 313 | "description": "Use `role='tabpanel'` on elements that contains the content associated with a tab. Add `aria-controls` identifies the element (or elements) whose contents or presence are controlled by the current element (For example a tab controls the display of its associated tab panel). Add `aria-labelledby` Identifies the element (or elements) that labels the current element. Add `aria-details to identify the element that provides a detailed, extended description for the object. Add `aria-haspopup` Indicates the availability and type of interactive popup element, such as menu or dialog. Add `aria-readonly` if the user cannot modify the value. Add `aria-keyshortcuts` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." 314 | }, 315 | "TimerAria":{ 316 | "prefix": [ 317 | "TimerAria" 318 | ], 319 | "body":[ 320 | "role='timer'", 321 | "aria-label='$1'", 322 | "aria-live='$2", 323 | "aria-describedby='$3'", 324 | "aria-roledescription='$4'", 325 | "aria-atomic={$5}" 326 | ], 327 | "description":"Add `role='timer'` to indicate to assistive technologies that an element is a numerical counter listing the amount of elapsed time from a starting point or the remaining time until an end point. Add `aria-label` to provide the name of the timer. Add `aria-live` to explicitly denote a live region (Elements with the role timer have an implicit aria-live value of off). Add `aria-describedby` to indicate the idref of an element that contains additional instructions for navigating or operating this element. Add `aria-roledescription` o give the timer a more descriptive role text for screen readers to speak. Add `aria-atomic` to set whether or not the screen reader should always present the live region as a whole, even if only part of the region changes." 328 | } 329 | } 330 | --------------------------------------------------------------------------------