fix: TUP-725 wrong a11y attribute for links#844
Merged
wesleyboar merged 1 commit intomainfrom Jul 9, 2024
Merged
Conversation
This was referenced Mar 18, 2026
Merged
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Change
aria-descriptiontoaria-labelfor links that open in new window.Warning
Bad: overwrites existing accessible name; refactored in #1089.
Related
Changes
Testing & UI
Skipped.