@wordpress/a11y 4.42.0 → 4.43.1-next.v.202604091042.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/README.md +1 -1
- package/build/index.cjs +1 -1
- package/build/index.cjs.map +3 -3
- package/build/script/add-container.cjs +1 -1
- package/build/script/add-container.cjs.map +3 -3
- package/build/script/add-intro-text.cjs.map +1 -1
- package/build/shared/clear.cjs +1 -1
- package/build/shared/clear.cjs.map +3 -3
- package/build/shared/filter-message.cjs +1 -1
- package/build/shared/filter-message.cjs.map +3 -3
- package/build/shared/index.cjs +1 -1
- package/build/shared/index.cjs.map +3 -3
- package/build-module/index.mjs +1 -1
- package/build-module/index.mjs.map +3 -3
- package/build-module/script/add-container.mjs +1 -1
- package/build-module/script/add-container.mjs.map +3 -3
- package/build-module/script/add-intro-text.mjs.map +1 -1
- package/build-module/shared/clear.mjs +1 -1
- package/build-module/shared/clear.mjs.map +3 -3
- package/build-module/shared/filter-message.mjs +1 -1
- package/build-module/shared/filter-message.mjs.map +3 -3
- package/build-module/shared/index.mjs +1 -1
- package/build-module/shared/index.mjs.map +3 -3
- package/build-types/index.d.ts +2 -2
- package/build-types/index.d.ts.map +1 -1
- package/build-types/index.native.d.ts +8 -0
- package/build-types/index.native.d.ts.map +1 -0
- package/build-types/script/add-container.d.ts +2 -2
- package/build-types/script/add-container.d.ts.map +1 -1
- package/build-types/script/add-intro-text.d.ts +1 -1
- package/build-types/shared/clear.d.ts.map +1 -1
- package/build-types/shared/filter-message.d.ts +2 -2
- package/build-types/shared/filter-message.d.ts.map +1 -1
- package/build-types/shared/index.d.ts +3 -3
- package/build-types/shared/index.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/{index.native.js → index.native.ts} +6 -3
- package/src/{index.js → index.ts} +1 -1
- package/src/script/{add-container.js → add-container.ts} +4 -2
- package/src/script/add-intro-text.ts +1 -1
- package/src/shared/{clear.js → clear.ts} +1 -1
- package/src/shared/{filter-message.js → filter-message.ts} +3 -3
- package/src/shared/{index.js → index.ts} +6 -3
- package/src/test/{index.test.js → index.test.ts} +7 -7
- /package/src/script/test/{add-container.test.js → add-container.test.ts} +0 -0
- /package/src/shared/test/{clear.test.js → clear.test.ts} +0 -0
- /package/src/shared/test/{filter-message.test.js → filter-message.test.ts} +0 -0
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ speak( 'The message you want to send to the ARIA live region', 'assertive' );
|
|
|
39
39
|
_Parameters_
|
|
40
40
|
|
|
41
41
|
- _message_ `string`: The message to be announced by assistive technologies.
|
|
42
|
-
- _ariaLive_ `['polite'|'assertive']`: The politeness level for aria-live; default: 'polite'.
|
|
42
|
+
- _ariaLive_ `['polite' | 'assertive']`: The politeness level for aria-live; default: 'polite'.
|
|
43
43
|
|
|
44
44
|
<!-- END TOKEN(Autogenerated API docs) -->
|
|
45
45
|
|
package/build/index.cjs
CHANGED
|
@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
|
-
// packages/a11y/src/index.
|
|
30
|
+
// packages/a11y/src/index.ts
|
|
31
31
|
var index_exports = {};
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
setup: () => setup,
|
package/build/index.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport domReady from '@wordpress/dom-ready';\n\n/**\n * Internal dependencies\n */\nimport addContainer from './script/add-container';\nimport addIntroText from './script/add-intro-text';\n\nexport { speak } from './shared/index';\n\n/**\n * Create the live regions.\n */\nexport function setup() {\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\tconst containerAssertive = document.getElementById(\n\t\t'a11y-speak-assertive'\n\t);\n\tconst containerPolite = document.getElementById( 'a11y-speak-polite' );\n\n\tif ( introText === null ) {\n\t\taddIntroText();\n\t}\n\n\tif ( containerAssertive === null ) {\n\t\taddContainer( 'assertive' );\n\t}\n\n\tif ( containerPolite === null ) {\n\t\taddContainer( 'polite' );\n\t}\n}\n\n/**\n * Run setup on domReady.\n */\ndomReady( setup );\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAqB;AAKrB,2BAAyB;AACzB,4BAAyB;AAEzB,oBAAsB;AAKf,SAAS,
|
|
3
|
+
"sources": ["../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport domReady from '@wordpress/dom-ready';\n\n/**\n * Internal dependencies\n */\nimport addContainer from './script/add-container';\nimport addIntroText from './script/add-intro-text';\n\nexport { speak } from './shared/index';\n\n/**\n * Create the live regions.\n */\nexport function setup(): void {\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\tconst containerAssertive = document.getElementById(\n\t\t'a11y-speak-assertive'\n\t);\n\tconst containerPolite = document.getElementById( 'a11y-speak-polite' );\n\n\tif ( introText === null ) {\n\t\taddIntroText();\n\t}\n\n\tif ( containerAssertive === null ) {\n\t\taddContainer( 'assertive' );\n\t}\n\n\tif ( containerPolite === null ) {\n\t\taddContainer( 'polite' );\n\t}\n}\n\n/**\n * Run setup on domReady.\n */\ndomReady( setup );\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAqB;AAKrB,2BAAyB;AACzB,4BAAyB;AAEzB,oBAAsB;AAKf,SAAS,QAAc;AAC7B,QAAM,YAAY,SAAS,eAAgB,uBAAwB;AACnE,QAAM,qBAAqB,SAAS;AAAA,IACnC;AAAA,EACD;AACA,QAAM,kBAAkB,SAAS,eAAgB,mBAAoB;AAErE,MAAK,cAAc,MAAO;AACzB,8BAAAA,SAAa;AAAA,EACd;AAEA,MAAK,uBAAuB,MAAO;AAClC,6BAAAC,SAAc,WAAY;AAAA,EAC3B;AAEA,MAAK,oBAAoB,MAAO;AAC/B,6BAAAA,SAAc,QAAS;AAAA,EACxB;AACD;AAAA,IAKA,iBAAAC,SAAU,KAAM;",
|
|
6
6
|
"names": ["addIntroText", "addContainer", "domReady"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
|
|
20
|
-
// packages/a11y/src/script/add-container.
|
|
20
|
+
// packages/a11y/src/script/add-container.ts
|
|
21
21
|
var add_container_exports = {};
|
|
22
22
|
__export(add_container_exports, {
|
|
23
23
|
default: () => addContainer
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/script/add-container.
|
|
4
|
-
"sourcesContent": ["/**\n * Build the live regions markup.\n *\n * @param {'polite'|'assertive'} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.\n *\n * @return
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOe,SAAR,
|
|
3
|
+
"sources": ["../../src/script/add-container.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Build the live regions markup.\n *\n * @param {'polite'|'assertive'} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.\n *\n * @return The ARIA live region HTML element.\n */\nexport default function addContainer(\n\tariaLive: string = 'polite'\n): HTMLDivElement {\n\tconst container = document.createElement( 'div' );\n\tcontainer.id = `a11y-speak-${ ariaLive }`;\n\tcontainer.className = 'a11y-speak-region';\n\n\tcontainer.setAttribute(\n\t\t'style',\n\t\t'position:absolute;' +\n\t\t\t'margin:-1px;' +\n\t\t\t'padding:0;' +\n\t\t\t'height:1px;' +\n\t\t\t'width:1px;' +\n\t\t\t'overflow:hidden;' +\n\t\t\t'clip-path:inset(50%);' +\n\t\t\t'border:0;' +\n\t\t\t'word-wrap:normal !important;' +\n\t\t\t'word-break:normal !important;'\n\t);\n\tcontainer.setAttribute( 'aria-live', ariaLive );\n\tcontainer.setAttribute( 'aria-relevant', 'additions text' );\n\tcontainer.setAttribute( 'aria-atomic', 'true' );\n\n\tconst { body } = document;\n\tif ( body ) {\n\t\tbody.appendChild( container );\n\t}\n\n\treturn container;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOe,SAAR,aACN,WAAmB,UACF;AACjB,QAAM,YAAY,SAAS,cAAe,KAAM;AAChD,YAAU,KAAK,cAAe,QAAS;AACvC,YAAU,YAAY;AAEtB,YAAU;AAAA,IACT;AAAA,IACA;AAAA,EAUD;AACA,YAAU,aAAc,aAAa,QAAS;AAC9C,YAAU,aAAc,iBAAiB,gBAAiB;AAC1D,YAAU,aAAc,eAAe,MAAO;AAE9C,QAAM,EAAE,KAAK,IAAI;AACjB,MAAK,MAAO;AACX,SAAK,YAAa,SAAU;AAAA,EAC7B;AAEA,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/script/add-intro-text.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Build the explanatory text to be placed before the aria live regions.\n *\n * This text is initially hidden from assistive technologies by using a `hidden`\n * HTML attribute which is then removed once a message fills the aria-live regions.\n *\n * @return
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Build the explanatory text to be placed before the aria live regions.\n *\n * This text is initially hidden from assistive technologies by using a `hidden`\n * HTML attribute which is then removed once a message fills the aria-live regions.\n *\n * @return The explanatory text HTML element.\n */\nexport default function addIntroText() {\n\tconst introText = document.createElement( 'p' );\n\n\tintroText.id = 'a11y-speak-intro-text';\n\tintroText.className = 'a11y-speak-intro-text';\n\tintroText.textContent = __( 'Notifications' );\n\n\tintroText.setAttribute(\n\t\t'style',\n\t\t'position:absolute;' +\n\t\t\t'margin:-1px;' +\n\t\t\t'padding:0;' +\n\t\t\t'height:1px;' +\n\t\t\t'width:1px;' +\n\t\t\t'overflow:hidden;' +\n\t\t\t'clip-path:inset(50%);' +\n\t\t\t'border:0;' +\n\t\t\t'word-wrap:normal !important;' +\n\t\t\t'word-break:normal !important;'\n\t);\n\tintroText.setAttribute( 'hidden', '' );\n\n\tconst { body } = document;\n\tif ( body ) {\n\t\tbody.appendChild( introText );\n\t}\n\n\treturn introText;\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AAUJ,SAAR,eAAgC;AACtC,QAAM,YAAY,SAAS,cAAe,GAAI;AAE9C,YAAU,KAAK;AACf,YAAU,YAAY;AACtB,YAAU,kBAAc,gBAAI,eAAgB;AAE5C,YAAU;AAAA,IACT;AAAA,IACA;AAAA,EAUD;AACA,YAAU,aAAc,UAAU,EAAG;AAErC,QAAM,EAAE,KAAK,IAAI;AACjB,MAAK,MAAO;AACX,SAAK,YAAa,SAAU;AAAA,EAC7B;AAEA,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build/shared/clear.cjs
CHANGED
|
@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
|
|
20
|
-
// packages/a11y/src/shared/clear.
|
|
20
|
+
// packages/a11y/src/shared/clear.ts
|
|
21
21
|
var clear_exports = {};
|
|
22
22
|
__export(clear_exports, {
|
|
23
23
|
default: () => clear
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/shared/clear.
|
|
4
|
-
"sourcesContent": ["/**\n * Clears the a11y-speak-region elements and hides the explanatory text.\n */\nexport default function clear() {\n\tconst regions = document.getElementsByClassName( 'a11y-speak-region' );\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\n\tfor ( let i = 0; i < regions.length; i++ ) {\n\t\tregions[ i ].textContent = '';\n\t}\n\n\t// Make sure the explanatory text is hidden from assistive technologies.\n\tif ( introText ) {\n\t\tintroText.setAttribute( 'hidden', 'hidden' );\n\t}\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGe,SAAR,
|
|
3
|
+
"sources": ["../../src/shared/clear.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Clears the a11y-speak-region elements and hides the explanatory text.\n */\nexport default function clear(): void {\n\tconst regions = document.getElementsByClassName( 'a11y-speak-region' );\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\n\tfor ( let i = 0; i < regions.length; i++ ) {\n\t\tregions[ i ].textContent = '';\n\t}\n\n\t// Make sure the explanatory text is hidden from assistive technologies.\n\tif ( introText ) {\n\t\tintroText.setAttribute( 'hidden', 'hidden' );\n\t}\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGe,SAAR,QAA+B;AACrC,QAAM,UAAU,SAAS,uBAAwB,mBAAoB;AACrE,QAAM,YAAY,SAAS,eAAgB,uBAAwB;AAEnE,WAAU,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAM;AAC1C,YAAS,CAAE,EAAE,cAAc;AAAA,EAC5B;AAGA,MAAK,WAAY;AAChB,cAAU,aAAc,UAAU,QAAS;AAAA,EAC5C;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
|
|
20
|
-
// packages/a11y/src/shared/filter-message.
|
|
20
|
+
// packages/a11y/src/shared/filter-message.ts
|
|
21
21
|
var filter_message_exports = {};
|
|
22
22
|
__export(filter_message_exports, {
|
|
23
23
|
default: () => filterMessage
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/shared/filter-message.
|
|
4
|
-
"sourcesContent": ["let previousMessage = '';\n\n/**\n * Filter the message to be announced to the screenreader.\n *\n * @param
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAI,kBAAkB;AASP,SAAR,cAAgC,
|
|
3
|
+
"sources": ["../../src/shared/filter-message.ts"],
|
|
4
|
+
"sourcesContent": ["let previousMessage = '';\n\n/**\n * Filter the message to be announced to the screenreader.\n *\n * @param message The message to be announced.\n *\n * @return The filtered message.\n */\nexport default function filterMessage( message: string ): string {\n\t/*\n\t * Strip HTML tags (if any) from the message string. Ideally, messages should\n\t * be simple strings, carefully crafted for specific use with A11ySpeak.\n\t * When re-using already existing strings this will ensure simple HTML to be\n\t * stripped out and replaced with a space. Browsers will collapse multiple\n\t * spaces natively.\n\t */\n\tmessage = message.replace( /<[^<>]+>/g, ' ' );\n\n\t/*\n\t * Safari + VoiceOver don't announce repeated, identical strings. We use\n\t * a `no-break space` to force them to think identical strings are different.\n\t */\n\tif ( previousMessage === message ) {\n\t\tmessage += '\\u00A0';\n\t}\n\n\tpreviousMessage = message;\n\n\treturn message;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAI,kBAAkB;AASP,SAAR,cAAgC,SAA0B;AAQhE,YAAU,QAAQ,QAAS,aAAa,GAAI;AAM5C,MAAK,oBAAoB,SAAU;AAClC,eAAW;AAAA,EACZ;AAEA,oBAAkB;AAElB,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build/shared/index.cjs
CHANGED
|
@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
|
-
// packages/a11y/src/shared/index.
|
|
30
|
+
// packages/a11y/src/shared/index.ts
|
|
31
31
|
var shared_exports = {};
|
|
32
32
|
__export(shared_exports, {
|
|
33
33
|
speak: () => speak
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/shared/index.
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport clear from './clear';\nimport filterMessage from './filter-message';\n\n/**\n * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.\n * This module is inspired by the `speak` function in `wp-a11y.js`.\n *\n * @param
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAkB;AAClB,4BAA0B;AAoBnB,SAAS,
|
|
3
|
+
"sources": ["../../src/shared/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport clear from './clear';\nimport filterMessage from './filter-message';\n\n/**\n * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.\n * This module is inspired by the `speak` function in `wp-a11y.js`.\n *\n * @param message The message to be announced by assistive technologies.\n * @param [ariaLive] The politeness level for aria-live; default: 'polite'.\n *\n * @example\n * ```js\n * import { speak } from '@wordpress/a11y';\n *\n * // For polite messages that shouldn't interrupt what screen readers are currently announcing.\n * speak( 'The message you want to send to the ARIA live region' );\n *\n * // For assertive messages that should interrupt what screen readers are currently announcing.\n * speak( 'The message you want to send to the ARIA live region', 'assertive' );\n * ```\n */\nexport function speak(\n\tmessage: string,\n\tariaLive?: 'polite' | 'assertive'\n): void {\n\t/*\n\t * Clear previous messages to allow repeated strings being read out and hide\n\t * the explanatory text from assistive technologies.\n\t */\n\tclear();\n\n\tmessage = filterMessage( message );\n\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\tconst containerAssertive = document.getElementById(\n\t\t'a11y-speak-assertive'\n\t);\n\tconst containerPolite = document.getElementById( 'a11y-speak-polite' );\n\n\tif ( containerAssertive && ariaLive === 'assertive' ) {\n\t\tcontainerAssertive.textContent = message;\n\t} else if ( containerPolite ) {\n\t\tcontainerPolite.textContent = message;\n\t}\n\n\t/*\n\t * Make the explanatory text available to assistive technologies by removing\n\t * the 'hidden' HTML attribute.\n\t */\n\tif ( introText ) {\n\t\tintroText.removeAttribute( 'hidden' );\n\t}\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAkB;AAClB,4BAA0B;AAoBnB,SAAS,MACf,SACA,UACO;AAKP,mBAAAA,SAAM;AAEN,gBAAU,sBAAAC,SAAe,OAAQ;AAEjC,QAAM,YAAY,SAAS,eAAgB,uBAAwB;AACnE,QAAM,qBAAqB,SAAS;AAAA,IACnC;AAAA,EACD;AACA,QAAM,kBAAkB,SAAS,eAAgB,mBAAoB;AAErE,MAAK,sBAAsB,aAAa,aAAc;AACrD,uBAAmB,cAAc;AAAA,EAClC,WAAY,iBAAkB;AAC7B,oBAAgB,cAAc;AAAA,EAC/B;AAMA,MAAK,WAAY;AAChB,cAAU,gBAAiB,QAAS;AAAA,EACrC;AACD;",
|
|
6
6
|
"names": ["clear", "filterMessage"]
|
|
7
7
|
}
|
package/build-module/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/index.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport domReady from '@wordpress/dom-ready';\n\n/**\n * Internal dependencies\n */\nimport addContainer from './script/add-container';\nimport addIntroText from './script/add-intro-text';\n\nexport { speak } from './shared/index';\n\n/**\n * Create the live regions.\n */\nexport function setup() {\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\tconst containerAssertive = document.getElementById(\n\t\t'a11y-speak-assertive'\n\t);\n\tconst containerPolite = document.getElementById( 'a11y-speak-polite' );\n\n\tif ( introText === null ) {\n\t\taddIntroText();\n\t}\n\n\tif ( containerAssertive === null ) {\n\t\taddContainer( 'assertive' );\n\t}\n\n\tif ( containerPolite === null ) {\n\t\taddContainer( 'polite' );\n\t}\n}\n\n/**\n * Run setup on domReady.\n */\ndomReady( setup );\n"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,cAAc;AAKrB,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AAEzB,SAAS,aAAa;AAKf,SAAS,
|
|
3
|
+
"sources": ["../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport domReady from '@wordpress/dom-ready';\n\n/**\n * Internal dependencies\n */\nimport addContainer from './script/add-container';\nimport addIntroText from './script/add-intro-text';\n\nexport { speak } from './shared/index';\n\n/**\n * Create the live regions.\n */\nexport function setup(): void {\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\tconst containerAssertive = document.getElementById(\n\t\t'a11y-speak-assertive'\n\t);\n\tconst containerPolite = document.getElementById( 'a11y-speak-polite' );\n\n\tif ( introText === null ) {\n\t\taddIntroText();\n\t}\n\n\tif ( containerAssertive === null ) {\n\t\taddContainer( 'assertive' );\n\t}\n\n\tif ( containerPolite === null ) {\n\t\taddContainer( 'polite' );\n\t}\n}\n\n/**\n * Run setup on domReady.\n */\ndomReady( setup );\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,cAAc;AAKrB,OAAO,kBAAkB;AACzB,OAAO,kBAAkB;AAEzB,SAAS,aAAa;AAKf,SAAS,QAAc;AAC7B,QAAM,YAAY,SAAS,eAAgB,uBAAwB;AACnE,QAAM,qBAAqB,SAAS;AAAA,IACnC;AAAA,EACD;AACA,QAAM,kBAAkB,SAAS,eAAgB,mBAAoB;AAErE,MAAK,cAAc,MAAO;AACzB,iBAAa;AAAA,EACd;AAEA,MAAK,uBAAuB,MAAO;AAClC,iBAAc,WAAY;AAAA,EAC3B;AAEA,MAAK,oBAAoB,MAAO;AAC/B,iBAAc,QAAS;AAAA,EACxB;AACD;AAKA,SAAU,KAAM;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/script/add-container.
|
|
4
|
-
"sourcesContent": ["/**\n * Build the live regions markup.\n *\n * @param {'polite'|'assertive'} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.\n *\n * @return
|
|
5
|
-
"mappings": ";AAOe,SAAR,
|
|
3
|
+
"sources": ["../../src/script/add-container.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Build the live regions markup.\n *\n * @param {'polite'|'assertive'} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.\n *\n * @return The ARIA live region HTML element.\n */\nexport default function addContainer(\n\tariaLive: string = 'polite'\n): HTMLDivElement {\n\tconst container = document.createElement( 'div' );\n\tcontainer.id = `a11y-speak-${ ariaLive }`;\n\tcontainer.className = 'a11y-speak-region';\n\n\tcontainer.setAttribute(\n\t\t'style',\n\t\t'position:absolute;' +\n\t\t\t'margin:-1px;' +\n\t\t\t'padding:0;' +\n\t\t\t'height:1px;' +\n\t\t\t'width:1px;' +\n\t\t\t'overflow:hidden;' +\n\t\t\t'clip-path:inset(50%);' +\n\t\t\t'border:0;' +\n\t\t\t'word-wrap:normal !important;' +\n\t\t\t'word-break:normal !important;'\n\t);\n\tcontainer.setAttribute( 'aria-live', ariaLive );\n\tcontainer.setAttribute( 'aria-relevant', 'additions text' );\n\tcontainer.setAttribute( 'aria-atomic', 'true' );\n\n\tconst { body } = document;\n\tif ( body ) {\n\t\tbody.appendChild( container );\n\t}\n\n\treturn container;\n}\n"],
|
|
5
|
+
"mappings": ";AAOe,SAAR,aACN,WAAmB,UACF;AACjB,QAAM,YAAY,SAAS,cAAe,KAAM;AAChD,YAAU,KAAK,cAAe,QAAS;AACvC,YAAU,YAAY;AAEtB,YAAU;AAAA,IACT;AAAA,IACA;AAAA,EAUD;AACA,YAAU,aAAc,aAAa,QAAS;AAC9C,YAAU,aAAc,iBAAiB,gBAAiB;AAC1D,YAAU,aAAc,eAAe,MAAO;AAE9C,QAAM,EAAE,KAAK,IAAI;AACjB,MAAK,MAAO;AACX,SAAK,YAAa,SAAU;AAAA,EAC7B;AAEA,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/script/add-intro-text.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Build the explanatory text to be placed before the aria live regions.\n *\n * This text is initially hidden from assistive technologies by using a `hidden`\n * HTML attribute which is then removed once a message fills the aria-live regions.\n *\n * @return
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Build the explanatory text to be placed before the aria live regions.\n *\n * This text is initially hidden from assistive technologies by using a `hidden`\n * HTML attribute which is then removed once a message fills the aria-live regions.\n *\n * @return The explanatory text HTML element.\n */\nexport default function addIntroText() {\n\tconst introText = document.createElement( 'p' );\n\n\tintroText.id = 'a11y-speak-intro-text';\n\tintroText.className = 'a11y-speak-intro-text';\n\tintroText.textContent = __( 'Notifications' );\n\n\tintroText.setAttribute(\n\t\t'style',\n\t\t'position:absolute;' +\n\t\t\t'margin:-1px;' +\n\t\t\t'padding:0;' +\n\t\t\t'height:1px;' +\n\t\t\t'width:1px;' +\n\t\t\t'overflow:hidden;' +\n\t\t\t'clip-path:inset(50%);' +\n\t\t\t'border:0;' +\n\t\t\t'word-wrap:normal !important;' +\n\t\t\t'word-break:normal !important;'\n\t);\n\tintroText.setAttribute( 'hidden', '' );\n\n\tconst { body } = document;\n\tif ( body ) {\n\t\tbody.appendChild( introText );\n\t}\n\n\treturn introText;\n}\n"],
|
|
5
5
|
"mappings": ";AAGA,SAAS,UAAU;AAUJ,SAAR,eAAgC;AACtC,QAAM,YAAY,SAAS,cAAe,GAAI;AAE9C,YAAU,KAAK;AACf,YAAU,YAAY;AACtB,YAAU,cAAc,GAAI,eAAgB;AAE5C,YAAU;AAAA,IACT;AAAA,IACA;AAAA,EAUD;AACA,YAAU,aAAc,UAAU,EAAG;AAErC,QAAM,EAAE,KAAK,IAAI;AACjB,MAAK,MAAO;AACX,SAAK,YAAa,SAAU;AAAA,EAC7B;AAEA,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/shared/clear.
|
|
4
|
-
"sourcesContent": ["/**\n * Clears the a11y-speak-region elements and hides the explanatory text.\n */\nexport default function clear() {\n\tconst regions = document.getElementsByClassName( 'a11y-speak-region' );\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\n\tfor ( let i = 0; i < regions.length; i++ ) {\n\t\tregions[ i ].textContent = '';\n\t}\n\n\t// Make sure the explanatory text is hidden from assistive technologies.\n\tif ( introText ) {\n\t\tintroText.setAttribute( 'hidden', 'hidden' );\n\t}\n}\n"],
|
|
5
|
-
"mappings": ";AAGe,SAAR,
|
|
3
|
+
"sources": ["../../src/shared/clear.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Clears the a11y-speak-region elements and hides the explanatory text.\n */\nexport default function clear(): void {\n\tconst regions = document.getElementsByClassName( 'a11y-speak-region' );\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\n\tfor ( let i = 0; i < regions.length; i++ ) {\n\t\tregions[ i ].textContent = '';\n\t}\n\n\t// Make sure the explanatory text is hidden from assistive technologies.\n\tif ( introText ) {\n\t\tintroText.setAttribute( 'hidden', 'hidden' );\n\t}\n}\n"],
|
|
5
|
+
"mappings": ";AAGe,SAAR,QAA+B;AACrC,QAAM,UAAU,SAAS,uBAAwB,mBAAoB;AACrE,QAAM,YAAY,SAAS,eAAgB,uBAAwB;AAEnE,WAAU,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAM;AAC1C,YAAS,CAAE,EAAE,cAAc;AAAA,EAC5B;AAGA,MAAK,WAAY;AAChB,cAAU,aAAc,UAAU,QAAS;AAAA,EAC5C;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/shared/filter-message.
|
|
4
|
-
"sourcesContent": ["let previousMessage = '';\n\n/**\n * Filter the message to be announced to the screenreader.\n *\n * @param
|
|
5
|
-
"mappings": ";AAAA,IAAI,kBAAkB;AASP,SAAR,cAAgC,
|
|
3
|
+
"sources": ["../../src/shared/filter-message.ts"],
|
|
4
|
+
"sourcesContent": ["let previousMessage = '';\n\n/**\n * Filter the message to be announced to the screenreader.\n *\n * @param message The message to be announced.\n *\n * @return The filtered message.\n */\nexport default function filterMessage( message: string ): string {\n\t/*\n\t * Strip HTML tags (if any) from the message string. Ideally, messages should\n\t * be simple strings, carefully crafted for specific use with A11ySpeak.\n\t * When re-using already existing strings this will ensure simple HTML to be\n\t * stripped out and replaced with a space. Browsers will collapse multiple\n\t * spaces natively.\n\t */\n\tmessage = message.replace( /<[^<>]+>/g, ' ' );\n\n\t/*\n\t * Safari + VoiceOver don't announce repeated, identical strings. We use\n\t * a `no-break space` to force them to think identical strings are different.\n\t */\n\tif ( previousMessage === message ) {\n\t\tmessage += '\\u00A0';\n\t}\n\n\tpreviousMessage = message;\n\n\treturn message;\n}\n"],
|
|
5
|
+
"mappings": ";AAAA,IAAI,kBAAkB;AASP,SAAR,cAAgC,SAA0B;AAQhE,YAAU,QAAQ,QAAS,aAAa,GAAI;AAM5C,MAAK,oBAAoB,SAAU;AAClC,eAAW;AAAA,EACZ;AAEA,oBAAkB;AAElB,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../src/shared/index.
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport clear from './clear';\nimport filterMessage from './filter-message';\n\n/**\n * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.\n * This module is inspired by the `speak` function in `wp-a11y.js`.\n *\n * @param
|
|
5
|
-
"mappings": ";AAGA,OAAO,WAAW;AAClB,OAAO,mBAAmB;AAoBnB,SAAS,
|
|
3
|
+
"sources": ["../../src/shared/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport clear from './clear';\nimport filterMessage from './filter-message';\n\n/**\n * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.\n * This module is inspired by the `speak` function in `wp-a11y.js`.\n *\n * @param message The message to be announced by assistive technologies.\n * @param [ariaLive] The politeness level for aria-live; default: 'polite'.\n *\n * @example\n * ```js\n * import { speak } from '@wordpress/a11y';\n *\n * // For polite messages that shouldn't interrupt what screen readers are currently announcing.\n * speak( 'The message you want to send to the ARIA live region' );\n *\n * // For assertive messages that should interrupt what screen readers are currently announcing.\n * speak( 'The message you want to send to the ARIA live region', 'assertive' );\n * ```\n */\nexport function speak(\n\tmessage: string,\n\tariaLive?: 'polite' | 'assertive'\n): void {\n\t/*\n\t * Clear previous messages to allow repeated strings being read out and hide\n\t * the explanatory text from assistive technologies.\n\t */\n\tclear();\n\n\tmessage = filterMessage( message );\n\n\tconst introText = document.getElementById( 'a11y-speak-intro-text' );\n\tconst containerAssertive = document.getElementById(\n\t\t'a11y-speak-assertive'\n\t);\n\tconst containerPolite = document.getElementById( 'a11y-speak-polite' );\n\n\tif ( containerAssertive && ariaLive === 'assertive' ) {\n\t\tcontainerAssertive.textContent = message;\n\t} else if ( containerPolite ) {\n\t\tcontainerPolite.textContent = message;\n\t}\n\n\t/*\n\t * Make the explanatory text available to assistive technologies by removing\n\t * the 'hidden' HTML attribute.\n\t */\n\tif ( introText ) {\n\t\tintroText.removeAttribute( 'hidden' );\n\t}\n}\n"],
|
|
5
|
+
"mappings": ";AAGA,OAAO,WAAW;AAClB,OAAO,mBAAmB;AAoBnB,SAAS,MACf,SACA,UACO;AAKP,QAAM;AAEN,YAAU,cAAe,OAAQ;AAEjC,QAAM,YAAY,SAAS,eAAgB,uBAAwB;AACnE,QAAM,qBAAqB,SAAS;AAAA,IACnC;AAAA,EACD;AACA,QAAM,kBAAkB,SAAS,eAAgB,mBAAoB;AAErE,MAAK,sBAAsB,aAAa,aAAc;AACrD,uBAAmB,cAAc;AAAA,EAClC,WAAY,iBAAkB;AAC7B,oBAAgB,cAAc;AAAA,EAC/B;AAMA,MAAK,WAAY;AAChB,cAAU,gBAAiB,QAAS;AAAA,EACrC;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build-types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC;;GAEG;AACH,wBAAgB,KAAK,IAAI,IAAI,CAkB5B"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Update the ARIA live notification area text node.
|
|
3
|
+
*
|
|
4
|
+
* @param message The message to be announced by Assistive Technologies.
|
|
5
|
+
* @param [ariaLive] The politeness level for aria-live; default: 'polite'.
|
|
6
|
+
*/
|
|
7
|
+
export declare function speak(message: string, ariaLive?: 'polite' | 'assertive'): void;
|
|
8
|
+
//# sourceMappingURL=index.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../src/index.native.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,wBAAgB,KAAK,CACpB,OAAO,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAC/B,IAAI,CAMN"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @param {'polite'|'assertive'} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.
|
|
5
5
|
*
|
|
6
|
-
* @return
|
|
6
|
+
* @return The ARIA live region HTML element.
|
|
7
7
|
*/
|
|
8
|
-
export default function addContainer(ariaLive?:
|
|
8
|
+
export default function addContainer(ariaLive?: string): HTMLDivElement;
|
|
9
9
|
//# sourceMappingURL=add-container.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"add-container.d.ts","sourceRoot":"","sources":["../../src/script/add-container.
|
|
1
|
+
{"version":3,"file":"add-container.d.ts","sourceRoot":"","sources":["../../src/script/add-container.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CACnC,QAAQ,GAAE,MAAiB,GACzB,cAAc,CA4BhB"}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* This text is initially hidden from assistive technologies by using a `hidden`
|
|
5
5
|
* HTML attribute which is then removed once a message fills the aria-live regions.
|
|
6
6
|
*
|
|
7
|
-
* @return
|
|
7
|
+
* @return The explanatory text HTML element.
|
|
8
8
|
*/
|
|
9
9
|
export default function addIntroText(): HTMLParagraphElement;
|
|
10
10
|
//# sourceMappingURL=add-intro-text.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clear.d.ts","sourceRoot":"","sources":["../../src/shared/clear.
|
|
1
|
+
{"version":3,"file":"clear.d.ts","sourceRoot":"","sources":["../../src/shared/clear.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,IAAI,IAAI,CAYpC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Filter the message to be announced to the screenreader.
|
|
3
3
|
*
|
|
4
|
-
* @param
|
|
4
|
+
* @param message The message to be announced.
|
|
5
5
|
*
|
|
6
|
-
* @return
|
|
6
|
+
* @return The filtered message.
|
|
7
7
|
*/
|
|
8
8
|
export default function filterMessage(message: string): string;
|
|
9
9
|
//# sourceMappingURL=filter-message.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-message.d.ts","sourceRoot":"","sources":["../../src/shared/filter-message.
|
|
1
|
+
{"version":3,"file":"filter-message.d.ts","sourceRoot":"","sources":["../../src/shared/filter-message.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAE,OAAO,EAAE,MAAM,GAAI,MAAM,CAqB/D"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
* Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
|
|
3
3
|
* This module is inspired by the `speak` function in `wp-a11y.js`.
|
|
4
4
|
*
|
|
5
|
-
* @param
|
|
6
|
-
* @param
|
|
5
|
+
* @param message The message to be announced by assistive technologies.
|
|
6
|
+
* @param [ariaLive] The politeness level for aria-live; default: 'polite'.
|
|
7
7
|
*
|
|
8
8
|
* @example
|
|
9
9
|
* ```js
|
|
@@ -16,5 +16,5 @@
|
|
|
16
16
|
* speak( 'The message you want to send to the ARIA live region', 'assertive' );
|
|
17
17
|
* ```
|
|
18
18
|
*/
|
|
19
|
-
export function speak(message: string, ariaLive?:
|
|
19
|
+
export declare function speak(message: string, ariaLive?: 'polite' | 'assertive'): void;
|
|
20
20
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,KAAK,CACpB,OAAO,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,GAC/B,IAAI,CA4BN"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/a11y",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.43.1-next.v.202604091042.0+668146787",
|
|
4
4
|
"description": "Accessibility (a11y) utilities for WordPress.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"wpScriptModuleExports": "./build-module/module/index.mjs",
|
|
47
47
|
"types": "build-types",
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@wordpress/dom-ready": "^4.
|
|
50
|
-
"@wordpress/i18n": "^6.
|
|
49
|
+
"@wordpress/dom-ready": "^4.43.1-next.v.202604091042.0+668146787",
|
|
50
|
+
"@wordpress/i18n": "^6.17.1-next.v.202604091042.0+668146787"
|
|
51
51
|
},
|
|
52
52
|
"publishConfig": {
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
|
|
56
56
|
}
|
|
@@ -6,10 +6,13 @@ import filterMessage from './shared/filter-message';
|
|
|
6
6
|
/**
|
|
7
7
|
* Update the ARIA live notification area text node.
|
|
8
8
|
*
|
|
9
|
-
* @param
|
|
10
|
-
* @param
|
|
9
|
+
* @param message The message to be announced by Assistive Technologies.
|
|
10
|
+
* @param [ariaLive] The politeness level for aria-live; default: 'polite'.
|
|
11
11
|
*/
|
|
12
|
-
export function speak(
|
|
12
|
+
export function speak(
|
|
13
|
+
message: string,
|
|
14
|
+
ariaLive?: 'polite' | 'assertive'
|
|
15
|
+
): void {
|
|
13
16
|
message = filterMessage( message );
|
|
14
17
|
// TODO: Use native module to speak message.
|
|
15
18
|
if ( ariaLive === 'assertive' ) {
|
|
@@ -14,7 +14,7 @@ export { speak } from './shared/index';
|
|
|
14
14
|
/**
|
|
15
15
|
* Create the live regions.
|
|
16
16
|
*/
|
|
17
|
-
export function setup() {
|
|
17
|
+
export function setup(): void {
|
|
18
18
|
const introText = document.getElementById( 'a11y-speak-intro-text' );
|
|
19
19
|
const containerAssertive = document.getElementById(
|
|
20
20
|
'a11y-speak-assertive'
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @param {'polite'|'assertive'} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.
|
|
5
5
|
*
|
|
6
|
-
* @return
|
|
6
|
+
* @return The ARIA live region HTML element.
|
|
7
7
|
*/
|
|
8
|
-
export default function addContainer(
|
|
8
|
+
export default function addContainer(
|
|
9
|
+
ariaLive: string = 'polite'
|
|
10
|
+
): HTMLDivElement {
|
|
9
11
|
const container = document.createElement( 'div' );
|
|
10
12
|
container.id = `a11y-speak-${ ariaLive }`;
|
|
11
13
|
container.className = 'a11y-speak-region';
|
|
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
|
|
|
9
9
|
* This text is initially hidden from assistive technologies by using a `hidden`
|
|
10
10
|
* HTML attribute which is then removed once a message fills the aria-live regions.
|
|
11
11
|
*
|
|
12
|
-
* @return
|
|
12
|
+
* @return The explanatory text HTML element.
|
|
13
13
|
*/
|
|
14
14
|
export default function addIntroText() {
|
|
15
15
|
const introText = document.createElement( 'p' );
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Clears the a11y-speak-region elements and hides the explanatory text.
|
|
3
3
|
*/
|
|
4
|
-
export default function clear() {
|
|
4
|
+
export default function clear(): void {
|
|
5
5
|
const regions = document.getElementsByClassName( 'a11y-speak-region' );
|
|
6
6
|
const introText = document.getElementById( 'a11y-speak-intro-text' );
|
|
7
7
|
|
|
@@ -3,11 +3,11 @@ let previousMessage = '';
|
|
|
3
3
|
/**
|
|
4
4
|
* Filter the message to be announced to the screenreader.
|
|
5
5
|
*
|
|
6
|
-
* @param
|
|
6
|
+
* @param message The message to be announced.
|
|
7
7
|
*
|
|
8
|
-
* @return
|
|
8
|
+
* @return The filtered message.
|
|
9
9
|
*/
|
|
10
|
-
export default function filterMessage( message ) {
|
|
10
|
+
export default function filterMessage( message: string ): string {
|
|
11
11
|
/*
|
|
12
12
|
* Strip HTML tags (if any) from the message string. Ideally, messages should
|
|
13
13
|
* be simple strings, carefully crafted for specific use with A11ySpeak.
|
|
@@ -8,8 +8,8 @@ import filterMessage from './filter-message';
|
|
|
8
8
|
* Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
|
|
9
9
|
* This module is inspired by the `speak` function in `wp-a11y.js`.
|
|
10
10
|
*
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
11
|
+
* @param message The message to be announced by assistive technologies.
|
|
12
|
+
* @param [ariaLive] The politeness level for aria-live; default: 'polite'.
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```js
|
|
@@ -22,7 +22,10 @@ import filterMessage from './filter-message';
|
|
|
22
22
|
* speak( 'The message you want to send to the ARIA live region', 'assertive' );
|
|
23
23
|
* ```
|
|
24
24
|
*/
|
|
25
|
-
export function speak(
|
|
25
|
+
export function speak(
|
|
26
|
+
message: string,
|
|
27
|
+
ariaLive?: 'polite' | 'assertive'
|
|
28
|
+
): void {
|
|
26
29
|
/*
|
|
27
30
|
* Clear previous messages to allow repeated strings being read out and hide
|
|
28
31
|
* the explanatory text from assistive technologies.
|
|
@@ -14,12 +14,12 @@ jest.mock( '../shared/clear', () => {
|
|
|
14
14
|
return jest.fn();
|
|
15
15
|
} );
|
|
16
16
|
jest.mock( '@wordpress/dom-ready', () => {
|
|
17
|
-
return jest.fn( ( callback ) => {
|
|
17
|
+
return jest.fn( ( callback: () => void ) => {
|
|
18
18
|
callback();
|
|
19
19
|
} );
|
|
20
20
|
} );
|
|
21
21
|
jest.mock( '../shared/filter-message', () => {
|
|
22
|
-
return jest.fn( ( message ) => {
|
|
22
|
+
return jest.fn( ( message: string ) => {
|
|
23
23
|
return message;
|
|
24
24
|
} );
|
|
25
25
|
} );
|
|
@@ -29,8 +29,8 @@ describe( 'speak', () => {
|
|
|
29
29
|
let containerAssertive = document.getElementById( 'a11y-speak-assertive' );
|
|
30
30
|
|
|
31
31
|
beforeEach( () => {
|
|
32
|
-
containerPolite
|
|
33
|
-
containerAssertive
|
|
32
|
+
containerPolite!.textContent = '';
|
|
33
|
+
containerAssertive!.textContent = '';
|
|
34
34
|
} );
|
|
35
35
|
|
|
36
36
|
describe( 'on import', () => {
|
|
@@ -69,7 +69,7 @@ describe( 'speak', () => {
|
|
|
69
69
|
|
|
70
70
|
describe( 'when somehow the assertive container is not present', () => {
|
|
71
71
|
beforeEach( () => {
|
|
72
|
-
document.getElementById( 'a11y-speak-assertive' )
|
|
72
|
+
document.getElementById( 'a11y-speak-assertive' )?.remove();
|
|
73
73
|
} );
|
|
74
74
|
|
|
75
75
|
afterEach( () => {
|
|
@@ -90,8 +90,8 @@ describe( 'speak', () => {
|
|
|
90
90
|
|
|
91
91
|
describe( 'when somehow the both containers are not present', () => {
|
|
92
92
|
beforeEach( () => {
|
|
93
|
-
containerAssertive
|
|
94
|
-
containerPolite
|
|
93
|
+
containerAssertive?.remove();
|
|
94
|
+
containerPolite?.remove();
|
|
95
95
|
} );
|
|
96
96
|
|
|
97
97
|
afterEach( () => {
|
|
File without changes
|
|
File without changes
|
|
File without changes
|