Page MenuHomePhabricator

SX: Set aria-label to icon-only Codex buttons
Closed, ResolvedPublic

Description

Icon-only Codex buttons require one of the aria-label and aria-hidden attributes to be set, otherwise it throws a warning in the console.

This is important for accessibility and should be fixed for the following buttons:

  • SXPublisherHeader: close button
  • SXPublisherHeader: check button
  • CXTranslationWorkPublished: ellipsis button
  • SXArticleSearch: close button
  • SXPublishOptionSelector: arrow-previous button
  • SXPublisher: settings button
  • SXPublisher: edit button
  • SXPublisherCaptchaDialog: close button
  • SXPublisherReviewInfo: previous button
  • SXPublisherReviewInfo: next button
  • BlockTemplateAdaptationCard: info button
  • ProposedTranslationActionButtons: previous button
  • ProposedTranslationHeader: ellipsis button
  • SXSentenceSelector: arrow-previous button
  • TranslatedSegmentCardActionButtons: previous button
  • TranslatedSegmentCardActionButtons: next button
  • SXTranslationConfirmerArticleInformation: bookmark button
  • SXSectionSelectorSectionList select button

Acceptance criteria

No aria label accessibility warning in developer console when using Section Translation.

Derived Requirements

  1. Requirement 1: Ensure Icon-Only Buttons Have Proper Accessibility Attributes All Codex icon-only buttons in the Section Translation app must have either an aria-label or aria-hidden attribute to meet accessibility standards and prevent Vue warnings.
  1. Requirement 2: Remove Accessibility Warnings from the Console During Navigation Navigate through the entire Section Translation app, ensuring no accessibility warnings related to icon-only buttons appear in the console.
Test Steps

Test Case 1: Validate Accessibility Attributes and Ensure No Warnings in the Section Translation App

  1. Open the Section Translation app in a browser.
  2. Navigate through all pages and components in the app.
  3. Monitor the console for any warnings related to Codex icon-only buttons, specifically missing aria-label or aria-hidden attributes.
  4. Verify that all icon-only buttons have either an aria-label or aria-hidden attribute.
  5. ✅❓❌⬜ AC1: Confirm that icon-only buttons are properly accessible and that no related warnings appear in the console.

QA Results - Test Mobile ContentTranslation

ACStatusDetails
1T374567#10359333

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
mediawiki/extensions/ContentTranslationwmf/1.44.0-wmf.3+5 K -5 K
mediawiki/extensions/ContentTranslationmaster+5 K -5 K
mediawiki/extensions/ContentTranslationmaster+20 -0
mediawiki/extensions/ContentTranslationmaster+7 K -7 K
mediawiki/extensions/ContentTranslationmaster+8 -0
mediawiki/extensions/ContentTranslationmaster+11 -1
mediawiki/extensions/ContentTranslationmaster+12 -1
mediawiki/extensions/ContentTranslationmaster+12 -2
mediawiki/extensions/ContentTranslationmaster+6 -0
mediawiki/extensions/ContentTranslationmaster+16 -2
mediawiki/extensions/ContentTranslationmaster+13 -1
mediawiki/extensions/ContentTranslationmaster+7 -0
mediawiki/extensions/ContentTranslationmaster+10 -1
mediawiki/extensions/ContentTranslationwmf/1.43.0-wmf.24+7 K -7 K
mediawiki/extensions/ContentTranslationmaster+7 K -7 K
mediawiki/extensions/ContentTranslationmaster+7 K -7 K
mediawiki/extensions/ContentTranslationmaster+7 -0
mediawiki/extensions/ContentTranslationmaster+11 -1
mediawiki/extensions/ContentTranslationmaster+7 -0
mediawiki/extensions/ContentTranslationmaster+3 K -3 K
mediawiki/extensions/ContentTranslationmaster+8 -0
Show related patches Customize query in gerrit

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change #1075231 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20240923

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

Change #1075030 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20240923

Reason:

Abandoned in favor of Iac0466a3d2bd906a33c1c6052a92b3be98f5b028

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

Change #1075231 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20240925

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

Change #1075567 had a related patch set uploaded (by Sbisson; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@wmf/1.43.0-wmf.24] CX3 Build 0.2.0+20240925

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

Change #1075567 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.43.0-wmf.24] CX3 Build 0.2.0+20240925

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

