feat: improving accessibility by using semantic tags and aria-related props
Esse PR tenta resolver alguns dos problemas mencionados na issue#246
- [x] Foram adicionados aria-labels a alguns botões ( de voltar / refresh / hamburger menu, etc)
- [x] Trocados algumas tags "h1" usadas para deixar aspecto negrito por "strong"
- [x] Adicionados algumas tags/roles como
aria-role="list"earia-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
)}
</>
)
}
Quanto à gambiarra do "R." das ruas, ela funcionou no Windows Narrator, mas não no NVDA. Não sei se é possível resolver isso.
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 ~~
Eu clonei sua branch pra testar localmente, sim. Só para agilizar as coisas :).