Fix #3

[ksyro98]

Added an icon next to links to visually indicate that the item moves into a new page. (Fixes #3)
It looks like that:

I've also used aria-hidden="true" so that the icon won't be read by a screen reader.

<span aria-hidden="true"><img src="assets/link_arrow.svg" class="link-icon-large"></span>

[melissaegg]

Hey great, thank you for this, Kon! Does this also show up on the cards themselves? (Because all of them link to other resources) Or is this going to be arrows everywhere? *Melissa Eggleston* *she/her/hers* UX Designer & Instructor 704-280-9080 ***@***.*** Want to become (more) trauma-informed? Visit the Trauma-Informed Technology <https://www.traumainformedtech.com/> website.

…

On Tue, Jan 14, 2025 at 3:44 PM kon syrokostas ***@***.***> wrote: Added an icon next to links to visually indicate that the item moves into a new page. (Fixes #3 <#3>) It looks like that: Screenshot.from.2025-01-14.22-40-03.png (view on web) <https://github.com/user-attachments/assets/10baaa37-0460-43c9-bb38-258437d91771> Screenshot.from.2025-01-14.22-39-53.png (view on web) <https://github.com/user-attachments/assets/2360cc7a-4db2-4956-91bb-b397cb74cee1> I've also used aria-hidden="true" so that the icon won't be read by a screen reader. <span aria-hidden="true"><img src="assets/link_arrow.svg" class="link-icon-large"></span> ------------------------------ You can view, comment on, or merge this pull request online at: #12 Commit Summary - 8754632 <8754632> Fix #3 File Changes (3 files <https://github.com/melissaegg/trauma-informed-design-resources/pull/12/files> ) - *A* assets/link_arrow.svg <https://github.com/melissaegg/trauma-informed-design-resources/pull/12/files#diff-69ec76ba2eef027f57087389bf9aa22c3cc961e567677c790766c21865280e81> (3) - *M* index.html <https://github.com/melissaegg/trauma-informed-design-resources/pull/12/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051> (26) - *M* styles/style.css <https://github.com/melissaegg/trauma-informed-design-resources/pull/12/files#diff-f757ea077c2c6c652045a7b9e9fd9998ca60d7c87d9a1f8a1e91f513193bc60b> (10) Patch Links: - https://github.com/melissaegg/trauma-informed-design-resources/pull/12.patch - https://github.com/melissaegg/trauma-informed-design-resources/pull/12.diff — Reply to this email directly, view it on GitHub <#12>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUSENRDSI22QBR24DEXHZ632KVZLBAVCNFSM6AAAAABVFXV4O6VHI2DSMVQWIX3LMV43ASLTON2WKOZSG44DQMRUGU2TKMA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[ksyro98]

@melissaegg oh, for some reason I didn't think that those also open the content in a new tab 🤦
so currently that's not implemented on this PR
we can fix this in two ways:

Arrows in cards
in order to avoid arrows everywhere we could modify the cards a bit
for example:

Opening links on the same tab
another option would be to open the content on the same tab (this would save us from having to modify the aria-label of the cards too)
an accessibility expert had told me a while ago (for a different project) that opening content on a new tab should be avoided whenever possible
at the same time, it makes some sense in this use-case since someone might want to search and open multiple resources
I'm ok with going with whatever you or @ashleypeacock think is best