fix: a11y issues#590
Merged
wesleyboar merged 24 commits intomainfrom Mar 17, 2026
Merged
Conversation
This was referenced Feb 23, 2026
Make body text darker. (Previous commit made link color lighter.)
- darker modal close button (by not setting color)
- darker monospace text color (by changing variable)
- darker table text color (by not setting color)
- darker section text color (by changing variable)
- remove `--color--text-strong` cuz it now matches `--color--text`
- darker form page footer links (by inheriting color)
All the darkest text becomes pure black, by changing design token. This changes variable `primary--xx-dark` from `#222` to `#000`.
Footer links become blue Background stays #222. - delete var: …accent--light-old → …accent--light-alt - add new var: …accent--dark-alt
- Added hover styles for navigation links in s-header and s-portal-nav. - Removed redundant hover styles from s-cms-nav.
- **deletes** …accent--xx-dark-alt - **changes** …accent--light-alt - **demos** …accent--light-alt - **deprecates** …primary--xxx-dark - **changes** s-footer uses header-bkgd-color
Keep aria-label like this only if "Published" is not in text e.g. ``` data-prefix="Published:" ```
Parent element reads <i class="icon…">` as a an odd character. Using `aria-hidden` isntead of `role` fixes that.
ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan Review Summary by QodoFix accessibility issues with color contrast and interactive states
WalkthroughsDescription• Improve accessibility by adjusting color contrast throughout the design system • Lighten accent color (--global-color-accent--light) from #aac7ff to #6d8bda in dark context for better contrast • Darken body text by changing from --global-color-primary--x-dark to --global-color-primary--xx-dark • Update all link colors from --global-color-accent--normal to --global-color-accent--light across components and utilities • Increase disabled link opacity from 0.5 to 0.75 for improved visibility • Darken modal close button, monospace text, table text, and section text colors • Remove --color--text-strong variable as it now matches --color--text • Darken footer background and lighten footer text for better contrast • Add :active state styling for header navigation links • Refactor demo element styles to use CSS variables instead of hardcoded hex values • Add aria-label attributes where required for accessibility compliance Diagramflowchart LR
A["Color Variables"] -->|"Lighten accent"| B["--global-color-accent--light"]
A -->|"Darken text"| C["--global-color-primary--xx-dark"]
B -->|"Applied to"| D["Links & Buttons"]
C -->|"Applied to"| E["Body & Elements"]
D -->|"Increase opacity"| F["Disabled States"]
E -->|"Improve contrast"| G["Better Accessibility"]
H["Interactive States"] -->|"Add :active"| I["Header Nav Links"]
I -->|"Enhance UX"| G
File Changes1. dist/core-styles.docs.css
|
Code Review by Qodo
1. Broken btn.hbs template
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
wesleyboar
added a commit
to TACC/Core-CMS
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
Fix misc accessibility issues.
Related
Changes
--color--text-strongcuz it now matches--color--text…accent--light-oldto…accent--light-alt…accent--dark-altdata-prefix="Published:"requiresaria-label="…"afec01e:activestate for header nav links a80f89dTesting & UI
1. — 11. from "Changes"
Tip
Tested via TACC/Core-CMS#1089 and TACC/tup-ui#537.
12. add
:activestate for header nav links a80f89dactive.state.for.log.in.link.mov
active.state.for.portal.nav.link.mov
active.state.for.cms.nav.link.mov
13. darken footer background & lighten footer text f39edcf
Tip
Tested via TACC/tup-ui#537.