Maniphest T320414

aria-label does not appear without JavaScript
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	dom_walden
	Oct 10 2022, 12:59 PM

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

Disable javascript on your browser
Go to an article with Phonos (e.g. https://patchdemo.wmflabs.org/wikis/34377c5aff/wiki/Main_Page)
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.

Details

	Subject	Repo	Branch	Lines +/-
	Copy aria-label attr from HTML to JS	mediawiki/extensions/Phonos	master	+13 -0
	Move setting of aria-label from JS to PHP	mediawiki/extensions/Phonos	master	+13 -11

Customize query in gerrit

Related Objects

Mentioned In: rEPHN1223d267c897: Copy aria-label attr from HTML to JS
T326513: OOUI infusion loses aria-label attribute
rEPHNc5f004f1d9da: Move setting of aria-label from JS to PHP
Mentioned Here: T326513: OOUI infusion loses aria-label attribute
T325796: Fix aria-label for when 'text' is empty
T321436: Phonos button does not detail what it does
rEPHN44b1ff7ac012: Localisation updates from https://translatewiki.net.

Event Timeline

dom_walden created this task.Oct 10 2022, 12:59 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 10 2022, 12:59 PM

dmaza moved this task from New & TBD Tickets to Needs Discussion on the Community-Tech board.Oct 10 2022, 2:10 PM

• JMcLeod_WMF set the point value for this task to 2.Oct 11 2022, 2:17 PM

• JMcLeod_WMF moved this task from Needs Discussion to Up Next on the Community-Tech board.Oct 12 2022, 11:25 AM

• JMcLeod_WMF moved this task from Up Next to CommTech-Sprint-38 on the Community-Tech board.Dec 1 2022, 6:31 PM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-38); removed Community-Tech.

• JMcLeod_WMF moved this task from Backlog to 🌟Top Priority on the MediaWiki-extensions-Phonos board.

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

gerritbot added a project: Patch-For-Review.Dec 22 2022, 5:53 AM

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

Samwilson mentioned this in rEPHNc5f004f1d9da: Move setting of aria-label from JS to PHP.Dec 22 2022, 6:33 AM

Samwilson moved this task from In Development 💻 to QA 🐛 on the Community-Tech (CommTech-Sprint-38) board.Dec 22 2022, 6:34 AM

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.17; 2023-01-02).Dec 22 2022, 7:00 AM

Maintenance_bot removed a project: Patch-For-Review.Dec 22 2022, 7:30 AM

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

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-39); removed Community-Tech (CommTech-Sprint-38).Jan 3 2023, 6:37 PM

• JMcLeod_WMF moved this task from Ready 🎬 to QA 🐛 on the Community-Tech (CommTech-Sprint-39) board.Jan 3 2023, 6:39 PM

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?

Actually, I'm going to look into this a bit deeper.

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

gerritbot added a project: Patch-For-Review.Jan 9 2023, 2:54 AM

I've made a fix that we can remove once T326513 is sorted.

matmarex mentioned this in T326513: OOUI infusion loses aria-label attribute.Jan 10 2023, 1:00 AM

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

Working on another approach now.

Samwilson moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Sprint-39) board.Jan 10 2023, 7:22 AM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-40); removed Community-Tech (CommTech-Sprint-39).Jan 16 2023, 8:00 PM

• JMcLeod_WMF moved this task from Ready 🎬 to Review/Feedback 💬 on the Community-Tech (CommTech-Sprint-40) board.Jan 16 2023, 8:04 PM

Change 876393 merged by jenkins-bot:

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

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

TheresNoTime mentioned this in rEPHN1223d267c897: Copy aria-label attr from HTML to JS.Jan 25 2023, 3:54 AM

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.21; 2023-01-30); removed MW-1.40-notes (1.40.0-wmf.17; 2023-01-02).Jan 25 2023, 4:00 AM

Maintenance_bot removed a project: Patch-For-Review.Jan 25 2023, 4:30 AM

Samwilson moved this task from Review/Feedback 💬 to QA 🐛 on the Community-Tech (CommTech-Sprint-40) board.Jan 25 2023, 4:41 AM

@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)

GMikesell-WMF moved this task from QA 🐛 to Done 🏁 on the Community-Tech (CommTech-Sprint-40) board.Jan 25 2023, 10:02 PM

• NRodriguez closed this task as Resolved.Feb 13 2023, 8:02 PM

Test wiki on Patch demo by GMikesell-WMF using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/00b9996912/w/~~