[openstreetmap/openstreetmap-website] Adjust Bootstrap icon usage (PR #6501)

[Pablo Brasero]

@pablobm commented on this pull request.



> +      html << tag.i(tag.span(t("oauth.for_roles.moderator"), :class => "visually-hidden"),
+                    :class => "bi bi-star-fill fs-5 role-moderator align-middle")

Played a bit with this. The one thing that bothered me slightly was on iOS VoiceOver, where it would stop for a moment on the star icon without saying anything, before moving on to the text description. I'm not an expert, but I think this may hint to users that there's something but it's hidden from them, which shouldn't be the message here.

Instead, if we separate these two elements and add an `aria-hidden="true"` on the icon, this disappears from the accessibility tree and VoiceOver ignores it, while still reading out the text description:

```suggestion
      html << tag.i(:class => "bi bi-star-fill fs-5 role-moderator align-middle", "aria-hidden" => true)
      html << tag.span(t("oauth.for_roles.moderator"), :class => "visually-hidden")
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6501?email_source=notifications&email_token=AAK2OLN67HV4UMJBAQ73GOT4SVBXFA5CNFSNUABKM5UWIORPF5TWS5BNNB2WEL2QOVWGYUTFOF2WK43UKJSXM2LFO4XTIMBRGUYDQNRTGIYKM4TFMFZW63VKON2WE43DOJUWEZLEUVSXMZLOOS6XA4S7OJSXM2LFO5PW433UNFTGSY3BORUW63TTL5RWY2LDNM#pullrequestreview-4015086320
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6501/review/4015086320 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260326/bcc2410a/attachment.htm>