Accessibility bug: aria-label of post metadata on replies are useless

[SleeplessByte]

Steps to Reproduce

1. Go to https://bsky.app/
2. To discover this issue quickly, open any screen reader, but you can also see this in the dev tools
3. Inspect any post
4. Now inspect any reply

On a post, the information is verbose, but not completely broken:

visited  link    Sacha Greif's avatar
link    sachagreif.bsky.social
link    sachagreif.bsky.social
toggle button  not pressed    Follow sachagreif.bsky.social

• Have distinct links, duplicate adjacent links should be merged or removed

In this case the label for the second one is bad because I would expect to see Sacha Greif, not the handle.

On a reply, the information is useless:

link    visited  link    Sacha Greif's avatar
link    visited  link    View profile  visited  link    View profile
link    ·
link    link    November 9, 2024 at 7:24 AM

• The aria-label should not be "View profile"
• Each aria-label should start with the visible content first, so that voice commands work

About that avatar

Okay so there are three adjacent links that all go to the same place:

• the avatar
• the name
• the handle

This is very common on social media, but I do think this could be improved.

There is already a past decision to hide the avatar from the accessibility tree by giving it the null alt (alt=""). This makes sense, because the avatar adds no information for a non-sighted user here, other than knowing that THEIR profile picture may be shown to others, but I don't think that's really that relevant. A blind person should probably comment on this if applicable.

However, you then yank it back into the accessibility tree by having a link with a hardcoded label "the users' avatar". You probably don't want that. It adds nothing, and does add another tab stop before you get to the content you may want to interact with.

However, if you are going to remove the label, this MUST NOT be an "interactive" element in terms of assistive technology. So this would be the one exception where I would expect a pointer user (mouse/touch) to be able to click a div (the avatar) to go to the profile, but NOT any other user.

• Optional: consider removing the avatar link by removing the role, and not making it an anchor
• Optional: when removed, re-enable the link for pointer users without turning it into an interactive element (a or button etc.)

Attachments

Here is the relevant HTML for the avatar:

<div>
  <div>
    <div>
      <a href="/profile/sachagreif.bsky.social" aria-label="Sacha Greif's avatar" aria-pressed="false" role="link" tabindex="0">
        <div>
          <div data-testid="userAvatarImage">
            <div></div>
            <img alt="" draggable="false">
          </div>
          <div></div>
        </div>
      </a>
    </div>
  </div>
</div>

Here is the relevant HTML for the post metadata at the top, for a reply:

<div>
   <div>
      <div>
         <div>
            <a href="/profile/sachagreif.bsky.social" aria-label="View profile" role="link">
              <span>‪Sacha Greif‬</span>
            </a>
            <a href="/profile/sachagreif.bsky.social" aria-label="View profile" role="link">
              <span>&nbsp;‪@sachagreif.bsky.social‬</span>
            </a>
         </div>
      </div>
   </div>

   <div>·</div>

   <a href="/profile/sachagreif.bsky.social/post/3lainpqrnwc2m" aria-label="November 9, 2024 at 7:24 AM" role="link">4d</a>
</div>

What platform(s) does this occur on?

Web (Desktop), Web (Mobile)

Device Info

Not relevant

What version of the app are you using?

Web

Additional Information

You probably want to merge the links for the name and handle into a single link, and REMOVE the aria-labels. It will read the content, which is exactly what I want:

link    visited  link    Sacha Greif sachagreif.bsky.social
link    visited  link    November 9, 2024 at 7:24 AM