feat: improving accessibility by using semantic tags and aria-related props

[risaddex]

Esse PR tenta resolver alguns dos problemas mencionados na issue#246

• Foram adicionados aria-labels a alguns botões ( de voltar / refresh / hamburger menu, etc)
• Trocados algumas tags "h1" usadas para deixar aspecto negrito por "strong"
• Adicionados algumas tags/roles como aria-role="list" e aria-role="listitem" às listas de abrigos

Demais mudanças por favor me atualizem

Em relação ao problema das ruas, a seguinte "gambiarra" poderia ser usada para tentar substituir os nomes das ruas a nível de cliente (o q optei por não colocar pq além de ser má prática envolve regexp, que costuma quebrar bastante a performance, ainda mais sendo itens que rodam em alguns loops)

const streetAbbrvRegexp = /^[R]\./i
// Leitores como JAWs da vida/ 
const SemanticAddress = ({ address }) => {
    return (
        <>
            {address.match(streetAbbrvRegexp) ? (
                <>
                    <span
                        className="text-muted-foreground text-sm md:text-lg font-medium"
                        aria-label="Rua"
                    >
                        R.
                    </span>
                    {address.replace(streetAbbrvRegexp, '')}
                </>
            ) : (
                address
            )}
        </>
    )
}

[marcossanhudo]

As mudanças feitas melhoram a usabilidade com o Windows Narrator e o NVDA, dentro do escopo proposto.

[marcossanhudo]

Questionamento: dada a className de formatação, ainda é necessário usar a tag strong? Ou faria mais sentido apenas uma div ou uma span?

[risaddex]

Nesse ponto, parti do princípio que: mesmo se fosse lido em um html puro, ainda teria o destaque. Não creio que essa tag dê mais ênfase ao utilizar leitores de tela.

[marcossanhudo]

É, faz sentido. Podemos manter assim, então.

[marcossanhudo]

Excelente.

[marcossanhudo]

Quanto à gambiarra do "R." das ruas, ela funcionou no Windows Narrator, mas não no NVDA. Não sei se é possível resolver isso.

[risaddex]

As mudanças feitas melhoram a usabilidade com o Windows Narrator e o NVDA, dentro do escopo proposto.

Então, eu não cheguei a implementar essas mudanças, apenas mencionei a possibilidade.
Assumo que vc testou localmente?
(Não leve a mal, quero apenas ter ctz que estamos falando da mesma situação)

falo pq não sei se ativar o TalkBack do Google é o suficiente pra satisfazer o critério, e ~~não tenho boas recordações de instalar o NVDA ou JAWs no Ubuntu ~~

[marcossanhudo]

Eu clonei sua branch pra testar localmente, sim. Só para agilizar as coisas :).