Skip to content

fix: svg icon should support role (off stable branch)#998

Merged
wesleyboar merged 1 commit into
stablefrom
fix/svg-role-should-not-assume-only-ever-presentation--stable
Oct 3, 2025
Merged

fix: svg icon should support role (off stable branch)#998
wesleyboar merged 1 commit into
stablefrom
fix/svg-role-should-not-assume-only-ever-presentation--stable

Conversation

@wesleyboar

Copy link
Copy Markdown
Member

@wesleyboar wesleyboar merged commit 26a9dea into stable Oct 3, 2025
@wesleyboar wesleyboar deleted the fix/svg-role-should-not-assume-only-ever-presentation--stable branch October 3, 2025 21:19
@wesleyboar wesleyboar mentioned this pull request Feb 16, 2026
wesleyboar added a commit that referenced this pull request Feb 16, 2026
wesleyboar added a commit that referenced this pull request Mar 18, 2026
## Overview

Fix flagged accessibility issues.

## Related

* requires TACC/Core-Styles#590
* required by TACC/tup-ui#537
* some of this refactors #844
* assumes #998

## Changes

1. fix logo links not having accessible name 8a135d8 792e8ea 6248aae
aebac3f 89355dd
2. fix SVGs not having accessible <del>label</del> <ins>name</ins>
1eec2de 792e8ea 6248aae aebac3f 89355dd
3. change icons to `aria-hidden="true"` (unless editor sets `role`)
6c88b19
4. add default video/iframe title d7d6cb5
5. fix logo link color vs normal text 3dc0dbd
6. fix generic link color vs normal text
TACC/Core-Styles#590
7. fix nav dropdown icon<del>s</del> <ins>for "Log In"</ins> unexplained
to aria c0bc273 5b7d360
8. fix `data-prefix="Published:"` requires `aria-label="…"` 7a06749
9. fix(a11y): accent blue for links on dark section 24fdf77
10. fix(a11y): new window links override aria-label 89355dd

## Testing & UI

1. ✅ logo links and images should have accessible names
2. ✅ SVGs have accessible name

    | share | social | branding |
    | - | - | - |
| <img width="900" height="470" alt="share on social"
src="https://github.com/user-attachments/assets/a67d48aa-d88e-40cb-a243-798fb3fc0f73"
/> | <img width="900" height="470" alt="social media"
src="https://github.com/user-attachments/assets/a33c25ca-bf8e-4ff5-b81a-33710f727ff7"
/> | <img width="900" height="470" alt="branding"
src="https://github.com/user-attachments/assets/515650a9-a2bb-45fc-9018-6dd5df6713b4"
/> |

    | tacc | nsf | utexas |
    | - | - | - |
| <img width="900" height="470" alt="nsf"
src="https://github.com/user-attachments/assets/741c6851-9981-4399-9c65-b4f712613ad5"
/> | <img width="900" height="470" alt="utexas"
src="https://github.com/user-attachments/assets/e1c7670d-7277-4e47-baa2-6e660f36117f"
/> | <img width="900" height="470" alt="tacc"
src="https://github.com/user-attachments/assets/4490abfc-f4a1-4ef5-abcd-09e5793c5473"
/> |

    | header logo link to homepage |
    | - |
| <img width="900" height="470" alt="homepage link"
src="https://github.com/user-attachments/assets/8a8263eb-fc1e-4ed8-a561-9d6a87536b87"
/> |

3. ✅ an Icon (with no `role`, not an SVG) has `aria-hidden="true"`

<img width="900" height="470" alt="icon role"
src="https://github.com/user-attachments/assets/7b3936ed-00b9-4c31-b211-3e7765a63a9f"
/>

4. ✅ embedded Video has default `title`

    | default | custom |
    | - | - |
| <img width="900" height="470" alt="default"
src="https://github.com/user-attachments/assets/81c854db-70bc-4777-81af-f19a38c0458d"
/> | <img width="900" height="470" alt="custom"
src="https://github.com/user-attachments/assets/334389f9-3f7e-49ab-8146-5d5bcc188740"
/> |

5. ✅ logo links (e.g. for sharing on social media) have brighter blue
hover color `#3d6acc`


https://github.com/user-attachments/assets/17a58081-adfa-4c0e-b895-c74287696267

6. ✅ accent colors for links are brighter (on light bkgd) (buttons
unchanged)

> [!TIP]
> See TACC/tup-ui#537 for test and screenshots.

7. ✅ nav icon for "Log In" menu link has accessible markup

<img width="900" height="470" alt="hide Log In icon"
src="https://github.com/user-attachments/assets/d320f920-b13b-46a8-97c4-3b7f5d9c1611"
/>

8. ✅ `data-prefix="Published:"` elements have accessible name

> [!TIP]
> See TACC/tup-ui#537 for test and screenshots.

9. ✅ accent colors for links are brighter (on dark bkgd) (buttons
unchanged)

> [!TIP]
> See TACC/tup-ui#537 for test and screenshots.

11. ✅ new window/tab links get dynamic `aria-describedby` not
`aria-label`


https://github.com/user-attachments/assets/4ea6340c-572c-46b3-9fb3-0d55f3b4f316
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant