fix: a11y issues

[wesleyboar]

Overview

Fix flagged accessibility issues.

Related

• requires fix: a11y issues Core-Styles#590
• required by fix: a11y issues (+ update core-cms & core-styles) tup-ui#537
• some of this refactors fix: TUP-725 wrong a11y attribute for links #844
• assumes fix: svg icon should support role (off stable branch) #998

Changes

1. fix logo links not having accessible name 8a135d8 792e8ea 6248aae aebac3f 89355dd
2. fix SVGs not having accessible label name 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 fix: a11y issues Core-Styles#590
7. fix nav dropdown icons for "Log In" 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

   tacc	nsf	utexas

   header logo link to homepage

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

   

4. ✅ embedded Video has default title

   default	custom

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

   brighter.blue.social.link.accent.mov

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

   

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

    Opens.in.new.window.dynamic.aria.mov

[qodo-code-review]

Review Summary by Qodo

Fix accessibility issues with logo links, SVG labels, and icon exposure

🐞 Bug fix ✨ Enhancement

Walkthroughs

Description

• Add aria-label attributes to logo links and SVGs for accessibility
• Replace <title> tags with aria-label in SVG elements
• Conditionally apply aria-hidden="true" to icons only when editor doesn't set role
• Add accessible labels to published/featured date elements
• Fix logo hover color contrast from accent-normal to accent-light
• Update Core-Styles dependency to fix/a11y-issues branch

Diagram

flowchart LR
  A["Logo Links & SVGs"] -->|Add aria-label| B["Accessible Labels"]
  C["Icon Elements"] -->|Conditional aria-hidden| D["Editor-Controlled a11y"]
  E["Date Elements"] -->|Add aria-label| F["Published/Featured Labels"]
  G["Hover Colors"] -->|Improve Contrast| H["Better Visibility"]
  I["Dependencies"] -->|Update Core-Styles| J["a11y-issues Branch"]

Loading

File Changes

1. taccsite_cms/templates/djangocms_blog/includes/blog_meta.html 🐞 Bug fix +15/-4

Add aria-label to date elements for accessibility

taccsite_cms/templates/djangocms_blog/includes/blog_meta.html

---

2. taccsite_cms/templates/djangocms_icon/includes/icon.html ✨ Enhancement +13/-1

Conditionally apply aria-hidden based on editor role

taccsite_cms/templates/djangocms_icon/includes/icon.html

---

3. taccsite_cms/templates/djangocms_icon/includes/svg.html 📝 Documentation +1/-0

Add accessibility comment for conditional aria-hidden

taccsite_cms/templates/djangocms_icon/includes/svg.html

---

View more (6)

4. taccsite_cms/templates/nav_portal.raw.html 🐞 Bug fix +1/-1

Add role presentation to login icon

taccsite_cms/templates/nav_portal.raw.html

---

5. taccsite_cms/templates/share_on_social.html 🐞 Bug fix +24/-8

Add aria-label to social share links and SVG logos

taccsite_cms/templates/share_on_social.html

---

6. taccsite_cms/templates/snippets/logos-branding.html 🐞 Bug fix +15/-9

Replace title tags with aria-label in SVGs

taccsite_cms/templates/snippets/logos-branding.html

---

7. taccsite_cms/templates/snippets/logos-social-media.html 🐞 Bug fix +34/-21

Add aria-label to social media logo links and SVGs

taccsite_cms/templates/snippets/logos-social-media.html

---

8. taccsite_cms/static/site_cms/css/src/_imports/components/logos.css 🐞 Bug fix +1/-1

Improve logo hover color contrast for accessibility

taccsite_cms/static/site_cms/css/src/_imports/components/logos.css

---

9. package.json Dependencies +1/-1

Update Core-Styles to fix/a11y-issues branch

package.json

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (3) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. Git dep requires SSH 🐞 Bug ⛯ Reliability

Description

@tacc/core-styles is now installed from GitHub and the lockfile resolves it as
git+ssh://git@github.com/..., so the Docker build’s npm ci will fail in environments without
GitHub SSH credentials. This blocks asset builds and therefore blocks the image build pipeline.

Code

package.json[24]

+    "@tacc/core-styles": "github:TACC/Core-Styles#fix/a11y-issues"

Evidence

