Skip to content

Fix more automated issues from site scan - #780

Open
gcamacho079 wants to merge 6 commits into
mainfrom
a11y/august2026
Open

Fix more automated issues from site scan#780
gcamacho079 wants to merge 6 commits into
mainfrom
a11y/august2026

Conversation

@gcamacho079

@gcamacho079 gcamacho079 commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

Description

See issues below. In addition, fixes code from the previous attempted fix of overflowing containers not getting tabindex="0" by checking component overflow and image load on mount

Related issues

ACC-198, ACC-207

@gcamacho079
gcamacho079 requested a lite review from Copilot August 11, 2026 14:56
@netlify

netlify Bot commented Aug 11, 2026

Copy link
Copy Markdown

Deploy Preview for craft-docs ready!

Name Link
🔨 Latest commit b19c196
🔍 Latest deploy log https://app.netlify.com/projects/craft-docs/deploys/6a7b5dd51435a30008480ef7
😎 Deploy Preview https://deploy-preview-780--craft-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Improves theme accessibility by moving “red” to a CSS variable and refactoring overflow-focus logic into a reusable helper used by both global utilities and the BrowserShot component.

Changes:

  • Replace Tailwind’s red color with var(--color-red) and define --color-red in theme CSS variables.
  • Refactor “make overflowing containers focusable” logic into applyTabindexIfOverflowing() and reuse it in BrowserShot.
  • Adjust link/term styling and a few UI color variables for improved contrast/affordance.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
tailwind.config.js Switch red to a CSS variable for theme-aware coloring.
docs/.vuepress/theme/util/index.js Reuse new overflow tabindex helper in makeOverflowingContainersFocusable().
docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js New helper to apply/remove tabindex based on overflow state.
docs/.vuepress/theme/styles/color-mode.pcss Define --color-red for dark-mode contexts.
docs/.vuepress/theme/styles/base.pcss Update UI/link variables and define default --color-red.
docs/.vuepress/theme/global-components/Term.vue Make glossary term links more visually discoverable.
docs/.vuepress/theme/global-components/InfoHud.vue Adjust SVG icon fill behavior.
docs/.vuepress/theme/global-components/BrowserShot.vue Add viewport ref and apply overflow tabindex logic after mount/image load.
docs/.vuepress/components/Generator.vue Remove hover-based opacity transitions from generator sub-elements.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread docs/.vuepress/theme/util/index.js Outdated
Comment thread docs/.vuepress/theme/global-components/InfoHud.vue
Comment thread docs/.vuepress/theme/util/apply-tabindex-if-overflowing.js
@gcamacho079 gcamacho079 added the Accessibility WCAG violations and usability issues. label Aug 11, 2026
@gcamacho079 gcamacho079 changed the title A11y/august2026 Fix more automated issues from site scan Aug 11, 2026
@gcamacho079
gcamacho079 marked this pull request as ready for review August 11, 2026 17:42
@gcamacho079
gcamacho079 requested a review from a team as a code owner August 11, 2026 17:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility WCAG violations and usability issues.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants