From 62a5d3491b5ecd15f739c1c60853258bb5e94571 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 18 Oct 2023 14:14:37 +0000 Subject: [PATCH 1/4] Bump @babel/traverse from 7.22.10 to 7.23.2 Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.10 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] --- package-lock.json | 193 ++++++++++++++++++++++++++-------------------- 1 file changed, 110 insertions(+), 83 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ab88f7e5c5..0b95f6e74c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "primeng", - "version": "16.4.1", + "version": "16.5.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "primeng", - "version": "16.4.1", + "version": "16.5.1", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@docsearch/js": "^3.3.4" @@ -44,9 +44,9 @@ "domino": "^2.1.6", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", - "eslint-plugin-import": "latest", - "eslint-plugin-jsdoc": "latest", - "eslint-plugin-prefer-arrow": "latest", + "eslint-plugin-import": "*", + "eslint-plugin-jsdoc": "*", + "eslint-plugin-prefer-arrow": "*", "express": "^4.18.2", "file-saver": "^2.0.5", "gulp": "^4.0.2", @@ -903,12 +903,12 @@ "dev": true }, "node_modules/@babel/code-frame": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz", - "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==", + "version": "7.22.13", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", + "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", "dev": true, "dependencies": { - "@babel/highlight": "^7.22.10", + "@babel/highlight": "^7.22.13", "chalk": "^2.4.2" }, "engines": { @@ -1102,22 +1102,36 @@ } }, "node_modules/@babel/helper-environment-visitor": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", - "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", "dev": true, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-function-name": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz", - "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "dev": true, "dependencies": { - "@babel/template": "^7.22.5", - "@babel/types": "^7.22.5" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-function-name/node_modules/@babel/template": { + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", + "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.22.13", + "@babel/parser": "^7.22.15", + "@babel/types": "^7.22.15" }, "engines": { "node": ">=6.9.0" @@ -1279,9 +1293,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", - "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "dev": true, "engines": { "node": ">=6.9.0" @@ -1325,12 +1339,12 @@ } }, "node_modules/@babel/highlight": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz", - "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", + "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", "dev": true, "dependencies": { - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", "js-tokens": "^4.0.0" }, @@ -1339,9 +1353,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", - "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", + "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -2616,19 +2630,19 @@ } }, "node_modules/@babel/traverse": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz", - "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", "dev": true, "dependencies": { - "@babel/code-frame": "^7.22.10", - "@babel/generator": "^7.22.10", - "@babel/helper-environment-visitor": "^7.22.5", - "@babel/helper-function-name": "^7.22.5", + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.22.10", - "@babel/types": "^7.22.10", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", "debug": "^4.1.0", "globals": "^11.1.0" }, @@ -2637,12 +2651,12 @@ } }, "node_modules/@babel/traverse/node_modules/@babel/generator": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz", - "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", + "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", "dev": true, "dependencies": { - "@babel/types": "^7.22.10", + "@babel/types": "^7.23.0", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -2652,13 +2666,13 @@ } }, "node_modules/@babel/types": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz", - "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", + "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", "dev": true, "dependencies": { "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" }, "engines": { @@ -23862,12 +23876,12 @@ "dev": true }, "@babel/code-frame": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.10.tgz", - "integrity": "sha512-/KKIMG4UEL35WmI9OlvMhurwtytjvXoFcGNrOvyG9zIzA8YmPjVtIZUf7b05+TPO7G7/GEmLHDaoCgACHl9hhA==", + "version": "7.22.13", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", + "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", "dev": true, "requires": { - "@babel/highlight": "^7.22.10", + "@babel/highlight": "^7.22.13", "chalk": "^2.4.2" } }, @@ -24017,19 +24031,32 @@ } }, "@babel/helper-environment-visitor": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz", - "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz", + "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==", "dev": true }, "@babel/helper-function-name": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz", - "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz", + "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==", "dev": true, "requires": { - "@babel/template": "^7.22.5", - "@babel/types": "^7.22.5" + "@babel/template": "^7.22.15", + "@babel/types": "^7.23.0" + }, + "dependencies": { + "@babel/template": { + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", + "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.22.13", + "@babel/parser": "^7.22.15", + "@babel/types": "^7.22.15" + } + } } }, "@babel/helper-hoist-variables": { @@ -24143,9 +24170,9 @@ "dev": true }, "@babel/helper-validator-identifier": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", - "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", + "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", "dev": true }, "@babel/helper-validator-option": { @@ -24177,20 +24204,20 @@ } }, "@babel/highlight": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.10.tgz", - "integrity": "sha512-78aUtVcT7MUscr0K5mIEnkwxPE0MaxkR5RxRwuHaQ+JuU5AmTPhY+do2mdzVTnIJJpyBglql2pehuBIWHug+WQ==", + "version": "7.22.20", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", + "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", "dev": true, "requires": { - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "chalk": "^2.4.2", "js-tokens": "^4.0.0" } }, "@babel/parser": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.10.tgz", - "integrity": "sha512-lNbdGsQb9ekfsnjFGhEiF4hfFqGgfOP3H3d27re3n+CGhNuTSUEQdfWk556sTLNTloczcdM5TYF2LhzmDQKyvQ==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", + "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", "dev": true }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { @@ -25047,30 +25074,30 @@ } }, "@babel/traverse": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.10.tgz", - "integrity": "sha512-Q/urqV4pRByiNNpb/f5OSv28ZlGJiFiiTh+GAHktbIrkPhPbl90+uW6SmpoLyZqutrg9AEaEf3Q/ZBRHBXgxig==", + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", "dev": true, "requires": { - "@babel/code-frame": "^7.22.10", - "@babel/generator": "^7.22.10", - "@babel/helper-environment-visitor": "^7.22.5", - "@babel/helper-function-name": "^7.22.5", + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.22.10", - "@babel/types": "^7.22.10", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", "debug": "^4.1.0", "globals": "^11.1.0" }, "dependencies": { "@babel/generator": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.10.tgz", - "integrity": "sha512-79KIf7YiWjjdZ81JnLujDRApWtl7BxTqWD88+FFdQEIOG8LJ0etDOM7CXuIgGJa55sGOwZVwuEsaLEm0PJ5/+A==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.0.tgz", + "integrity": "sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==", "dev": true, "requires": { - "@babel/types": "^7.22.10", + "@babel/types": "^7.23.0", "@jridgewell/gen-mapping": "^0.3.2", "@jridgewell/trace-mapping": "^0.3.17", "jsesc": "^2.5.1" @@ -25079,13 +25106,13 @@ } }, "@babel/types": { - "version": "7.22.10", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.10.tgz", - "integrity": "sha512-obaoigiLrlDZ7TUQln/8m4mSqIW2QFeOrCQc9r+xsaHGNoplVNYlRVpsfE8Vj35GEm2ZH4ZhrNYogs/3fj85kg==", + "version": "7.23.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.0.tgz", + "integrity": "sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==", "dev": true, "requires": { "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.5", + "@babel/helper-validator-identifier": "^7.22.20", "to-fast-properties": "^2.0.0" } }, From a6cce5e80237f7aa6560da436a42763834912fc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 20 Nov 2023 20:13:16 +0300 Subject: [PATCH 2/4] Code format --- .../components/autocomplete/autocomplete.ts | 8 +- src/app/components/dropdown/dropdown.ts | 14 +- src/app/components/listbox/listbox.ts | 6 +- src/app/components/multiselect/multiselect.ts | 22 +- src/app/components/orderlist/orderlist.ts | 2 +- src/app/components/sidebar/sidebar.ts | 7 +- src/app/components/table/table.ts | 73 ++-- src/app/components/tooltip/tooltip.ts | 5 +- src/app/components/treetable/treetable.ts | 25 +- .../showcase/doc/chart/accessibilitydoc.ts | 27 +- .../showcase/doc/dataview/accessibilitydoc.ts | 63 ++-- .../showcase/doc/dialog/accessibilitydoc.ts | 125 ++++--- src/app/showcase/doc/dock/accessibilitydoc.ts | 109 +++--- src/app/showcase/doc/dropdown/basicdoc.ts | 3 +- .../showcase/doc/listbox/virtualscrolldoc.ts | 6 +- .../doc/multiselect/virtualscrolldoc.ts | 6 +- .../doc/orderlist/accessibilitydoc.ts | 199 +++++----- .../doc/organizationchart/accessibilitydoc.ts | 65 ++-- .../showcase/doc/overlay/accessibilitydoc.ts | 121 ++++--- .../doc/paginator/accessibilitydoc.ts | 95 +++-- .../showcase/doc/picklist/accessibilitydoc.ts | 199 +++++----- .../showcase/doc/scroller/accessibilitydoc.ts | 19 +- .../showcase/doc/table/accessibilitydoc.ts | 286 ++++++++------- src/app/showcase/doc/table/columntoggledoc.ts | 42 +-- .../showcase/doc/timeline/accessibilitydoc.ts | 13 +- src/app/showcase/doc/tree/accessibilitydoc.ts | 121 ++++--- .../doc/treeselect/accessibilitydoc.ts | 339 +++++++++--------- .../doc/treetable/accessibilitydoc.ts | 177 ++++----- src/app/showcase/doc/treetable/basicdoc.ts | 2 +- .../doc/virtualscroller/accessibilitydoc.ts | 19 +- 30 files changed, 1095 insertions(+), 1103 deletions(-) diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 39f8dc3eba1..6290bbcb397 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -1570,13 +1570,13 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr onOverlayAnimationStart(event: AnimationEvent) { if (event.toState === 'visible') { this.itemsWrapper = DomHandler.findSingle(this.overlayViewChild.overlayViewChild?.nativeElement, this.virtualScroll ? '.p-scroller' : '.p-autocomplete-panel'); - - if(this.virtualScroll) { + + if (this.virtualScroll) { this.scroller?.setContentEl(this.itemsViewChild?.nativeElement); this.scroller.viewInit(); } - if(this.visibleOptions() && this.visibleOptions().length) { - if(this.virtualScroll) { + if (this.visibleOptions() && this.visibleOptions().length) { + if (this.virtualScroll) { const selectedIndex = this.modelValue() ? this.focusedOptionIndex() : -1; if (selectedIndex !== -1) { diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 35c85c61fe3..ff0502dce72 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -1051,7 +1051,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.updateModel(value, event); this.focusedOptionIndex.set(this.findSelectedOptionIndex()); isHide && this.hide(true); - (preventChange === false) && this.onChange.emit({originalEvent: event, value: value}); + preventChange === false && this.onChange.emit({ originalEvent: event, value: value }); } onOptionMouseEnter(event, index) { @@ -1072,14 +1072,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.resetFilter(); } this.value = value; - + this.allowModelChange() && this.onModelChange(value); - this.modelValue.set(this.value) + this.modelValue.set(this.value); this.updateEditableLabel(); this.cd.markForCheck(); } - allowModelChange(){ + allowModelChange() { return this.autoDisplayFirst && !this.placeholder && !this.modelValue() && !this.editable && this.options && this.options.length; } @@ -1191,7 +1191,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.onModelChange(value); this.updateModel(value, event); - this.onChange.emit({originalEvent: event, value: value}) + this.onChange.emit({ originalEvent: event, value: value }); } /** * Displays the panel. @@ -1276,7 +1276,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV onInputBlur(event: Event) { this.focused = false; - (this.overlayVisible === false) && this.onBlur.emit(event); + this.overlayVisible === false && this.onBlur.emit(event); if (!this.preventModelTouched) { this.onModelTouched(); @@ -1719,7 +1719,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV clear(event: Event) { this.updateModel(null, event); this.updateEditableLabel(); - this.onChange.emit({originalEvent: event, value: this.value}) + this.onChange.emit({ originalEvent: event, value: this.value }); this.onClear.emit(event); } } diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts index cc4f27e39a4..e9fcf60665e 100755 --- a/src/app/components/listbox/listbox.ts +++ b/src/app/components/listbox/listbox.ts @@ -862,18 +862,18 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, } DomHandler.focus(this.headerCheckboxViewChild.nativeElement); - if(this.selectAll !== null) { + if (this.selectAll !== null) { this.onSelectAllChange.emit({ originalEvent: event, checked: !this.allSelected() - }) + }); } else { const value = this.allSelected() ? [] : this.visibleOptions() .filter((option) => this.isValidOption(option)) .map((option) => this.getOptionValue(option)); - + this.updateModel(value, event); this.onChange.emit({ originalEvent: event, value: this.value }); } diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index ccaa2344c5e..c2c469c94ed 100755 --- a/src/app/components/multiselect/multiselect.ts +++ b/src/app/components/multiselect/multiselect.ts @@ -1086,7 +1086,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft return ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue() && this.modelValue().length > this.maxSelectedLabels ? this.modelValue().slice(0, this.maxSelectedLabels) : this.modelValue(); }); - constructor( public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {} + constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {} ngOnInit() { this.id = this.id || UniqueComponentId(); @@ -1242,7 +1242,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft index !== -1 && this.focusedOptionIndex.set(index); isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement); - + this.onChange.emit({ originalEvent: event, value: value, @@ -1677,7 +1677,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft } this.focusInputViewChild?.nativeElement.focus({ preventScroll: true }); this.onClick.emit(event); - this.cd.detectChanges() + this.cd.detectChanges(); } onFirstHiddenFocus(event) { @@ -1767,19 +1767,19 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft return; } - if(this.selectAll !== null) { + if (this.selectAll !== null) { this.onSelectAllChange.emit({ originalEvent: event, checked: !this.allSelected() - }) + }); } else { const value = this.allSelected() - ? [] - : this.visibleOptions() - .filter((option) => this.isValidOption(option)) - .map((option) => this.getOptionValue(option)); - - this.updateModel(value, event) + ? [] + : this.visibleOptions() + .filter((option) => this.isValidOption(option)) + .map((option) => this.getOptionValue(option)); + + this.updateModel(value, event); } DomHandler.focus(this.headerCheckboxViewChild.nativeElement); diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts index e2c5a5d068f..d9acf2a3be0 100755 --- a/src/app/components/orderlist/orderlist.ts +++ b/src/app/components/orderlist/orderlist.ts @@ -647,7 +647,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit { } onListFocus(event) { - const focusableEl = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-p-highlight="true"]') || DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section="item"]') + const focusableEl = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-p-highlight="true"]') || DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section="item"]'); if (focusableEl) { const findIndex = ObjectUtils.findIndexInList(focusableEl, this.listViewChild.nativeElement.children); this.focused = true; diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts index 86eb3f94211..f4ffbf8e18b 100755 --- a/src/app/components/sidebar/sidebar.ts +++ b/src/app/components/sidebar/sidebar.ts @@ -259,15 +259,14 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy, OnCh } ngOnChanges(changes: SimpleChanges): void { - if(changes.visible){ - if(!changes.visible.firstChange){ - if(changes.visible.currentValue === false){ + if (changes.visible) { + if (!changes.visible.firstChange) { + if (changes.visible.currentValue === false) { this.hide(); } } } } - ngAfterContentInit() { this.templates?.forEach((item) => { diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index f65337efa1b..3d28f6573fe 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -244,7 +244,12 @@ export class TableService { [pTableBodyTemplate]="bodyTemplate" [scrollerOptions]="scrollerOptions" > - + @@ -1408,8 +1413,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable dataToRender(data: any) { const _data = data || this.processedData; - - + if (_data && this.paginator) { const first = this.lazy ? 0 : this.first; return _data.slice(first, first + this.rows); @@ -1667,7 +1671,6 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable this.preventSelectionSetterPropagation = true; if (this.isMultipleSelectionMode() && event.originalEvent.shiftKey && this.anchorRowIndex != null) { - DomHandler.clearSelection(); if (this.rangeRowIndex != null) { this.clearSelectionRange(event.originalEvent); @@ -1869,7 +1872,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable let rangeStart, rangeEnd; let rangeRowIndex = this.rangeRowIndex; let anchorRowIndex = this.anchorRowIndex; - + if (rangeRowIndex > anchorRowIndex) { rangeStart = this.anchorRowIndex; rangeEnd = this.rangeRowIndex; @@ -3485,7 +3488,7 @@ export class SortIcon implements OnInit, OnDestroy { '[class.p-highlight]': 'selected', '[attr.tabindex]': 'setRowTabIndex()', '[attr.data-p-highlight]': 'selected', - '[attr.data-p-selectable-row]' : 'true' + '[attr.data-p-selectable-row]': 'true' } }) export class SelectableRow implements OnInit, OnDestroy { @@ -3508,7 +3511,7 @@ export class SelectableRow implements OnInit, OnDestroy { } setRowTabIndex() { - if(this.dt.selectionMode === 'single' || this.dt.selectionMode === 'multiple') { + if (this.dt.selectionMode === 'single' || this.dt.selectionMode === 'multiple') { return !this.dt.selection ? 0 : this.dt.anchorRowIndex === this.index ? 0 : -1; } } @@ -3538,8 +3541,8 @@ export class SelectableRow implements OnInit, OnDestroy { } @HostListener('keydown', ['$event']) - onKeyDown(event:KeyboardEvent){ - switch(event.code) { + onKeyDown(event: KeyboardEvent) { + switch (event.code) { case 'ArrowDown': this.onArrowDownKey(event); break; @@ -3559,21 +3562,20 @@ export class SelectableRow implements OnInit, OnDestroy { case 'Space': this.onSpaceKey(event); break; - + case 'Enter': this.onEnterKey(event); break; default: - if(event.code === 'KeyA' && (event.metaKey || event.ctrlKey)){ + if (event.code === 'KeyA' && (event.metaKey || event.ctrlKey)) { const data = this.dt.dataToRender(this.dt.rows); this.dt.selection = [...data]; - this.dt.selectRange(event, data.length -1); + this.dt.selectRange(event, data.length - 1); event.preventDefault(); } break; - } } @@ -3618,12 +3620,12 @@ export class SelectableRow implements OnInit, OnDestroy { rowIndex: this.index }); } - + onEndKey(event: KeyboardEvent) { const lastRow = this.findLastSelectableRow(); - lastRow && this.focusRowChange(this.el.nativeElement, lastRow) + lastRow && this.focusRowChange(this.el.nativeElement, lastRow); - if(event.ctrlKey && event.shiftKey) { + if (event.ctrlKey && event.shiftKey) { const data = this.dt.dataToRender(this.dt.rows); const lastSelectableRowIndex = DomHandler.getAttribute(lastRow, 'index'); @@ -3639,15 +3641,13 @@ export class SelectableRow implements OnInit, OnDestroy { firstRow && this.focusRowChange(this.el.nativeElement, firstRow); - if(event.ctrlKey && event.shiftKey) { + if (event.ctrlKey && event.shiftKey) { const data = this.dt.dataToRender(this.dt.rows); const firstSelectableRowIndex = DomHandler.getAttribute(firstRow, 'index'); this.dt.anchorRowIndex = this.dt.anchorRowIndex || firstSelectableRowIndex; this.dt.selection = data.slice(0, this.index + 1); - this.dt.selectRange(event, this.index) - - + this.dt.selectRange(event, this.index); } event.preventDefault(); } @@ -3655,11 +3655,11 @@ export class SelectableRow implements OnInit, OnDestroy { onSpaceKey(event) { this.onEnterKey(event); - if(event.shiftKey && this.dt.selection !== null) { + if (event.shiftKey && this.dt.selection !== null) { const data = this.dt.dataToRender(this.dt.rows); let index; - - if(ObjectUtils.isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) { + + if (ObjectUtils.isNotEmpty(this.dt.selection) && this.dt.selection.length > 0) { let firstSelectedRowIndex, lastSelectedRowIndex; firstSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[0], data); lastSelectedRowIndex = ObjectUtils.findIndexInList(this.dt.selection[this.dt.selection.length - 1], data); @@ -3668,11 +3668,10 @@ export class SelectableRow implements OnInit, OnDestroy { } else { index = ObjectUtils.findIndexInList(this.dt.selection, data); } - + this.dt.anchorRowIndex = index; this.dt.selection = index !== this.index ? data.slice(Math.min(index, this.index), Math.max(index, this.index) + 1) : [this.data]; - this.dt.selectRange(event, this.index) - + this.dt.selectRange(event, this.index); } event.preventDefault(); @@ -3687,7 +3686,7 @@ export class SelectableRow implements OnInit, OnDestroy { findLastSelectableRow() { const rows = DomHandler.find(this.dt.el.nativeElement, '.p-selectable-row'); - return rows ? rows[rows.length -1] : null; + return rows ? rows[rows.length - 1] : null; } findFirstSelectableRow() { @@ -4495,7 +4494,7 @@ export class CellEditor implements AfterContentInit { template: `
- +
@@ -4576,7 +4575,18 @@ export class TableRadioButton { template: `
- +
@@ -5260,7 +5270,6 @@ export class ColumnFilter implements AfterContentInit { toggleMenu() { this.overlayVisible = !this.overlayVisible; - } onToggleButtonKeyDown(event: KeyboardEvent) { @@ -5350,8 +5359,8 @@ export class ColumnFilter implements AfterContentInit { } focusOnFirstElement() { - if(this.overlay) { - DomHandler.focus(DomHandler.getFirstFocusableElement(this.overlay, '')) + if (this.overlay) { + DomHandler.focus(DomHandler.getFirstFocusableElement(this.overlay, '')); } } diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts index 52ec2d766dd..4dec559b8c0 100755 --- a/src/app/components/tooltip/tooltip.ts +++ b/src/app/components/tooltip/tooltip.ts @@ -297,10 +297,7 @@ export class Tooltip implements AfterViewInit, OnDestroy { onMouseLeave(e: MouseEvent) { if (!this.isAutoHide()) { - const valid = - DomHandler.hasClass(e.relatedTarget, 'p-tooltip') || - DomHandler.hasClass(e.relatedTarget, 'p-tooltip-text') || - DomHandler.hasClass(e.relatedTarget, 'p-tooltip-arrow'); + const valid = DomHandler.hasClass(e.relatedTarget, 'p-tooltip') || DomHandler.hasClass(e.relatedTarget, 'p-tooltip-text') || DomHandler.hasClass(e.relatedTarget, 'p-tooltip-arrow'); !valid && this.deactivate(); } else { this.deactivate(); diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts index 51a3e8d5edc..497ab8e3ea4 100755 --- a/src/app/components/treetable/treetable.ts +++ b/src/app/components/treetable/treetable.ts @@ -2446,7 +2446,7 @@ export class TTSortableColumn implements OnInit, OnDestroy { subscription: Subscription | undefined; get ariaSorted() { - if(this.sorted && this.tt.sortOrder < 0) return 'descending'; + if (this.sorted && this.tt.sortOrder < 0) return 'descending'; else if (this.sorted && this.tt.sortOrder > 0) return 'ascending'; else return 'none'; } @@ -2781,16 +2781,16 @@ export class TTSelectableRow implements OnInit, OnDestroy { @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) { - switch(event.code){ + switch (event.code) { case 'Enter': case 'Space': this.onEnterKey(event); - break; + break; default: break; } - } + } @HostListener('touchend', ['$event']) onTouchEnd(event: Event) { @@ -2800,7 +2800,7 @@ export class TTSelectableRow implements OnInit, OnDestroy { } onEnterKey(event) { - if(this.tt.selectionMode === 'checkbox') { + if (this.tt.selectionMode === 'checkbox') { this.tt.toggleNodeWithCheckbox({ originalEvent: event, rowNode: this.rowNode @@ -2928,7 +2928,7 @@ export class TTContextMenuRow { template: `
- +
@@ -3095,7 +3095,7 @@ export class TTHeaderCheckbox { @Directive({ selector: '[ttEditableColumn]', host: { - class: 'p-element', + class: 'p-element' } }) export class TTEditableColumn implements AfterViewInit { @@ -3316,7 +3316,6 @@ export class TreeTableCellEditor implements AfterContentInit { } }) export class TTRow { - get level() { return this.rowNode?.['level'] + 1; } @@ -3431,14 +3430,14 @@ export class TTRow { rows.forEach((row) => { row.tabIndex = -1; }); - + if (hasSelectedRow) { const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true'); selectedNodes[0].tabIndex = 0; - + return; } - + rows[0].tabIndex = 0; } } @@ -3511,8 +3510,8 @@ export class TTRow { [attr.data-pc-group-section]="'rowactionbutton'" > - - + + diff --git a/src/app/showcase/doc/chart/accessibilitydoc.ts b/src/app/showcase/doc/chart/accessibilitydoc.ts index b2010f1d35f..0af478aa29f 100644 --- a/src/app/showcase/doc/chart/accessibilitydoc.ts +++ b/src/app/showcase/doc/chart/accessibilitydoc.ts @@ -3,20 +3,19 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` -
- -
-

Screen Reader

-

- Chart components internally use canvas element, refer to the Chart.js accessibility guide - for more information. The canvas element can be customized with canvasProps property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be - able to provide fallback content like a table. -

-
- - -
` + template: `
+ +
+

Screen Reader

+

+ Chart components internally use canvas element, refer to the Chart.js accessibility guide for + more information. The canvas element can be customized with canvasProps property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to + provide fallback content like a table. +

+
+ + +
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/dataview/accessibilitydoc.ts b/src/app/showcase/doc/dataview/accessibilitydoc.ts index 8387bb2a5ba..f14758330d0 100644 --- a/src/app/showcase/doc/dataview/accessibilitydoc.ts +++ b/src/app/showcase/doc/dataview/accessibilitydoc.ts @@ -2,38 +2,37 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` -
- -

Screen Reader

-

- The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe the - buttons are derived from the aria.listView and aria.gridView properties of the locale API respectively. -

-

Refer to paginator accessibility documentation for the paginator of the component.

-

Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the buttons.
spaceToggles the checked state of a button.
-
- -
` + template: `
+ +

Screen Reader

+

+ The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe the buttons + are derived from the aria.listView and aria.gridView properties of the locale API respectively. +

+

Refer to paginator accessibility documentation for the paginator of the component.

+

Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the buttons.
spaceToggles the checked state of a button.
+
+ +
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/dialog/accessibilitydoc.ts b/src/app/showcase/doc/dialog/accessibilitydoc.ts index a881add0f38..62655815863 100644 --- a/src/app/showcase/doc/dialog/accessibilitydoc.ts +++ b/src/app/showcase/doc/dialog/accessibilitydoc.ts @@ -3,71 +3,70 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` -
- -

Screen Reader

-

- Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default - behavior. In addition aria-modal is added since focus is kept within the popup. -

-

It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.

-

Trigger element also requires aria-expanded and aria-controls to be handled explicitly.

-

- Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may usecloseButtonProps to customize the - element and override the default aria-label. -

+ template: `
+ +

Screen Reader

+

+ Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In + addition aria-modal is added since focus is kept within the popup. +

+

It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.

+

Trigger element also requires aria-expanded and aria-controls to be handled explicitly.

+

+ Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may usecloseButtonProps to customize the element + and override the default aria-label. +

- + -

Overlay Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the next the focusable element within the dialog.
shift + tabMoves focus to the previous the focusable element within the dialog.
escapeCloses the dialog if closeOnEscape is true.
-
-

Close Button Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
enterCloses the dialog.
spaceCloses the dialog.
-
- -
` +

Overlay Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the next the focusable element within the dialog.
shift + tabMoves focus to the previous the focusable element within the dialog.
escapeCloses the dialog if closeOnEscape is true.
+
+

Close Button Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
enterCloses the dialog.
spaceCloses the dialog.
+
+ +
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/dock/accessibilitydoc.ts b/src/app/showcase/doc/dock/accessibilitydoc.ts index 8daca1186d6..2e2f575750b 100644 --- a/src/app/showcase/doc/dock/accessibilitydoc.ts +++ b/src/app/showcase/doc/dock/accessibilitydoc.ts @@ -2,61 +2,60 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` -
- -

Screen Reader

-

- Dock component uses the menu role with the aria-orientation and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a - presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. -

-

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabAdd focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.
shift + tabAdd focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.
enterActivates the focused menuitem.
spaceActivates the focused menuitem.
down arrowMoves focus to the next menuitem in vertical layout.
up arrowMoves focus to the previous menuitem in vertical layout.
homeMoves focus to the first menuitem in horizontal layout.
endMoves focus to the last menuitem in horizontal layout.
-
- -
` + template: `
+ +

Screen Reader

+

+ Dock component uses the menu role with the aria-orientation and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role + whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. +

+

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabAdd focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.
shift + tabAdd focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.
enterActivates the focused menuitem.
spaceActivates the focused menuitem.
down arrowMoves focus to the next menuitem in vertical layout.
up arrowMoves focus to the previous menuitem in vertical layout.
homeMoves focus to the first menuitem in horizontal layout.
endMoves focus to the last menuitem in horizontal layout.
+
+ +
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/dropdown/basicdoc.ts b/src/app/showcase/doc/dropdown/basicdoc.ts index a0637105c0a..d03624b21f9 100644 --- a/src/app/showcase/doc/dropdown/basicdoc.ts +++ b/src/app/showcase/doc/dropdown/basicdoc.ts @@ -11,7 +11,8 @@ interface City { template: `

- Dropdown is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. + Dropdown is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note + that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.

diff --git a/src/app/showcase/doc/listbox/virtualscrolldoc.ts b/src/app/showcase/doc/listbox/virtualscrolldoc.ts index 237de69f5db..e302b3e5c08 100644 --- a/src/app/showcase/doc/listbox/virtualscrolldoc.ts +++ b/src/app/showcase/doc/listbox/virtualscrolldoc.ts @@ -38,7 +38,7 @@ export class VirtualScrollDoc { @Input() title: string; - items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })) + items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })); selectedItems!: any[]; @@ -50,8 +50,8 @@ export class VirtualScrollDoc { } onChange(event) { - const { value } = event - if(value) this.selectAll = value.length === this.items.length; + const { value } = event; + if (value) this.selectAll = value.length === this.items.length; } code: Code = { diff --git a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts index 6156be455e8..428ead48b97 100644 --- a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts +++ b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts @@ -34,7 +34,7 @@ export class VirtualScrollDoc { @Input() title: string; - items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })) + items = Array.from({ length: 100000 }, (_, i) => ({ label: `Item #${i}`, value: i })); selectedItems!: any[]; @@ -46,8 +46,8 @@ export class VirtualScrollDoc { } onChange(event) { - const { value } = event - if(value) this.selectAll = value.length === this.items.length; + const { value } = event; + if (value) this.selectAll = value.length === this.items.length; } code: Code = { diff --git a/src/app/showcase/doc/orderlist/accessibilitydoc.ts b/src/app/showcase/doc/orderlist/accessibilitydoc.ts index 3a39411e848..9c63a9e3234 100644 --- a/src/app/showcase/doc/orderlist/accessibilitydoc.ts +++ b/src/app/showcase/doc/orderlist/accessibilitydoc.ts @@ -3,108 +3,107 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

- Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role - with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. -

-

- Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo, - aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, - moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. -

+ template: ` +

Screen Reader

+

+ Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with + the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. +

+

+ Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo, + aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, + moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. +

- + -

OrderList Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the first selected option, if there is none then first option receives the focus.
up arrowMoves focus to the previous option.
down arrowMoves focus to the next option.
enterToggles the selected state of the focused option.
spaceToggles the selected state of the focused option.
homeMoves focus to the first option.
endMoves focus to the last option.
shift + down arrowMoves focus to the next option and toggles the selection state.
shift + up arrowMoves focus to the previous option and toggles the selection state.
shift + spaceSelects the items between the most recently selected option and the focused option.
control + shift + homeSelects the focused options and all the options up to the first one.
control + shift + endSelects the focused options and all the options down to the first one.
control + aSelects all options.
-
-

Buttons Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
enterExecutes button action.
spaceExecutes button action.
-
- ` +

OrderList Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the first selected option, if there is none then first option receives the focus.
up arrowMoves focus to the previous option.
down arrowMoves focus to the next option.
enterToggles the selected state of the focused option.
spaceToggles the selected state of the focused option.
homeMoves focus to the first option.
endMoves focus to the last option.
shift + down arrowMoves focus to the next option and toggles the selection state.
shift + up arrowMoves focus to the previous option and toggles the selection state.
shift + spaceSelects the items between the most recently selected option and the focused option.
control + shift + homeSelects the focused options and all the options up to the first one.
control + shift + endSelects the focused options and all the options down to the first one.
control + aSelects all options.
+
+

Buttons Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
enterExecutes button action.
spaceExecutes button action.
+
+ ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts index 1a2d053a25e..dcf7b456fff 100644 --- a/src/app/showcase/doc/organizationchart/accessibilitydoc.ts +++ b/src/app/showcase/doc/organizationchart/accessibilitydoc.ts @@ -2,39 +2,38 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

- Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level - of reader support in the upcoming versions. -

-

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus through the focusable elements within the chart.
enterToggles the expanded state of a node.
spaceToggles the expanded state of a node.
-
- ` + template: ` +

Screen Reader

+

+ Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of + reader support in the upcoming versions. +

+

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus through the focusable elements within the chart.
enterToggles the expanded state of a node.
spaceToggles the expanded state of a node.
+
+ ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/overlay/accessibilitydoc.ts b/src/app/showcase/doc/overlay/accessibilitydoc.ts index a4acce5eef2..95c4898a13f 100644 --- a/src/app/showcase/doc/overlay/accessibilitydoc.ts +++ b/src/app/showcase/doc/overlay/accessibilitydoc.ts @@ -3,67 +3,66 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` -
- -

Screen Reader

-

- Overlay component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition - aria-modal is added since focus is kept within the popup. -

-

- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Overlay adds aria-expanded state attribute and aria-controls to the - trigger so that the relation between the trigger and the popup is defined. -

-

Overlay Keyboard Support

-

When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the next the focusable element within the popup.
shift + tabMoves focus to the previous the focusable element within the popup.
escapeCloses the popup and moves focus to the trigger.
-
-

Close Button Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
enterCloses the popup and moves focus to the trigger.
spaceCloses the popup and moves focus to the trigger.
-
- -
` + template: `
+ +

Screen Reader

+

+ Overlay component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition + aria-modal is added since focus is kept within the popup. +

+

+ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary. Overlay adds aria-expanded state attribute and aria-controls to the + trigger so that the relation between the trigger and the popup is defined. +

+

Overlay Keyboard Support

+

When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the next the focusable element within the popup.
shift + tabMoves focus to the previous the focusable element within the popup.
escapeCloses the popup and moves focus to the trigger.
+
+

Close Button Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
enterCloses the popup and moves focus to the trigger.
spaceCloses the popup and moves focus to the trigger.
+
+ +
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/paginator/accessibilitydoc.ts b/src/app/showcase/doc/paginator/accessibilitydoc.ts index 9c9a8b8813b..401715573f0 100644 --- a/src/app/showcase/doc/paginator/accessibilitydoc.ts +++ b/src/app/showcase/doc/paginator/accessibilitydoc.ts @@ -2,54 +2,53 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` -
- -

Screen Reader

-

Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.

-

- First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel, aria.prevPageLabel, aria.nextPageLabel and aria.lastPageLabelproperties of - the locale API respectively. -

-

- Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" - as well. -

-

Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state.

-

- Rows per page dropdown internally uses a dropdown component, refer to the dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-labelfrom the - aria.rowsPerPage property of the locale API. -

-

Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API.

-

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus through the paginator elements.
enterExecutes the paginator element action.
spaceExecutes the paginator element action.
-
-

Rows Per Page Dropdown Keyboard Support

-

Refer to the dropdown documentation for more details about keyboard support.

- -
` + template: `
+ +

Screen Reader

+

Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.

+

+ First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel, aria.prevPageLabel, aria.nextPageLabel and aria.lastPageLabelproperties of the + locale API respectively. +

+

+ Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" as + well. +

+

Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state.

+

+ Rows per page dropdown internally uses a dropdown component, refer to the dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-labelfrom the + aria.rowsPerPage property of the locale API. +

+

Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API.

+

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus through the paginator elements.
enterExecutes the paginator element action.
spaceExecutes the paginator element action.
+
+

Rows Per Page Dropdown Keyboard Support

+

Refer to the dropdown documentation for more details about keyboard support.

+ +
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/picklist/accessibilitydoc.ts b/src/app/showcase/doc/picklist/accessibilitydoc.ts index b7a93eaf9e8..383b6ea2712 100644 --- a/src/app/showcase/doc/picklist/accessibilitydoc.ts +++ b/src/app/showcase/doc/picklist/accessibilitydoc.ts @@ -3,108 +3,107 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

- Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role - with the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. -

-

- Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo, - aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, - moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. -

+ template: ` +

Screen Reader

+

+ Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has + an option role with aria-selected and aria-disabled as their attributes. +

+

+ Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo, + aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, + moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. +

- + -

PickList Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the first selected option, if there is none then first option receives the focus.
up arrowMoves focus to the previous option.
down arrowMoves focus to the next option.
enterToggles the selected state of the focused option.
spaceToggles the selected state of the focused option.
homeMoves focus to the first option.
endMoves focus to the last option.
shift + down arrowMoves focus to the next option and toggles the selection state.
shift + up arrowMoves focus to the previous option and toggles the selection state.
shift + spaceSelects the items between the most recently selected option and the focused option.
control + shift + homeSelects the focused options and all the options up to the first one.
control + shift + endSelects the focused options and all the options down to the first one.
control + aSelects all options.
-
-

Buttons Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
enterExecutes button action.
spaceExecutes button action.
-
- ` +

PickList Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the first selected option, if there is none then first option receives the focus.
up arrowMoves focus to the previous option.
down arrowMoves focus to the next option.
enterToggles the selected state of the focused option.
spaceToggles the selected state of the focused option.
homeMoves focus to the first option.
endMoves focus to the last option.
shift + down arrowMoves focus to the next option and toggles the selection state.
shift + up arrowMoves focus to the previous option and toggles the selection state.
shift + spaceSelects the items between the most recently selected option and the focused option.
control + shift + homeSelects the focused options and all the options up to the first one.
control + shift + endSelects the focused options and all the options down to the first one.
control + aSelects all options.
+
+

Buttons Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
enterExecutes button action.
spaceExecutes button action.
+
+ ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/scroller/accessibilitydoc.ts b/src/app/showcase/doc/scroller/accessibilitydoc.ts index a7550d52f6c..fb1ec166488 100644 --- a/src/app/showcase/doc/scroller/accessibilitydoc.ts +++ b/src/app/showcase/doc/scroller/accessibilitydoc.ts @@ -2,16 +2,15 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

- Scroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized for - accessibility using listProps property. -

-

Keyboard Support

-

Component does not include any built-in interactive elements.

- ` + template: ` +

Screen Reader

+

+ Scroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized for + accessibility using listProps property. +

+

Keyboard Support

+

Component does not include any built-in interactive elements.

+ ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/table/accessibilitydoc.ts b/src/app/showcase/doc/table/accessibilitydoc.ts index 0dd79a59070..dba407153d2 100644 --- a/src/app/showcase/doc/table/accessibilitydoc.ts +++ b/src/app/showcase/doc/table/accessibilitydoc.ts @@ -2,150 +2,148 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` -
- -

Screen Reader

-

- Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers - utilizer aria-sort attribute either set to "ascending" or "descending". -

-

Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.

-

- Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton. The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the - locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row. -

-

- The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties - of the locale API. -

-

- The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup, aria-expanded and aria-controls to define the relation - between the button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use - aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and - aria.apply properties. filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria - labels as well. -

-

- Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow, aria.cancelEdit and aria.saveEdit used - for the aria-label. -

-

Paginator is a standalone component used inside the Table, refer to the paginator for more information about the accessibility features.

-

Keyboard Support

-

Any button element inside the Table used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys.

-

Sortable Headers Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves through the headers.
enterSorts the column.
spaceSorts the column.
-
-

Filter Menu Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves through the elements inside the popup.
escapeHides the popup.
-
-

Selection Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the first selected row, if there is none then first row receives the focus.
up arrowMoves focus to the previous row.
down arrowMoves focus to the next row.
enterToggles the selected state of the focused row depending on the metaKeySelection setting.
spaceToggles the selected state of the focused row depending on the metaKeySelection setting.
homeMoves focus to the first row.
endMoves focus to the last row.
shift + down arrowMoves focus to the next row and toggles the selection state.
shift + up arrowMoves focus to the previous row and toggles the selection state.
shift + spaceSelects the rows between the most recently selected row and the focused row.
control + shift + homeSelects the focused rows and all the options up to the first one.
control + shift + endSelects the focused rows and all the options down to the last one.
control + aSelects all rows.
-
- -
` + template: `
+ +

Screen Reader

+

+ Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer + aria-sort attribute either set to "ascending" or "descending". +

+

Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.

+

+ Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton. The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the + locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row. +

+

+ The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties of + the locale API. +

+

+ The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup, aria-expanded and aria-controls to define the relation between + the button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use + aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and aria.apply properties. + filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well. +

+

+ Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow, aria.cancelEdit and aria.saveEdit used for + the aria-label. +

+

Paginator is a standalone component used inside the Table, refer to the paginator for more information about the accessibility features.

+

Keyboard Support

+

Any button element inside the Table used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys.

+

Sortable Headers Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves through the headers.
enterSorts the column.
spaceSorts the column.
+
+

Filter Menu Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves through the elements inside the popup.
escapeHides the popup.
+
+

Selection Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the first selected row, if there is none then first row receives the focus.
up arrowMoves focus to the previous row.
down arrowMoves focus to the next row.
enterToggles the selected state of the focused row depending on the metaKeySelection setting.
spaceToggles the selected state of the focused row depending on the metaKeySelection setting.
homeMoves focus to the first row.
endMoves focus to the last row.
shift + down arrowMoves focus to the next row and toggles the selection state.
shift + up arrowMoves focus to the previous row and toggles the selection state.
shift + spaceSelects the rows between the most recently selected row and the focused row.
control + shift + homeSelects the focused rows and all the options up to the first one.
control + shift + endSelects the focused rows and all the options down to the last one.
control + aSelects all rows.
+
+ +
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts index 5c6a49407b8..882cb2bae86 100644 --- a/src/app/showcase/doc/table/columntoggledoc.ts +++ b/src/app/showcase/doc/table/columntoggledoc.ts @@ -14,27 +14,27 @@ interface Column {

This demo uses a multiselect component to implement toggleable columns.

- - - - - - - Code - - {{ col.header }} - - - - - - {{ product.code }} - - {{ product[col.field] }} - - - - + + + + + + + Code + + {{ col.header }} + + + + + + {{ product.code }} + + {{ product[col.field] }} + + + +
`, diff --git a/src/app/showcase/doc/timeline/accessibilitydoc.ts b/src/app/showcase/doc/timeline/accessibilitydoc.ts index a5a9ded0440..71d3b8f52b1 100644 --- a/src/app/showcase/doc/timeline/accessibilitydoc.ts +++ b/src/app/showcase/doc/timeline/accessibilitydoc.ts @@ -2,13 +2,12 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.

-

Keyboard Support

-

Component does not include any interactive elements.

- ` + template: ` +

Screen Reader

+

Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.

+

Keyboard Support

+

Component does not include any interactive elements.

+ ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/tree/accessibilitydoc.ts b/src/app/showcase/doc/tree/accessibilitydoc.ts index 917dd438a40..53258824a3e 100644 --- a/src/app/showcase/doc/tree/accessibilitydoc.ts +++ b/src/app/showcase/doc/tree/accessibilitydoc.ts @@ -2,67 +2,66 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

- Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with - aria-label, aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. The container element of a treenode has the group role. Checkbox - and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize, aria-posinset and - aria-level attributes are calculated implicitly and added to each treeitem. -

-

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tab - Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the - page tab sequence. -
shift + tab - Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in - the page tab sequence. -
enterSelects the focused treenode.
spaceSelects the focused treenode.
down arrowMoves focus to the next treenode.
up arrowMoves focus to the previous treenode.
right arrowIf node is closed, opens the node otherwise moves focus to the first child node.
left arrowIf node is open, closes the node otherwise moves focus to the parent node.
-
- ` + template: ` +

Screen Reader

+

+ Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with aria-label, + aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. The container element of a treenode has the group role. Checkbox and toggle icons are + hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize, aria-posinset and aria-level attributes are calculated + implicitly and added to each treeitem. +

+

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tab + Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the + page tab sequence. +
shift + tab + Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the + page tab sequence. +
enterSelects the focused treenode.
spaceSelects the focused treenode.
down arrowMoves focus to the next treenode.
up arrowMoves focus to the previous treenode.
right arrowIf node is closed, opens the node otherwise moves focus to the first child node.
left arrowIf node is open, closes the node otherwise moves focus to the parent node.
+
+ ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/treeselect/accessibilitydoc.ts b/src/app/showcase/doc/treeselect/accessibilitydoc.ts index a077bf93faf..7decf47114a 100644 --- a/src/app/showcase/doc/treeselect/accessibilitydoc.ts +++ b/src/app/showcase/doc/treeselect/accessibilitydoc.ts @@ -3,182 +3,181 @@ import { Code } from '../../domain/code'; @Component({ selector: 'accessibility-doc', - template: ` -
- -

Screen Reader

-

- Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and - aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. -

-

- The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label, - aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. Checkbox and toggle icons are hidden from screen readers as their parent element with - treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes - are calculated implicitly and added to each treeitem. -

+ template: `
+ +

Screen Reader

+

+ Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. + The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. +

+

+ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label, + aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. Checkbox and toggle icons are hidden from screen readers as their parent element with + treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are + calculated implicitly and added to each treeitem. +

-

If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.

- +

If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.

+ - + -

Closed State Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the treeselect element.
- space - Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.
- down arrow - Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
+

Closed State Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the treeselect element.
+ space + Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.
+ down arrow + Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
+
-

Popup Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.
shift + tabMoves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.
- enter - Selects the focused option, closes the popup if selection mode is single.
- space - Selects the focused option, closes the popup if selection mode is single.
- escape - Closes the popup, moves focus to the treeselect element.
- down arrow - Moves focus to the next treenode.
- up arrow - Moves focus to the previous treenode.
- right arrow - If node is closed, opens the node otherwise moves focus to the first child node.
- left arrow - If node is open, closes the node otherwise moves focus to the parent node.
-
+

Popup Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.
shift + tabMoves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.
+ enter + Selects the focused option, closes the popup if selection mode is single.
+ space + Selects the focused option, closes the popup if selection mode is single.
+ escape + Closes the popup, moves focus to the treeselect element.
+ down arrow + Moves focus to the next treenode.
+ up arrow + Moves focus to the previous treenode.
+ right arrow + If node is closed, opens the node otherwise moves focus to the first child node.
+ left arrow + If node is open, closes the node otherwise moves focus to the parent node.
+
-

Filter Input Keyboard Support

-
- - - - - - - - - - - - - - - - - -
KeyFunction
- enter - Closes the popup and moves focus to the treeselect element.
- escape - Closes the popup and moves focus to the treeselect element.
-
+

Filter Input Keyboard Support

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
+ enter + Closes the popup and moves focus to the treeselect element.
+ escape + Closes the popup and moves focus to the treeselect element.
+
-

Close Button Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- enter - Closes the popup and moves focus to the treeselect element.
- space - Closes the popup and moves focus to the treeselect element.
- escape - Closes the popup and moves focus to the treeselect element.
-
-
` +

Close Button Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ enter + Closes the popup and moves focus to the treeselect element.
+ space + Closes the popup and moves focus to the treeselect element.
+ escape + Closes the popup and moves focus to the treeselect element.
+
+
` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/treetable/accessibilitydoc.ts b/src/app/showcase/doc/treetable/accessibilitydoc.ts index 8126cb9f043..26284f242db 100644 --- a/src/app/showcase/doc/treetable/accessibilitydoc.ts +++ b/src/app/showcase/doc/treetable/accessibilitydoc.ts @@ -2,93 +2,96 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers - utilizer aria-sort attribute either set to "ascending" or "descending". -

-

Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.

-

When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.

-

Editable cells use custom templating so you need to manage aria roles and attributes manually if required.

-

Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features.

-

Sortable Headers Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves through the headers.
enterSorts the column.
spaceSorts the column.
-
-

Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tab - Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the - page tab sequence. -
shift + tab - Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in - the page tab sequence. -
enterSelects the focused treenode.
spaceSelects the focused treenode.
down arrowMoves focus to the next treenode.
up arrowMoves focus to the previous treenode.
right arrowIf node is closed, opens the node otherwise moves focus to the first child node.
left arrowIf node is open, closes the node otherwise moves focus to the parent node.
-
- ` + template: ` +

Screen Reader

+

+ Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer + aria-sort attribute either set to "ascending" or "descending". +

+

+ Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset, + aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating. +

+

When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute.

+

Editable cells use custom templating so you need to manage aria roles and attributes manually if required.

+

Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features.

+

Sortable Headers Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves through the headers.
enterSorts the column.
spaceSorts the column.
+
+

Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tab + Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the + page tab sequence. +
shift + tab + Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the + page tab sequence. +
enterSelects the focused treenode.
spaceSelects the focused treenode.
down arrowMoves focus to the next treenode.
up arrowMoves focus to the previous treenode.
right arrowIf node is closed, opens the node otherwise moves focus to the first child node.
left arrowIf node is open, closes the node otherwise moves focus to the parent node.
+
+ ` }) export class AccessibilityDoc { @Input() id: string; diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts index 1b024d18612..893502603ca 100644 --- a/src/app/showcase/doc/treetable/basicdoc.ts +++ b/src/app/showcase/doc/treetable/basicdoc.ts @@ -48,7 +48,7 @@ export class BasicDoc implements OnInit { ngOnInit() { this.nodeService.getFilesystem().then((files) => { - this.files = files.slice(0,5) + this.files = files.slice(0, 5); this.cd.markForCheck(); }); } diff --git a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts index 89627afc480..08a7078d11b 100644 --- a/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts +++ b/src/app/showcase/doc/virtualscroller/accessibilitydoc.ts @@ -2,16 +2,15 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'accessibility-doc', - template: ` - -

Screen Reader

-

- VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also - customized for accessibility using listProps property. -

-

Keyboard Support

-

Component does not include any built-in interactive elements.

- ` + template: ` +

Screen Reader

+

+ VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized + for accessibility using listProps property. +

+

Keyboard Support

+

Component does not include any built-in interactive elements.

+ ` }) export class AccessibilityDoc { @Input() id: string; From 71de6e601c43d64152d965570c8b4b7dc143d999 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 20 Nov 2023 20:13:35 +0300 Subject: [PATCH 3/4] Update versions --- src/app/showcase/data/versions.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json index 7e017109110..8d2b9a4a1d3 100644 --- a/src/app/showcase/data/versions.json +++ b/src/app/showcase/data/versions.json @@ -5,12 +5,12 @@ "url": "https://primeng.org" }, { - "version": "v15.4.12-lts", + "version": "v15.4.13-lts", "name": "v15", "url": "https://www.primefaces.org/primeng-v15-lts/#/" }, { - "version": "v14.2.15-lts", + "version": "v14.2.16-lts", "name": "v14", "url": "https://www.primefaces.org/primeng-v14-lts" }, From 21a64f0b0cb47cc42ec5ccdef2e7801080515810 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 20 Nov 2023 20:23:28 +0300 Subject: [PATCH 4/4] Update documentation --- src/app/showcase/doc/apidoc/index.json | 188 ++++++++++++++++++++++--- 1 file changed, 170 insertions(+), 18 deletions(-) diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 2e3d2179b1c..c066b4838f8 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -335,7 +335,7 @@ "animateonscroll": { "components": { "AnimateOnScroll": { - "description": "Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.", + "description": "AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.", "props": { "description": "Defines the input properties of the component.", "values": [ @@ -4996,18 +4996,18 @@ "description": "Placeholder text for the input." }, { - "name": "ariaLabel", + "name": "ariaLabelledBy", "optional": false, "readonly": false, "type": "string", - "description": "Establishes a string value that labels the component." + "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs." }, { - "name": "ariaLabelledBy", + "name": "ariaLabel", "optional": false, "readonly": false, "type": "string", - "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs." + "description": "Defines a string that labels the input for accessibility." }, { "name": "iconAriaLabel", @@ -6755,6 +6755,20 @@ "default": "true", "description": "Whether the chart is redrawn on screen size change." }, + { + "name": "ariaLabel", + "optional": false, + "readonly": false, + "type": "string", + "description": "Used to define a string that autocomplete attribute the current element." + }, + { + "name": "ariaLabelledBy", + "optional": false, + "readonly": false, + "type": "string", + "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs." + }, { "name": "data", "optional": false, @@ -7776,7 +7790,7 @@ "name": "defaultFocus", "optional": false, "readonly": false, - "type": "\"close\" | \"reject\" | \"accept\"", + "type": "\"none\" | \"close\" | \"reject\" | \"accept\"", "default": "accept", "description": "Element to receive the focus when the dialog gets visible." }, @@ -13714,7 +13728,7 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "true", + "default": "false", "description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically." }, { @@ -13818,6 +13832,13 @@ "readonly": false, "type": "string", "description": "When specified, filter displays with this value." + }, + { + "name": "selectAll", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Whether all data is selected." } ] }, @@ -13883,6 +13904,35 @@ } ], "description": "Callback to invoke when component loses focus." + }, + { + "name": "onSelectAllChange", + "parameters": [ + { + "name": "event", + "type": "ListboxSelectAllChangeEvent" + } + ], + "description": "Callback to invoke when all data is selected." + } + ] + }, + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [ + { + "name": "updateModel", + "parameters": [ + { + "name": "value", + "type": "any" + }, + { + "name": "event", + "type": "any" + } + ], + "description": "Updates the model value." } ] } @@ -13913,6 +13963,26 @@ } ] }, + { + "name": "ListboxSelectAllChangeEvent", + "description": "Custom change event.", + "props": [ + { + "name": "originalEvent", + "optional": false, + "readonly": false, + "type": "Event", + "description": "Browser event." + }, + { + "name": "checked", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Boolean value indicates whether all data is selected." + } + ] + }, { "name": "ListboxFilterEvent", "description": "Custom filter event.", @@ -13953,7 +14023,7 @@ }, { "name": "option", - "optional": false, + "optional": true, "readonly": false, "type": "any", "description": "Selected option" @@ -13980,7 +14050,7 @@ }, { "name": "option", - "optional": false, + "optional": true, "readonly": false, "type": "any", "description": "Selected option" @@ -14795,17 +14865,13 @@ "name": "displaySelectedLabel", "optional": false, "readonly": false, - "type": "boolean", - "default": "true", - "description": "Whether to show labels of selected item labels or use default label." + "type": "boolean" }, { "name": "maxSelectedLabels", "optional": false, "readonly": false, - "type": "number", - "default": "3", - "description": "Decides how many selected item labels to show at most." + "type": "number" }, { "name": "selectionLimit", @@ -15102,6 +15168,13 @@ "description": "Item size of item to be virtual scrolled.", "deprecated": "use virtualScrollItemSize property instead." }, + { + "name": "selectAll", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Whether all data is selected." + }, { "name": "focusOnHover", "optional": false, @@ -15237,12 +15310,36 @@ } ], "description": "Callback to invoke in lazy mode to load new data." + }, + { + "name": "onSelectAllChange", + "parameters": [ + { + "name": "event", + "type": "MultiSelectSelectAllChangeEvent" + } + ], + "description": "Callback to invoke when all data is selected." } ] }, "methods": { "description": "Defines methods that can be accessed by the component's reference.", "values": [ + { + "name": "updateModel", + "parameters": [ + { + "name": "value", + "type": "any" + }, + { + "name": "event", + "type": "any" + } + ], + "description": "Updates the model value." + }, { "name": "show", "parameters": [ @@ -15299,6 +15396,26 @@ } ] }, + { + "name": "MultiSelectSelectAllChangeEvent", + "description": "Custom change event.", + "props": [ + { + "name": "originalEvent", + "optional": false, + "readonly": false, + "type": "Event", + "description": "Browser event." + }, + { + "name": "checked", + "optional": false, + "readonly": false, + "type": "boolean", + "description": "Boolean value indicates whether all data is selected." + } + ] + }, { "name": "MultiSelectFilterEvent", "description": "Custom filter event.", @@ -15562,6 +15679,27 @@ "type": "string", "description": "Style class of the component." }, + { + "name": "tabindex", + "optional": false, + "readonly": false, + "type": "number", + "description": "Index of the element in tabbing order." + }, + { + "name": "ariaLabel", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines a string that labels the input for accessibility." + }, + { + "name": "ariaLabelledBy", + "optional": false, + "readonly": false, + "type": "string", + "description": "Specifies one or more IDs in the DOM that labels the input field." + }, { "name": "listStyle", "optional": false, @@ -17396,6 +17534,13 @@ "type": "string", "description": "Text for the source list caption" }, + { + "name": "tabindex", + "optional": false, + "readonly": false, + "type": "number", + "description": "Index of the element in tabbing order." + }, { "name": "rightButtonAriaLabel", "optional": false, @@ -23508,8 +23653,7 @@ "name": "position", "optional": false, "readonly": false, - "type": "\"center\" | \"top-right\" | \"top-left\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"bottom-center\"", - "default": "top-right", + "type": "ToastPositionType", "description": "Position of the toast in viewport." }, { @@ -24746,8 +24890,16 @@ "optional": false, "readonly": false, "type": "string", + "default": "0", "description": "Index of the element in tabbing order." }, + { + "name": "ariaLabel", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines a string that labels the input for accessibility." + }, { "name": "ariaLabelledBy", "optional": false, @@ -26938,4 +27090,4 @@ } } } -} +} \ No newline at end of file