fix: a11y issues

[wesleyboar]

Overview

Fix flagged accessibility issues.

Related

• requires fix: a11y issues Core-Styles#590
• required by fix: a11y issues tup-ui#537
• assumes fix: svg icon should support role (off stable branch) #998

Changes

1. fix logo links not having accessible label 8a135d8
2. change icons to aria-hidden="true" (unless editor sets role) 6c88b19
3. fix SVGs not having accessible label 1eec2de
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 unexplained to aria c0bc273
8. fix data-prefix="Published:" requires aria-label="…" 7a06749

Testing

1. …
2. …
3. …
4. …
5. …
6. …
7. …
8. …

UI

…

[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