From db67c478beb5cf980c3cb4ccde8c735eab947bea Mon Sep 17 00:00:00 2001
From: OsamaSayegh <asooomaasoooma90@gmail.com>
Date: Wed, 30 Mar 2022 08:26:58 +0300
Subject: [PATCH] A11Y: Make user avatars in posts stream untabbable

The user avatar in posts has aria-hidden set to true to reduce
redundancy since the information that the avatar gives to screen readers
is the same information that the username/name of the post gives which
is the author of the post.

However, it's still possible for a screen reader user to reach the
avatar by tabbing through the post and when that happens the avatar is
read as "blank". This isn't ideal so we should set tabindex to -1 on the
avatar to remove it from the default keyboard nav flow.
---
 .../javascripts/discourse/app/widgets/post.js | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
index 5811513ca49..fe345ab0b6b 100644
--- a/app/assets/javascripts/discourse/app/widgets/post.js
+++ b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -184,14 +184,21 @@ createWidget("post-avatar", {
     if (!attrs.user_id) {
       body = iconNode("far-trash-alt", { class: "deleted-user-avatar" });
     } else {
-      body = avatarFor.call(this, this.settings.size, {
-        template: attrs.avatar_template,
-        username: attrs.username,
-        name: attrs.name,
-        url: attrs.usernameUrl,
-        className: `main-avatar ${hideFromAnonUser ? "non-clickable" : ""}`,
-        hideTitle: true,
-      });
+      body = avatarFor.call(
+        this,
+        this.settings.size,
+        {
+          template: attrs.avatar_template,
+          username: attrs.username,
+          name: attrs.name,
+          url: attrs.usernameUrl,
+          className: `main-avatar ${hideFromAnonUser ? "non-clickable" : ""}`,
+          hideTitle: true,
+        },
+        {
+          tabindex: "-1",
+        }
+      );
     }
 
     const postAvatarBody = [body];