Test using inert to control text searchability

This commit is contained in:
Lim Chee Aun 2024-05-19 16:26:15 +08:00
parent ced4dc86aa
commit bdd238de0e
2 changed files with 30 additions and 0 deletions

View file

@ -41,6 +41,24 @@ function Modal({ children, onClose, onClick, class: className }) {
); );
useCloseWatcher(onClose, [onClose]); useCloseWatcher(onClose, [onClose]);
useEffect(() => {
const $deckContainers = document.querySelectorAll('.deck-container');
if (children) {
$deckContainers.forEach(($deckContainer) => {
$deckContainer.setAttribute('inert', '');
});
} else {
$deckContainers.forEach(($deckContainer) => {
$deckContainer.removeAttribute('inert');
});
}
return () => {
$deckContainers.forEach(($deckContainer) => {
$deckContainer.removeAttribute('inert');
});
};
}, [children]);
const Modal = ( const Modal = (
<div <div
ref={(node) => { ref={(node) => {

View file

@ -153,6 +153,18 @@ function StatusPage(params) {
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [showMediaOnly]); }, [showMediaOnly]);
useEffect(() => {
const $deckContainers = document.querySelectorAll('.deck-container');
$deckContainers.forEach(($deckContainer) => {
$deckContainer.setAttribute('inert', '');
});
return () => {
$deckContainers.forEach(($deckContainer) => {
$deckContainer.removeAttribute('inert');
});
};
}, []);
return ( return (
<div class="deck-backdrop"> <div class="deck-backdrop">
{showMedia ? ( {showMedia ? (