Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added ARIA: TableAria #18 and CellAria #14 #26

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Added ARIA: TableAria #18 and CellAria #14 #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e377f3e
added ARIA:TableAria
Amishakumari544 Jul 16, 2021
aab8e44
added ARIA:TableAria
Amishakumari544 Jul 16, 2021
a6942f0
Updated Readme file with ARIA Table
Amishakumari544 Jul 16, 2021
31818a7
updated snippet
Amishakumari544 Jul 16, 2021
f487156
Add ARIA: Cell Role #14
Amishakumari544 Jul 17, 2021
d44d0d1
Removed Package file Updated Table
Amishakumari544 Jul 18, 2021
1921deb
vsix added to git ignore
Amishakumari544 Jul 18, 2021
0c0611b
updated package file
Amishakumari544 Jul 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ yarn-error.log*
dist/
node_modules/
coverage
.env
.env
accessibility-snippets-0.0.15
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@

- **RadioAria** - 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.

- **TableAria** - Add `role='table'` to allow us represents tabular data information presented in a two-dimensional table comprised of rows and columns of cells containing data.

- **CellAria** -Adds `role='cell'` aria attributes for a cell. A cell is identified as an element in a tabular container that do not contain column or row header information. “cell” are only valid within a construct that simulates a standard data table.

- **SliderAria** - 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.