Mentioned in SAL (#wikimedia-operations) [2024-09-25T14:22:59Z] <kartik@deploy1003> Finished scap sync-world: Backport for [[gerrit:1075567|CX3 Build 0.2.0+20240925 (T374387 T370746 T368422 T374567 T355780 T374559 T374886 T375410)]] (duration: 14m 06s)

Change #1087522 had a related patch set uploaded (by Sbisson; author: Sbisson):

[mediawiki/extensions/ContentTranslation@master] arial-label for article-search close button

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

Change #1087522 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] arial-label for article-search close button

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

Change #1087583 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for bookmark icon

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

Change #1087603 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublisherHeader

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

Change #1087608 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublisher

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

Change #1087583 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for bookmark icon

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

Change #1087955 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublishOptionSelector

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

Change #1087957 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublisherCaptchaDialog

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

Change #1087960 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label for SXPublisherReviewInfo

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

Change #1087603 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublisherHeader

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

Change #1087608 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublisher

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

Change #1087957 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublisherCaptchaDialog

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

Change #1087955 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXPublishOptionSelector

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

Change #1087960 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label for SXPublisherReviewInfo

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

Change #1088395 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for BlockTemplateAdaptation

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

Change #1088398 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for TranslatedSegmentCardActionButtons

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

Change #1088395 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for BlockTemplateAdaptation

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

Change #1088398 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for TranslatedSegmentCardActionButtons

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

SBisson moved this task from Needs Code Review to In-progress on the LPL Hypothesis board.

Last one: SXSectionSelectorSectionList

Change #1089833 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241111

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

Change #1089833 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241111

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

Change #1090534 had a related patch set uploaded (by Eamedina; author: Eamedina):

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXSectionSelectorList

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

Change #1090534 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Fix aria-label warning for SXSectionSelectorSectionList

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

Change #1090944 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241113

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

Change #1090944 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241113

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

Change #1091007 had a related patch set uploaded (by KartikMistry; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] CX3 Build 0.2.0+20241113

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

Change #1091007 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] CX3 Build 0.2.0+20241113

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

Mentioned in SAL (#wikimedia-operations) [2024-11-14T08:56:05Z] <kartik@deploy2002> Started scap sync-world: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]]

Mentioned in SAL (#wikimedia-operations) [2024-11-14T09:00:09Z] <kartik@deploy2002> kartik: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-11-14T09:25:45Z] <kartik@deploy2002> Finished scap sync-world: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]] (duration: 29m 40s)

@eamedina Do you have any links for these buttons or what is the best way to QA this? Thanks!

Hey @GMikesell-WMF the spread of the components that were displaying the warning is broad, I think an appropriate QA for this task is simply to go through the entire navigation flow of Section Translation app and make sure the warning does not appear on console. Also the warning shouldn't appear on unit tests either. For reference, I'm pasting below an example of what the warning looks like (big yellow block on console), this is what you should not be seeing on console.

CXSuggestionListFilters.vue:37 [Vue warn]: CdxButton: Icon-only buttons require one of the following attributes: aria-label or aria-hidden. See documentation at https://doc.wikimedia.org/codex/latest/components/demos/button.html#icon-only-button 
  at <CdxButton class="pa-0 ms-4" weight="quiet" onClick=fn<closeDialog> > 
  at <MwCol shrink="" align="start" class="pe-4" > 
  at <MwRow class="sx-suggestions-filters__header ma-0 py-3" align="stretch" justify="start" > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="mw-ui-animation-slide-up" style= 
{--dialog-min-height: '200px'}
 > 
  at <MwDialog value=true animation="slide-up" fullscreen=true  ... > 
  at <SXSuggestionsFiltersDialog modelValue=true onUpdate:modelValue=fn > 
  at <CXSuggestionListFilters> 
  at <MwCard class="cx-translation-list--suggestions pa-0 mb-0" > 
  at <CXSuggestionList active=true > 
  at <MwCol class="cx-dashboard__main-panel px-0" cols="12" tablet="9"  ... > 
  at <MwRow class="ma-0" align="start" > 
  at <CXDashboard class="mb-4 pb-12" > 
  at <DashboardView onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 
Proxy(Object) {…}
 > > 
  at <BaseTransition appear=false persisted=false mode=undefined  ... > 
  at <Transition name="mw-ui-animation-slide-end" > 
  at <RouterView> 
  at <MwCol cols="12" > 
  at <MwRow class="cx-container" > 
  at <MWGrid id="contenttranslation" > 
  at <App>

@eamedina For the actual task it passed as seen in the gifs. I noticed another unrelated issue at the end of the translating Page which I created a separate task in T380895. I also created another task for changing language refresh suggestions not working with T380914 I will move this to Sign-off. Thanks for all your work!

Test Result - Test Mobile ContentTranslation

Status: ✅ PASS
Environment: Test Mobile ContentTranslation
OS: macOS Sonoma 15.0
Browser: Chrome 131
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Validate Accessibility Attributes and Ensure No Warnings in the Section Translation App

  1. Open the Section Translation app in a browser.
  2. Navigate through all pages and components in the app.
  3. Monitor the console for any warnings related to Codex icon-only buttons, specifically missing aria-label or aria-hidden attributes.
  4. Verify that all icon-only buttons have either an aria-label or aria-hidden attribute.
  5. AC1: Confirm that icon-only buttons are properly accessible and that no related warnings appear in the console.
sectionpagebookmark/closenew translation
2024-11-22_14-48-32.mp4.gif (1×732 px, 3 MB)
2024-11-22_12-18-32.mp4.gif (1×732 px, 2 MB)
2024-11-22_12-51-18.mp4.gif (1×732 px, 2 MB)
2024-11-22_14-55-06.mp4.gif (1×730 px, 1 MB)