62 lines
1.2 KiB
JavaScript
62 lines
1.2 KiB
JavaScript
|
import React, { useState, useCallback } from 'react';
|
||
|
|
|
||
|
|
const hiddenStyles = {
|
||
|
|
display: 'none'
|
||
|
|
};
|
||
|
|
function HiddenText(_ref) {
|
||
|
|
let {
|
||
|
|
id,
|
||
|
|
value
|
||
|
|
} = _ref;
|
||
|
|
return React.createElement("div", {
|
||
|
|
id: id,
|
||
|
|
style: hiddenStyles
|
||
|
|
}, value);
|
||
|
|
}
|
||
|
|
|
||
|
|
function LiveRegion(_ref) {
|
||
|
|
let {
|
||
|
|
id,
|
||
|
|
announcement,
|
||
|
|
ariaLiveType = "assertive"
|
||
|
|
} = _ref;
|
||
|
|
// Hide element visually but keep it readable by screen readers
|
||
|
|
const visuallyHidden = {
|
||
|
|
position: 'fixed',
|
||
|
|
top: 0,
|
||
|
|
left: 0,
|
||
|
|
width: 1,
|
||
|
|
height: 1,
|
||
|
|
margin: -1,
|
||
|
|
border: 0,
|
||
|
|
padding: 0,
|
||
|
|
overflow: 'hidden',
|
||
|
|
clip: 'rect(0 0 0 0)',
|
||
|
|
clipPath: 'inset(100%)',
|
||
|
|
whiteSpace: 'nowrap'
|
||
|
|
};
|
||
|
|
return React.createElement("div", {
|
||
|
|
id: id,
|
||
|
|
style: visuallyHidden,
|
||
|
|
role: "status",
|
||
|
|
"aria-live": ariaLiveType,
|
||
|
|
"aria-atomic": true
|
||
|
|
}, announcement);
|
||
|
|
}
|
||
|
|
|
||
|
|
function useAnnouncement() {
|
||
|
|
const [announcement, setAnnouncement] = useState('');
|
||
|
|
const announce = useCallback(value => {
|
||
|
|
if (value != null) {
|
||
|
|
setAnnouncement(value);
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
return {
|
||
|
|
announce,
|
||
|
|
announcement
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
export { HiddenText, LiveRegion, useAnnouncement };
|
||
|
|
//# sourceMappingURL=accessibility.esm.js.map
|