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

[Pablo Brasero]

@pablobm commented on this pull request.



> +        <i class="bi bi-star-fill fs-5 role-<%= role %> align-middle" title="<%= t ".revoke.#{role}" %>" aria-hidden="true"></i>
+        <span class="visually-hidden"><%= t ".revoke.#{role}" %></span>

I tested iOS VoiceOver and Read Aloud (on Firefox) again. They have slightly different behaviours that are driving me a bit crazy, particularly how Read Aloud doesn't always reload the page properly :angry: 

The following seems to work with both:

```
<i class="bi bi-star-fill fs-5 role-<%= role %> align-middle" title="<%= t ".revoke.#{role}" %>" role="button" aria-pressed="true"><span class="visually-hidden"><%= t ".revoke.#{role}" %></span></i>
```

On iOS the text is read twice, annoyingly. Not sure if this is best. Read Aloud appears to read what's in the browser's Accessibility Tree so I would think that's relevant...? No idea :sob: 

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6501#discussion_r2504458134
You are receiving this because you are subscribed to this thread.

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