The Docker build runs npm ci, which uses package-lock.json; the lockfile pins
@tacc/core-styles to a git+ssh://git@github.com/... URL that requires SSH auth, which is
typically unavailable inside the build container.

package.json[16-25]
package-lock.json[1405-1409]
Dockerfile[39-50]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Docker builds run `npm ci`, but `@tacc/core-styles` is resolved in `package-lock.json` via `git+ssh://git@github.com/...`, which typically fails in container/CI environments that do not have GitHub SSH keys.

### Issue Context
The dependency was changed from an npm semver range to a GitHub branch ref, and npm produced an SSH-based resolved URL in the lockfile.

### Fix Focus Areas
- package.json[16-25]
- package-lock.json[1405-1409]
- Dockerfile[39-50]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Blank target missing noopener 🐞 Bug ⛨ Security

Description

Several updated external links still use target="_blank" without rel="noopener noreferrer",
allowing the opened page to control window.opener (reverse-tabnabbing). This is a security risk on
any third-party destination opened in a new tab.

Code

taccsite_cms/templates/share_on_social.html[R14-17]

+    <a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}"
+      target="_blank"
+      class="logos__facebook"
+      aria-label="link to share this URL on Facebook">

Evidence

The updated templates explicitly set target="_blank" but do not set any rel attribute, so the
new window retains access to window.opener.

taccsite_cms/templates/share_on_social.html[14-18]
taccsite_cms/templates/snippets/logos-branding.html[10-13]
Best Practice: OWASP (Reverse Tabnabbing)

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Templates open third-party sites in a new tab via `target="_blank"` but omit `rel="noopener noreferrer"`, which enables reverse-tabnabbing via `window.opener`.

### Issue Context
This PR reformats/updates these anchor tags; it is a good opportunity to add the missing `rel` attribute consistently.

### Fix Focus Areas
- taccsite_cms/templates/share_on_social.html[14-50]
- taccsite_cms/templates/snippets/logos-branding.html[10-21]
- taccsite_cms/templates/snippets/logos-social-media.html[2-56]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Scheduled label omits date 🐞 Bug ✓ Correctness

Description

In blog_meta.html, the new <time aria-label> for scheduled posts (not post.publish) contains
only “To be published” and omits the date shown in the element’s text. This makes the accessible
name inconsistent with the visible content for the same element.

Code

taccsite_cms/templates/djangocms_blog/includes/blog_meta.html[R43-51]

+      <time
+        datetime="{{ post.date_published }}"
+        aria-label="
+          {% if not post.publish %}
+            {% trans "To be published" %}
+          {% else %}
+            {% trans "Published" %}
+            {{ post.date_published|date:'DATE_FORMAT' }}
+          {% endif %}"

Evidence

The aria-label conditional includes the formatted date only in the published branch, while the
<time> content always renders the formatted date text; therefore, scheduled posts get an
accessible name that does not include the displayed date.

taccsite_cms/templates/djangocms_blog/includes/blog_meta.html[43-55]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The `<time>` element’s `aria-label` omits the date in the scheduled/unpublished branch, while the visible text still shows the date; this creates inconsistent labeling for assistive tech.

### Issue Context
The template already renders the date text unconditionally inside `<time>`, so the label logic should match.

### Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/includes/blog_meta.html[43-55]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[qodo-code-review]

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

Review Summary by Qodo

Fix accessibility issues with logos, icons, and external links

🐞 Bug fix ✨ Enhancement

Walkthroughs

Description

• Add accessible names to logo links via link_name config
• Add aria-label and aria-describedby to SVG logos and social links
• Conditionally apply aria-hidden="true" to icons unless editor sets role
• Improve blog post date accessibility with aria-label on <time> elements
• Fix external link handling to use aria-describedby instead of aria-label
• Update logo hover color contrast for better accessibility

Diagram

flowchart LR
  A["Logo & Branding Config"] -->|add link_name| B["Logo Links"]
  B -->|aria-label| C["Accessible Names"]
  D["SVG Templates"] -->|add role & title| E["SVG Logos"]
  E -->|aria-label| C
  F["Icon Template"] -->|conditional aria-hidden| G["Icon Accessibility"]
  H["External Links JS"] -->|aria-describedby| I["New Window Notice"]
  J["Blog Meta Template"] -->|aria-label on time| K["Date Accessibility"]
  L["Social Share Links"] -->|aria-label| M["Share Link Names"]