- **SwitchAria** - 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.
Expand Down
Binary file added accessibility-snippets-0.0.15.vsix
View file
Open in desktop
Binary file not shown.
294 changes: 245 additions & 49 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,247 @@
{
"name": "accessibility-snippets",
"displayName": "accessibility-snippets",
"description": "snippets to help create accessible code",
"author": {
"name": "Kendall Gassner",
"email": "[email protected]"
},
"version": "0.0.15",
"icon": "media/hand-intuit-logo.png",
"engines": {
"vscode": "^1.53.0"
},
"categories": [
"Snippets"
],
"contributes": {
"snippets": [
{
"language": "css",
"path": "./snippets/css-snippets.code-snippets"
},
{
"language": "typescriptreact",
"path": "./snippets/react-snippets.code-snippets"
},
{
"language": "javascriptreact",
"path": "./snippets/react-snippets.code-snippets"
}
]
},
"scripts": {
"release": "auto shipit -vv",
"labelCheck": "auto pr-check"
},
"publisher": "accessibility-snippets",
"devDependencies": {
"@auto-it/all-contributors": "^10.16.6",
"@auto-it/vscode": "^10.16.6",
"auto": "^10.16.6"
},
"repository": "intuit/accessibility-snippets",
"auto": {
"plugins": [
"npm",
"all-contributors",
"vscode"
]
}
"name": "accessibility-snippets",
"version": "1.0.0",
"description": "<div align=\"center\">\r <img src=\"./media/hand-intuit-logo.png\" alt=\"Accessibility snippets logo\" width=\"100\"/>\r <h1>accessibility-snippets</h1>",
"main": "index.js",
"dependencies": {
"ansi-colors": "^4.1.1",
"all-contributors-cli": "^6.19.0",
"ansi-regex": "^5.0.0",
"ansi-styles": "^4.3.0",
"ansi-escapes": "^4.3.1",
"agent-base": "^6.0.2",
"argparse": "^1.0.10",
"array-back": "^3.1.0",
"anymatch": "^3.1.1",
"array-uniq": "^1.0.3",
"async": "^3.2.0",
"author-regex": "^1.0.0",
"array-union": "^1.0.2",
"auto": "^10.16.6",
"balanced-match": "^1.0.0",
"before-after-hook": "^2.1.1",
"await-to-js": "^2.1.1",
"braces": "^3.0.2",
"brace-expansion": "^1.1.11",
"boolbase": "^1.0.0",
"buffer-crc32": "^0.2.13",
"camelcase": "^5.3.1",
"bottleneck": "^2.19.5",
"chalk": "^4.1.0",
"callsites": "^3.1.0",
"cli-cursor": "^3.1.0",
"chardet": "^0.7.0",
"cheerio-select-tmp": "^0.1.1",
"cli-width": "^3.0.0",
"color-convert": "^2.0.1",
"command-line-application": "^0.10.1",
"cliui": "^6.0.0",
"command-line-usage": "^6.1.1",
"command-line-args": "^5.1.1",
"color-name": "^1.1.4",
"commander": "^6.2.1",
"cross-spawn": "^7.0.3",
"debug": "^4.3.1",
"decamelize": "^1.2.0",
"concat-map": "^0.0.1",
"dedent": "^0.7.0",
"deep-extend": "^0.6.0",
"deepmerge": "^4.2.2",
"denodeify": "^1.2.1",
"cosmiconfig": "^7.0.0",
"didyoumean": "^1.2.1",
"dir-glob": "^2.2.2",
"deprecation": "^2.3.1",
"dom-serializer": "^1.2.0",
"domelementtype": "^2.1.0",
"domutils": "^2.4.4",
"css-what": "^4.0.0",
"domhandler": "^4.0.0",
"dotenv": "^8.2.0",
"end-of-stream": "^1.4.4",
"emoji-regex": "^8.0.0",
"env-ci": "^5.0.2",
"entities": "^2.2.0",
"error-ex": "^1.3.2",
"endent": "^2.0.1",
"execa": "^4.1.0",
"escape-string-regexp": "^1.0.5",
"fast-glob": "^3.2.5",
"external-editor": "^3.1.0",
"fast-json-parse": "^1.0.3",
"fd-slicer": "^1.1.0",
"enquirer": "^2.3.6",
"figures": "^2.0.0",
"fastq": "^1.10.1",
"fill-range": "^7.0.1",
"find-up": "^2.1.0",
"find-replace": "^3.0.0",
"fs.realpath": "^1.0.0",
"fp-ts": "^2.9.5",
"get-caller-file": "^2.0.5",
"fromentries": "^1.3.2",
"get-monorepo-packages": "^1.2.0",
"gitlog": "^4.0.4",
"glob": "^7.1.6",
"get-stream": "^5.2.0",
"glob-parent": "^5.1.1",
"has-flag": "^4.0.0",
"globby": "^7.1.1",
"graceful-fs": "^4.2.6",
"human-signals": "^1.1.1",
"https-proxy-agent": "^5.0.0",
"iconv-lite": "^0.4.24",
"import-cwd": "^3.0.0",
"ignore": "^3.3.10",
"inherits": "^2.0.4",
"import-fresh": "^3.3.0",
"inquirer": "^7.3.3",
"import-from": "^3.0.0",
"inflight": "^1.0.6",
"ini": "^1.3.8",
"io-ts": "^2.2.14",
"is-arrayish": "^0.2.1",
"is-extglob": "^2.1.1",
"is-fullwidth-code-point": "^3.0.0",
"is-glob": "^4.0.1",
"is-number": "^7.0.0",
"is-plain-object": "^5.0.0",
"isexe": "^2.0.0",
"is-stream": "^2.0.0",
"java-properties": "^1.0.2",
"json-fixer": "^1.6.8",
"json-parse-better-errors": "^1.0.2",
"json-parse-even-better-errors": "^2.3.1",
"leven": "^3.1.0",
"js-tokens": "^4.0.0",
"lines-and-columns": "^1.1.6",
"load-json-file": "^4.0.0",
"linkify-it": "^2.2.0",
"lodash": "^4.17.20",
"log-symbols": "^4.0.0",
"lodash.chunk": "^4.2.0",
"mdurl": "^1.0.1",
"locate-path": "^2.0.0",
"markdown-it": "^10.0.0",
"meant": "^1.0.3",
"merge-stream": "^2.0.0",
"lru-cache": "^6.0.0",
"lodash.camelcase": "^4.3.0",
"merge2": "^1.4.1",
"micromatch": "^4.0.2",
"mimic-fn": "^2.1.0",
"mime": "^1.6.0",
"minimatch": "^3.0.4",
"ms": "^2.1.2",
"minimist": "^1.2.5",
"mute-stream": "^0.0.8",
"module-alias": "^2.2.2",
"npm-run-path": "^4.0.1",
"normalize-path": "^3.0.0",
"node-fetch": "^2.6.1",
"nth-check": "^2.0.0",
"objectorarray": "^1.0.4",
"once": "^1.4.0",
"onetime": "^5.1.2",
"os": "^0.1.1",
"osenv": "^0.1.5",
"os-homedir": "^1.0.2",
"os-tmpdir": "^1.0.2",
"p-limit": "^1.3.0",
"parse-author": "^2.0.0",
"parent-module": "^1.0.1",
"p-try": "^1.0.0",
"p-locate": "^2.0.0",
"parse-github-url": "^1.0.2",
"parse-json": "^5.2.0",
"parse5": "^6.0.1",
"parse-semver": "^1.1.1",
"parse5-htmlparser2-tree-adapter": "^6.0.1",
"parse-ms": "^2.1.0",
"path-type": "^4.0.0",
"path-exists": "^4.0.0",
"path-is-absolute": "^1.0.1",
"path-key": "^3.1.1",
"pify": "^3.0.0",
"pegjs": "^0.10.0",
"pend": "^1.2.0",
"picomatch": "^2.2.2",
"pump": "^3.0.0",
"pretty-ms": "^7.0.1",
"queue-microtask": "^1.2.2",
"pkg-conf": "^2.1.0",
"rc": "^1.2.8",
"read": "^1.0.7",
"reduce-flatten": "^2.0.0",
"regenerator-runtime": "^0.13.7",
"remove-markdown": "^0.3.0",
"registry-url": "^5.1.0",
"require-main-filename": "^2.0.0",
"resolve-from": "^5.0.0",
"restore-cursor": "^3.1.0",
"require-directory": "^2.1.1",
"run-async": "^2.4.1",
"reusify": "^1.0.4",
"rxjs": "^6.6.6",
"safer-buffer": "^2.1.2",
"run-parallel": "^1.2.0",
"semver": "^7.3.4",
"set-blocking": "^2.0.0",
"shebang-command": "^2.0.0",
"signal-exit": "^3.0.3",
"signale": "^1.4.0",
"shebang-regex": "^3.0.0",
"slash": "^1.0.0",
"sprintf-js": "^1.0.3",
"strip-final-newline": "^2.0.0",
"strip-json-comments": "^2.0.1",
"strip-bom": "^3.0.0",
"supports-color": "^7.2.0",
"table-layout": "^1.0.1",
"strip-ansi": "^6.0.0",
"terminal-link": "^2.1.1",
"supports-hyperlinks": "^2.1.0",
"tapable": "^2.2.0",
"through": "^2.3.8",
"string-width": "^4.2.0",
"tinycolor2": "^1.4.2",
"tslib": "^2.1.0",
"type-fest": "^0.20.2",
"to-regex-range": "^5.0.1",
"tunnel": "^0.0.4",
"typed-rest-client": "^1.2.0",
"typescript-memoize": "^1.0.0",
"uc.micro": "^1.0.6",
"universal-user-agent": "^6.0.0",
"typical": "^5.2.0",
"url-join": "^4.0.1",
"underscore": "^1.8.3",
"user-home": "^2.0.0",
"which": "^2.0.2",
"wordwrapjs": "^4.0.0",
"which-module": "^2.0.0",
"wrappy": "^1.0.2",
"wrap-ansi": "^6.2.0",
"y18n": "^4.0.1",
"yaml": "^1.10.0",
"yallist": "^4.0.0",
"yauzl": "^2.10.0",
"yargs-parser": "^18.1.3",
"yargs": "^15.4.1",
"yazl": "^2.5.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Amishakumari544/accessibility-snippets.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Amishakumari544/accessibility-snippets/issues"
},
"homepage": "https://github.com/Amishakumari544/accessibility-snippets#readme"
}
27 changes: 27 additions & 0 deletions snippets/react-snippets.code-snippets
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,33 @@
],
"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."
},
"TableAria": {
"prefix": [
"TableAria",
],
"body": [
"role='table'",
"aria-colcount='{$1}'",
"aria-rowcount={-1}",
"aria-label ={}",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this needs $2

"aria-describedby={$2}",
],
"description": "Add `role='table'` to allow us represents tabular data information presented in a two-dimensional table comprised of rows and columns of cells containing data. "
},
"CellAria": {
"prefix": [
"CellAria",
],
"body": [
"role='cell'",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

perfection!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry one thing i forgot to mention you shouldnt use bot the quotes and the brackets at the same time
quotes are for string values like aria-label for example.
and {} are for things like numbers

variable={$1} => variable={}
variableString='$1' => variable=''

"aria-colspan='{$1}'",
"aria-rowspan='{$2}'",
"aria-colindex={$3}",
"aria-rowindex={$4}",
""
],
"description": "Adds `role='cell'` aria attributes for a cell. A cell is identified as an element in a tabular container that do not contain column or row header information. “cell” are only valid within a construct that simulates a standard data table."
},
"SliderAria": {
"prefix": [
"SliderAria",
Expand Down
Loading