Accessibility bug: Some aria-labels not starting with the visual content

[SleeplessByte]

Steps to Reproduce

1. Go to https://bsky.app/feeds
2. Make sure you are not following any feeds so the NoFollowingFeed component renders
3. Try a voice command to press "Click here to add one".

You won't be able to because the aria-label is Add the default feed of only people you follow, which you cannot see. So if you are using a voice command to click on this link, you won't be able to.

The relevant criterium: SC 2.5.3: Label in Name

Caution

Whilst the criterium says that the accessible label must at least contain the visual label, for many voice-operated assistive technologies the accessible label must start with the visual label. I found one report that Apple's Voice Control requires the full label to match, which is not great. I personally do not optimise for this, but passing the success criterium + moving the visual content to the start of the accessible label is very important, at minimum.

• All accessible labels start with the visual content
• Do not introduce new accessible labels that break this rule

Please note that this is only one example. In the first 15% of the translations file I found more than 1 example, but I do not have the time right now to make a complete list.

Note

Adding positional data to accessible labels in general is really bad, as is it to add the method of interaction. If this component had no overridden accessible label, would need to say: "Click click here to add one.". In general you want to refrain from saying "here" or "click" or "tap" or "touch".

Attachments

I found this whilst reviewing the Dutch translations PO: #6329 (comment)

The relevent code for this example issue is in NoFollowingFeed.tsx:

        <Trans>
          Looks like you're missing a following feed.{' '}
          <InlineLinkText
            to="/"
            label={_(msg`Add the default feed of only people you follow`)}
            onPress={addRecommendedFeeds}
            style={[a.leading_snug]}>
            Click here to add one.
          </InlineLinkText>
        </Trans>

What platform(s) does this occur on?

iOS, Android, Web (Desktop), Web (Mobile)

Device Info

Not Relevant

What version of the app are you using?

Not Relevant

Additional Information

A good resource on the matter is: https://www.briandeconinck.com/designing-coding-voice/ and https://www.tpgi.com/testing-with-speech-recognition/