Loading

File Changes

1. taccsite_cms/_settings/branding.py ✨ Enhancement +6/-3

Add accessible names to branding logo configs

taccsite_cms/_settings/branding.py

---

2. taccsite_cms/settings/settings.py ✨ Enhancement +1/-0

Add link_name to portal logo configuration

taccsite_cms/settings/settings.py

---

3. taccsite_cms/settings/settings_custom.example.py 📝 Documentation +2/-1

Add link_name to example portal logo config

taccsite_cms/settings/settings_custom.example.py

---

View more (14)

4. taccsite_cms/templates/cms_menu.html 🐞 Bug fix +1/-1

Update dropdown toggle aria text formatting

taccsite_cms/templates/cms_menu.html

---

5. taccsite_cms/templates/djangocms_blog/includes/blog_meta.html ✨ Enhancement +15/-4

Add aria-label to published and featured date elements

taccsite_cms/templates/djangocms_blog/includes/blog_meta.html

---

6. taccsite_cms/templates/djangocms_icon/includes/icon.html ✨ Enhancement +13/-1

Conditionally apply aria-hidden based on role attribute

taccsite_cms/templates/djangocms_icon/includes/icon.html

---

7. taccsite_cms/templates/djangocms_icon/includes/svg.html 📝 Documentation +1/-0

Add accessibility comment for SVG role handling

taccsite_cms/templates/djangocms_icon/includes/svg.html

---

8. taccsite_cms/templates/header_branding.html ✨ Enhancement +3/-0

Add aria-label to branding logo links

taccsite_cms/templates/header_branding.html

---

9. taccsite_cms/templates/header_logo.html ✨ Enhancement +3/-0

Add aria-label to portal logo link

taccsite_cms/templates/header_logo.html

---

10. taccsite_cms/templates/nav_portal.raw.html 🐞 Bug fix +1/-1

Add aria-hidden to login icon

taccsite_cms/templates/nav_portal.raw.html

---

11. taccsite_cms/templates/share_on_social.html ✨ Enhancement +24/-8

Add aria-label and role to social share SVG links

taccsite_cms/templates/share_on_social.html

---

12. taccsite_cms/templates/snippets/logos-branding.html ✨ Enhancement +12/-6

Add aria-label to branding logos and improve titles

taccsite_cms/templates/snippets/logos-branding.html

---

13. taccsite_cms/templates/snippets/logos-social-media.html ✨ Enhancement +28/-15

Add aria-label to social media logo links

taccsite_cms/templates/snippets/logos-social-media.html

---

14. taccsite_cms/static/site_cms/css/src/_imports/components/logos.css 🐞 Bug fix +1/-1

Update logo hover color for better contrast

taccsite_cms/static/site_cms/css/src/_imports/components/logos.css

---

15. taccsite_cms/static/site_cms/js/modules/setTargetForExternalLinks.js ✨ Enhancement +35/-1

Replace aria-label with aria-describedby for new window links

taccsite_cms/static/site_cms/js/modules/setTargetForExternalLinks.js

---

16. docs/upgrade-project.md 📝 Documentation +4/-2

Update documentation with link_name config field

docs/upgrade-project.md

---

17. package.json Dependencies +1/-1

Update core-styles dependency to fix/a11y-issues branch

package.json

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (4) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. Mutable Core-Styles dependency 🐞 Bug ⛯ Reliability ⭐ New

Description

package.json pins @tacc/core-styles to a moving Git branch (fix/a11y-issues), so installs can change
over time without repo changes, making builds non-reproducible and potentially breaking if the
branch moves or is deleted.

Code

package.json[24]

+    "@tacc/core-styles": "github:TACC/Core-Styles#fix/a11y-issues"

Evidence

The dependency is no longer a semver version; it references a GitHub branch name which is mutable
and can change without any change to this repo, impacting repeatable builds and deployments.

package.json[22-25]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`@tacc/core-styles` is referenced via a mutable Git branch (`github:TACC/Core-Styles#fix/a11y-issues`), which makes installs non-deterministic and can break builds if the branch head changes or the branch is removed.

### Issue Context
This repo uses `@tacc/core-styles` during the CSS build pipeline; reproducible dependency resolution is important for CI and deployments.

