Tenho um site com modais que funcionam via React Portals e eles funcionam muito bem, alimentados por uma biblioteca popular. No entanto, em um lugar, devido a várias razões sensatas, temos um modal personalizado que não está dentro de um portal e não é alimentado pela biblioteca.
Para acessibilidade, tentei definir o próprio modal como role="modal" e aria-modal="true" para dar uma dica aos leitores de tela de que eles devem ignorar o plano de fundo. No entanto, o plano de fundo não é ignorado. Este site menciona que às vezes você precisa de aria-hidden no plano de fundo. Ao verificar como o React Portal e a biblioteca fazem isso, ele adiciona um atributo aria-hidden ao corpo. Então, pensei em tentar.
No entanto, quando eu crio um useEffect para fazer isso e chamo document.body.setAttribute('aria-hidden', 'true'), ele simplesmente me ignora. Eu sei que o código funciona, eu posso definir outros atributos, mas não este. Alguém de vocês sabe por que isso está acontecendo?
Edição: Para esclarecer o motivo pelo qual estou tentando fazer isso, esta é a árvore HTML do react-modal, a biblioteca que usamos e que mencionei acima, com 1,7 milhão de downloads semanais:
Eu adoraria entender por que eles estão fazendo isso, especialmente quando o modal é um filho do corpo que está sendo escondido. Como um dos comentários aponta, isso é contra as diretrizes do Aria, parece que não deveria funcionar, é estranho, mas realmente funciona.