Como você construiria um modal acessível em React?

Use o elemento nativo dialog com showModal onde der, já que ele te dá a top layer, o aprisionamento de foco e o tratamento do Escape de graça. Caso contrário você precisa de role dialog com aria-modal, um título rotulando o diálogo, foco movido para dentro do diálogo na abertura e devolvido ao gatilho no fechamento, um focus trap, Escape para dispensar, e o fundo tornado inerte para que leitores de tela e o Tab não passeiem por lá.

Meu primeiro movimento é não construir. O elemento nativo dialog com showModal cuida da top layer, então eu paro de brigar com z-index e ancestrais com overflow hidden, e ele me dá Escape e o fundo inerte sem nenhum código meu. Em cima disso eu ainda rotulo, com aria-labelledby apontando para o título, e movo o foco para um primeiro elemento sensato na abertura, normalmente o título ou o primeiro campo em vez do botão de fechar. No fechamento eu devolvo o foco para o que abriu, porque perder o foco para o body é o que de fato deixa usuários de teclado à deriva. Se eu tiver que fazer na mão por razões de navegador ou de design, então é role dialog com aria-modal true, um focus trap de verdade no Tab e no Shift Tab, Escape e clique no backdrop para dispensar, inert no resto da página, e travamento de scroll que não desloca o layout. Eu testo só com teclado primeiro, depois com um leitor de tela, porque essa combinação pega quase tudo que um verificador automático deixa passar.