### Fix Focus Areas
- package.json[24-24]

### Suggested change
- Replace the branch reference with one of:
 - a released semver tag (preferred once available), e.g. `^2.x.y`, or
 - a commit SHA, e.g. `github:TACC/Core-Styles#<commit_sha>` (temporary but immutable).
- Ensure the lockfile remains consistent with the new spec (update via `npm install` / `npm ci` workflow as appropriate).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Git dep requires SSH 🐞 Bug ⛯ Reliability

Description

@tacc/core-styles is now installed from GitHub and the lockfile resolves it as
git+ssh://git@github.com/..., so the Docker build’s npm ci will fail in environments without
GitHub SSH credentials. This blocks asset builds and therefore blocks the image build pipeline.

Code

package.json[24]

+    "@tacc/core-styles": "github:TACC/Core-Styles#fix/a11y-issues"

Evidence

The Docker build runs npm ci, which uses package-lock.json; the lockfile pins
@tacc/core-styles to a git+ssh://git@github.com/... URL that requires SSH auth, which is
typically unavailable inside the build container.

package.json[16-25]
package-lock.json[1405-1409]
Dockerfile[39-50]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Docker builds run `npm ci`, but `@tacc/core-styles` is resolved in `package-lock.json` via `git+ssh://git@github.com/...`, which typically fails in container/CI environments that do not have GitHub SSH keys.
### Issue Context
The dependency was changed from an npm semver range to a GitHub branch ref, and npm produced an SSH-based resolved URL in the lockfile.
### Fix Focus Areas
- package.json[16-25]
- package-lock.json[1405-1409]
- Dockerfile[39-50]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Blank target missing noopener 🐞 Bug ⛨ Security

Description

Several updated external links still use target="_blank" without rel="noopener noreferrer",
allowing the opened page to control window.opener (reverse-tabnabbing). This is a security risk on
any third-party destination opened in a new tab.

Code

taccsite_cms/templates/share_on_social.html[R14-17]

+    <a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}"
+      target="_blank"
+      class="logos__facebook"
+      aria-label="link to share this URL on Facebook">

Evidence

The updated templates explicitly set target="_blank" but do not set any rel attribute, so the
new window retains access to window.opener.

taccsite_cms/templates/share_on_social.html[14-18]
taccsite_cms/templates/snippets/logos-branding.html[10-13]
Best Practice: OWASP (Reverse Tabnabbing)

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Templates open third-party sites in a new tab via `target="_blank"` but omit `rel="noopener noreferrer"`, which enables reverse-tabnabbing via `window.opener`.
### Issue Context
This PR reformats/updates these anchor tags; it is a good opportunity to add the missing `rel` attribute consistently.
### Fix Focus Areas
- taccsite_cms/templates/share_on_social.html[14-50]
- taccsite_cms/templates/snippets/logos-branding.html[10-21]
- taccsite_cms/templates/snippets/logos-social-media.html[2-56]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

4. Scheduled label omits date 🐞 Bug ✓ Correctness

Description

In blog_meta.html, the new ` for scheduled posts (not post.publish`) contains only “To be
published” and omits the date shown in the element’s text. This makes the accessible name
inconsistent with the visible content for the same element.

Code

taccsite_cms/templates/djangocms_blog/includes/blog_meta.html[R43-51]

+      <time
+        datetime="{{ post.date_published }}"
+        aria-label="
+          {% if not post.publish %}
+            {% trans "To be published" %}
+          {% else %}
+            {% trans "Published" %}
+            {{ post.date_published|date:'DATE_FORMAT' }}
+          {% endif %}"

Evidence

The aria-label conditional includes the formatted date only in the published branch, while the ``
content always renders the formatted date text; therefore, scheduled posts get an accessible name
that does not include the displayed date.

taccsite_cms/templates/djangocms_blog/includes/blog_meta.html[43-55]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The `<time>` element’s `aria-label` omits the date in the scheduled/unpublished branch, while the visible text still shows the date; this creates inconsistent labeling for assistive tech.
### Issue Context
The template already renders the date text unconditionally inside `<time>`, so the label logic should match.
### Fix Focus Areas
- taccsite_cms/templates/djangocms_blog/includes/blog_meta.html[43-55]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[wesleyboar]

Qodo's required actions done, and its recommended tasks are inaccurate.