[Vue warn]: (deprecation ATTR_FALSE_VALUE) Attribute "aria-hidden" with v-bind value `false` will render aria-hidden="false" instead of removing it in Vue 3
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	kostajh
	Jan 19 2023, 12:15 PM

Description

On Special:Homepage (provided by GrowthExperiments), when $wgVueDevelopmentMode = true, we get this console warning (T323252#8534539):

[Vue warn]: (deprecation ATTR_FALSE_VALUE) Attribute "aria-hidden" with v-bind value `false` will render aria-hidden="false" instead of removing it in Vue 3. To remove the attribute, use `null` or `undefined` instead. If the usage is intended, you can disable the compat behavior and suppress this warning with:

  configureCompat({ ATTR_FALSE_VALUE: false })

  Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html 
  at <CdxIcon class="ext-growthExperiments-ScoreCard__data-display__icon" icon="<path d=\"m16.77 8 1.94-2a1 1 0 000-1.41l-3.34-3.3a1 1 0 00-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z\"/>" icon-label="Total edits" > 
  at <Anonymous icon="<path d=\"m16.77 8 1.94-2a1 1 0 000-1.41l-3.34-3.3a1 1 0 00-1.41 0L12 3.23zM1 14.25V19h4.75l9.96-9.96-4.75-4.75z\"/>" label="Total edits" icon-label="Total edits" >

Looking at the HTML, we can see:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" aria-hidden="false"...</svg>

AIUI, rather than aria-hidden="false", Vue 3 would like us to not use the attribute at all, so the HTML should look instead like:

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">...</svg>

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from v0.4.3 to v0.5.0	mediawiki/core	master	+1 K -1 K
	Icon: Don't add aria-hidden=false	design/codex	main	+8 -5

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	KStoller-WMF	T248330 [EPIC] Growth: Positive reinforcement
Resolved	KStoller-WMF	T222310 [EPIC] Positive reinforcement: New Impact Module
Resolved	kostajh	T323252 NewImpact module: Fix Vue warnings
Resolved	kostajh	T327395 [Vue warn]: (deprecation ATTR_FALSE_VALUE) Attribute "aria-hidden" with v-bind value `false` will render aria-hidden="false" instead of removing it in Vue 3

Event Timeline

kostajh created this task.Jan 19 2023, 12:15 PM

Restricted Application added a project: Design-System-Team. · View Herald TranscriptJan 19 2023, 12:15 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

kostajh claimed this task.Jan 19 2023, 12:16 PM

Change 881581 had a related patch set uploaded (by Kosta Harlan; author: Kosta Harlan):

[design/codex@main] Icon: Don't add aria-hidden property when its value is false

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

gerritbot added a project: Patch-For-Review.Jan 19 2023, 12:18 PM

kostajh updated the task description. (Show Details)Jan 19 2023, 12:21 PM

kostajh mentioned this in T323252: NewImpact module: Fix Vue warnings.

kostajh added a parent task: T323252: NewImpact module: Fix Vue warnings.

Change 881581 merged by jenkins-bot:

[design/codex@main] Icon: Don't add aria-hidden=false

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

Maintenance_bot removed a project: Patch-For-Review.Jan 19 2023, 2:30 PM

@AnneT thanks for merging the patch! One thing I don't understand is why this error doesn't show up in Vite, with npm run dev. e.g. if I modify IconDemo.vue to contain <cdx-icon :icon="cdxIconArrowNext" icon-label="Foo" /> next, then the HTML for this element contains <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" aria-hidden="false"> but there are no warnings in the console.

@kostajh I believe those warnings are only available in the Vue 3 migration build, which is what's still running in MediaWiki. When you're actually running Vue 3, as we are in the Codex library itself, it must assume you know what you're doing :) We based the Codex icon on the WVUI one, which was written in Vue 2, so we must have just missed this detail.

In T327395#8541836, @AnneT wrote:

@kostajh I believe those warnings are only available in the Vue 3 migration build, which is what's still running in MediaWiki. When you're actually running Vue 3, as we are in the Codex library itself, it must assume you know what you're doing :) We based the Codex icon on the WVUI one, which was written in Vue 2, so we must have just missed this detail.

OK, thanks for explaining.

I'm resolving this task but feel free to re-open if more is needed here.

kostajh mentioned this in T327474: MenteeOverview: Fix Vue warnings.Jan 20 2023, 8:36 AM

kostajh mentioned this in T327476: Select component: Avoid setting aria-disabled and aria-expanded to false.Jan 20 2023, 8:44 AM

Change 869852 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

gerritbot added a project: Patch-For-Review.Jan 31 2023, 11:42 PM

Change 885450 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

Change 885450 merged by jenkins-bot: