When in browse mode, NVDA isn't reading tweets embedded on websites

[pbsinnett]

Steps to reproduce:

1. In Chrome or edge, visit a site with embedded tweets. For example, https://www.androidpolice.com/2020/05/04/it-sure-looks-like-googles-head-of-hardware-just-tweeted-from-a-pixel-4a/

2. Locate the tweet frame. Notice how NVDA only reads the "opens tweet in a new tab" link.

Actual behavior:

The embedded tweet cannot be read in browse mode with NVDA. In focus mode, you can tab through the various links in the tweet. This happens with a few other things, but embedded tweets are the most noticeable.

Expected behavior:

In browse mode, arrowing down through the tweet and interacting with the controls should be possible.

System configuration

NVDA 2020.1 installed, Windows 10 version 2004, Chrome 84

[lukaszgo1]

It can be reproduced in Firefox as well.

[pbsinnett]

It can also be reproduced in Edge.

Another possibly related issue is that certain links don't speak their contents. Check out this link:

https://www.cordcuttersnews.com/streaming-now-accounts-for-25-of-television-viewing/?source=home

The links in the article have text, but it's not spoken. All you get is Opens in a new tab. If you explore them with the navigator object, you can see the text within the link. Very odd indeed.

[Adriani90]

This is also reproducible in Firefox.
cc: @jcsteh

[jcsteh]

The tweet is inside the link and the link has an aria-label. Since aria-label overrides the content of links (as demanded by users and authors alike, despite our concerns about potential abuse like this), you can't access the content. Twitter needs to fix this.

[rkingett]

This is not an NVDA problem. It is a Yoast problem. See the 2 links below.

Aria label outputs undefined, opens in a new tab

Another issue about the ARIA labels in Yoast.

[aardrian]

This is a Twitter bug. Not Yoast, not NVDA. You can test this in the browser accessibility inspector as well.

The code that Twitter renders with its embed script looks like this (I removed irrelevant bits):

<div aria-label="Opens Tweet on Twitter in a new tab" … tabindex="0" class="…" role="link">

Essentially Twitter is converting a <div> into a link via the ARIA link role, tabindex and an onclick handler. But it gets worse — Twitter is nesting real links and buttons inside the link, which is invalid.

I pinged the Twitter accessibility team:
https://twitter.com/aardrian/status/1295354402765758464

[Adriani90]

Given the comments above, I am closing this issue as it is not related to NVDA. Thanks all for the contributions here.