Page MenuHomePhabricator

aria-label does not appear without JavaScript
Open, Needs TriagePublic2 Estimated Story PointsBUG REPORT

Description

What is the problem?

When looking at a Phonos element without JavaScript, the aria-label is not included in the HTML.

aria-label is used by screenreaders to describe the Phonos element. It is normally of the form: Listen to the IPA pronunciation of Fly.

So, if you use a screenreader and disable JavaScript, you won't get a (nice) description.

Steps to reproduce problem
  1. Disable javascript on your browser
  2. Go to an article with Phonos (e.g. https://patchdemo.wmflabs.org/wikis/34377c5aff/wiki/Main_Page)
  3. Inspect the HTML of the Phonos element

Expected behavior: The <a> element has an aria-label attribute
Observed behavior: It does not

Environment

Wiki: local docker Phonos 0.1.0 (44b1ff7) 08:20, 10 October 2022.

Event Timeline

JMcLeod_WMF set the point value for this task to 2.Oct 11 2022, 2:17 PM
Samwilson added a subscriber: Samwilson.

In T321436 we decided to just use aria-label, but this bug is still valid for that.

Change 870743 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/Phonos@master] Move setting of aria-label from JS to PHP

https://gerrit.wikimedia.org/r/870743

Samwilson renamed this task from aria-description does not appear without JavaScript to aria-label does not appear without JavaScript.Dec 22 2022, 5:53 AM
Samwilson updated the task description. (Show Details)

I've created T325796 to handle what to do when text is empty.

Change 870743 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Move setting of aria-label from JS to PHP

https://gerrit.wikimedia.org/r/870743

Test wiki created on Patch demo by GMikesell-WMF using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/00b9996912/w

Test wiki created on Patch demo by GMikesell-WMF using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2784278a0b/w

@Samwilson When following the directions above, we got aria-description besides aria-label as seen in the screenshot below

OS: Mac 13.0
Browser: Chrome

T320414_Phonos_Ariel_label_Chrome.png (952Γ—1 px, 166 KB)

That's very strange! When I look at that HTML in Firefox and Chrome I see the following (with no aria-label or aria-description):

<span class="ext-phonos ext-phonos-PhonosButton noexcerpt oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-labelElement oo-ui-buttonWidget oo-ui-popupButtonWidget" id="ooui-php-1" aria-haspopup="dialog" aria-owns="ooui-1" data-nosnippet="" data-ooui=""><a class="oo-ui-buttonElement-button" role="button" tabindex="0" href="/wikis/2784278a0b/w/images/phonos-render/j/n/jnp9k58i5p6vitc12qs8wbrwt6n04d5.mp3" rel="nofollow"><span class="oo-ui-iconElement-icon oo-ui-icon-volumeUp"></span><span class="oo-ui-labelElement-label">/flaΙͺΜ―/</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></a></span>

But the raw HTML (i.e. without JS) is:

<span data-nosnippet="" aria-label="Listen to the IPA pronunciation of Fly." id="ooui-php-1" class="ext-phonos ext-phonos-PhonosButton noexcerpt oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-frameless oo-ui-iconElement oo-ui-labelElement oo-ui-buttonWidget" data-ooui="{&quot;_&quot;:&quot;mw.Phonos.PhonosButton&quot;,&quot;href&quot;:&quot;\/wikis\/2784278a0b\/w\/images\/phonos-render\/j\/n\/jnp9k58i5p6vitc12qs8wbrwt6n04d5.mp3&quot;,&quot;rel&quot;:[&quot;nofollow&quot;],&quot;framed&quot;:false,&quot;icon&quot;:&quot;volumeUp&quot;,&quot;label&quot;:&quot;\/fla\u026a\u032f\/&quot;,&quot;data&quot;:{&quot;ipa&quot;:&quot;\/fla\u026a\u032f\/&quot;,&quot;text&quot;:&quot;Fly&quot;,&quot;lang&quot;:&quot;en&quot;,&quot;wikibase&quot;:&quot;&quot;},&quot;classes&quot;:[&quot;ext-phonos&quot;,&quot;ext-phonos-PhonosButton&quot;,&quot;noexcerpt&quot;]}"><a role="button" tabindex="0" href="/wikis/2784278a0b/w/images/phonos-render/j/n/jnp9k58i5p6vitc12qs8wbrwt6n04d5.mp3" rel="nofollow" class="oo-ui-buttonElement-button"><span class="oo-ui-iconElement-icon oo-ui-icon-volumeUp"></span><span class="oo-ui-labelElement-label">/flaΙͺΜ―/</span><span class="oo-ui-indicatorElement-indicator oo-ui-indicatorElement-noIndicator"></span></a>

With aria-label but no aria-description. It seems that browsers might do some inconsistent normalizing of these things.

Oh oops, I just realized that we're looking at different patchdemo wikis! That'd explain why you're seeing aria-description. Can you test again, but on the Beta Cluster?

I think this is a bug in OOUI. I've created T326513 to dig into it, and in the meantime will add a workaround in Phonos so that aria-label is kept.

Change 876393 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/Phonos@master] Copy aria-label attr from HTML to JS

https://gerrit.wikimedia.org/r/876393

Okay, so I was wrong about it being a bug in OOUI. :-)

Working on another approach now.

Change 876393 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Copy aria-label attr from HTML to JS

https://gerrit.wikimedia.org/r/876393

@Samwilson I do see the aria-label attribute now when I disable Java as seen in the screenshot and test link below in Beta. I will now move this to Done. Thanks!

Test link: https://en.wikipedia.beta.wmflabs.org/wiki/T320414:_aria-label_does_not_appear_without_JavaScript
OS: macOS 13.0
Browser: Chrome 109

T320414_Phonos_Arial-label_WO_Java.png (1Γ—2 px, 328 KB)