A11Y: Hide avatar link from tabindex when it's aria-hidden (#36227)

awesomerobot · web-flow · commit 1873f98797d4 · 2025-11-25T13:14:12.000-05:00
When paired with a username, we hide the avatar link from assistive technology because it's a decorative image wrapped in a duplicate link. We don't change the tabindex though, which means it's still reachable with tab navigation... and in this situation a screenreader may still announce it. <img width="300" alt="image" src="https://github.com/user-attachments/assets/9ff60992-8956-4b96-89a7-e3c1a5f6ec59" /> This adds tabindex `-1` when `ariaHidden` to remove it from tab nav so it's no longer an issue.
diff --git a/frontend/discourse/app/components/user-link.gjs b/frontend/discourse/app/components/user-link.gjs
@@ -60,6 +60,7 @@ export default class UserLink extends Component {
       data-user-card={{this.username}}
       aria-hidden={{this.ariaHidden}}
       aria-label={{this.ariaLabel}}
+      tabindex={{if this.ariaHidden "-1" "0"}}
     >
       {{yield}}
     </a>

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,7 @@ export default class UserLink extends Component {`
`60`	`60`	`data-user-card={{this.username}}`
`61`	`61`	`aria-hidden={{this.ariaHidden}}`
`62`	`62`	`aria-label={{this.ariaLabel}}`
	`63`	`+ tabindex={{if this.ariaHidden "-1" "0"}}`
`63`	`64`	`>`
`64`	`65`	`{{yield}}`
`65`	`66`	`</a>`