a11y.js
8.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ !function() {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function() { return module['default']; } :
/******/ function() { return module; };
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"setup": function() { return /* binding */ setup; },
"speak": function() { return /* binding */ speak; }
});
;// CONCATENATED MODULE: external ["wp","domReady"]
var external_wp_domReady_namespaceObject = window["wp"]["domReady"];
var external_wp_domReady_default = /*#__PURE__*/__webpack_require__.n(external_wp_domReady_namespaceObject);
;// CONCATENATED MODULE: external ["wp","i18n"]
var external_wp_i18n_namespaceObject = window["wp"]["i18n"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/a11y/build-module/add-intro-text.js
/**
* WordPress dependencies
*/
/**
* Build the explanatory text to be placed before the aria live regions.
*
* This text is initially hidden from assistive technologies by using a `hidden`
* HTML attribute which is then removed once a message fills the aria-live regions.
*
* @return {HTMLParagraphElement} The explanatory text HTML element.
*/
function addIntroText() {
const introText = document.createElement('p');
introText.id = 'a11y-speak-intro-text';
introText.className = 'a11y-speak-intro-text';
introText.textContent = (0,external_wp_i18n_namespaceObject.__)('Notifications');
introText.setAttribute('style', 'position: absolute;' + 'margin: -1px;' + 'padding: 0;' + 'height: 1px;' + 'width: 1px;' + 'overflow: hidden;' + 'clip: rect(1px, 1px, 1px, 1px);' + '-webkit-clip-path: inset(50%);' + 'clip-path: inset(50%);' + 'border: 0;' + 'word-wrap: normal !important;');
introText.setAttribute('hidden', 'hidden');
const {
body
} = document;
if (body) {
body.appendChild(introText);
}
return introText;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/a11y/build-module/add-container.js
/**
* Build the live regions markup.
*
* @param {string} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.
*
* @return {HTMLDivElement} The ARIA live region HTML element.
*/
function addContainer() {
let ariaLive = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'polite';
const container = document.createElement('div');
container.id = `a11y-speak-${ariaLive}`;
container.className = 'a11y-speak-region';
container.setAttribute('style', 'position: absolute;' + 'margin: -1px;' + 'padding: 0;' + 'height: 1px;' + 'width: 1px;' + 'overflow: hidden;' + 'clip: rect(1px, 1px, 1px, 1px);' + '-webkit-clip-path: inset(50%);' + 'clip-path: inset(50%);' + 'border: 0;' + 'word-wrap: normal !important;');
container.setAttribute('aria-live', ariaLive);
container.setAttribute('aria-relevant', 'additions text');
container.setAttribute('aria-atomic', 'true');
const {
body
} = document;
if (body) {
body.appendChild(container);
}
return container;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/a11y/build-module/clear.js
/**
* Clears the a11y-speak-region elements and hides the explanatory text.
*/
function clear() {
const regions = document.getElementsByClassName('a11y-speak-region');
const introText = document.getElementById('a11y-speak-intro-text');
for (let i = 0; i < regions.length; i++) {
regions[i].textContent = '';
} // Make sure the explanatory text is hidden from assistive technologies.
if (introText) {
introText.setAttribute('hidden', 'hidden');
}
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/a11y/build-module/filter-message.js
let previousMessage = '';
/**
* Filter the message to be announced to the screenreader.
*
* @param {string} message The message to be announced.
*
* @return {string} The filtered message.
*/
function filterMessage(message) {
/*
* Strip HTML tags (if any) from the message string. Ideally, messages should
* be simple strings, carefully crafted for specific use with A11ySpeak.
* When re-using already existing strings this will ensure simple HTML to be
* stripped out and replaced with a space. Browsers will collapse multiple
* spaces natively.
*/
message = message.replace(/<[^<>]+>/g, ' ');
/*
* Safari + VoiceOver don't announce repeated, identical strings. We use
* a `no-break space` to force them to think identical strings are different.
*/
if (previousMessage === message) {
message += '\u00A0';
}
previousMessage = message;
return message;
}
;// CONCATENATED MODULE: ./node_modules/@wordpress/a11y/build-module/index.js
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Create the live regions.
*/
function setup() {
const introText = document.getElementById('a11y-speak-intro-text');
const containerAssertive = document.getElementById('a11y-speak-assertive');
const containerPolite = document.getElementById('a11y-speak-polite');
if (introText === null) {
addIntroText();
}
if (containerAssertive === null) {
addContainer('assertive');
}
if (containerPolite === null) {
addContainer('polite');
}
}
/**
* Run setup on domReady.
*/
external_wp_domReady_default()(setup);
/**
* Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
* This module is inspired by the `speak` function in `wp-a11y.js`.
*
* @param {string} message The message to be announced by assistive technologies.
* @param {string} [ariaLive] The politeness level for aria-live; default: 'polite'.
*
* @example
* ```js
* import { speak } from '@wordpress/a11y';
*
* // For polite messages that shouldn't interrupt what screen readers are currently announcing.
* speak( 'The message you want to send to the ARIA live region' );
*
* // For assertive messages that should interrupt what screen readers are currently announcing.
* speak( 'The message you want to send to the ARIA live region', 'assertive' );
* ```
*/
function speak(message, ariaLive) {
/*
* Clear previous messages to allow repeated strings being read out and hide
* the explanatory text from assistive technologies.
*/
clear();
message = filterMessage(message);
const introText = document.getElementById('a11y-speak-intro-text');
const containerAssertive = document.getElementById('a11y-speak-assertive');
const containerPolite = document.getElementById('a11y-speak-polite');
if (containerAssertive && ariaLive === 'assertive') {
containerAssertive.textContent = message;
} else if (containerPolite) {
containerPolite.textContent = message;
}
/*
* Make the explanatory text available to assistive technologies by removing
* the 'hidden' HTML attribute.
*/
if (introText) {
introText.removeAttribute('hidden');
}
}
(window.wp = window.wp || {}).a11y = __webpack_exports__;
/******/ })()
;