Add descriptive accessibility labels to Select all checkboxes#89816
Merged
Conversation
The Select all checkbox in ListHeader was announced generically as "Select all items" by screen readers. Add a selectAllAccessibilityLabel prop to SelectionList/ListHeader and pass context-specific labels (e.g. "Select all categories", "Select all members") from each page that uses multi-select, improving WCAG 2.4.6 compliance. Co-authored-by: Rushat Gabhane <rushatgabhane@users.noreply.github.com>
Contributor
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index 66717a44..c258c50d 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -8116,10 +8116,10 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
selectAllTransactions: 'Alle Transaktionen auswählen',
selectAllItems: 'Alle Einträge auswählen',
selectAllCategories: 'Alle Kategorien auswählen',
- selectAllDistanceRates: 'Alle Entfernungstarife auswählen',
+ selectAllDistanceRates: 'Alle Entfernungssätze auswählen',
selectAllTags: 'Alle Tags auswählen',
selectAllTaxes: 'Alle Steuern auswählen',
- selectAllPerDiemRates: 'Alle Tagessätze auswählen',
+ selectAllPerDiemRates: 'Alle Pauschalspesen-Sätze auswählen',
selectAllMembers: 'Alle Mitglieder auswählen',
selectAllValues: 'Alle Werte auswählen',
selectAllRules: 'Alle Regeln auswählen',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 2d655ac9..8ee35105 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -8138,10 +8138,10 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
selectAllTransactions: 'Sélectionner toutes les transactions',
selectAllItems: 'Sélectionner tous les éléments',
selectAllCategories: 'Sélectionner toutes les catégories',
- selectAllDistanceRates: 'Sélectionner tous les tarifs de distance',
+ selectAllDistanceRates: 'Sélectionner tous les taux de distance',
selectAllTags: 'Sélectionner toutes les étiquettes',
selectAllTaxes: 'Sélectionner toutes les taxes',
- selectAllPerDiemRates: 'Sélectionner tous les tarifs de per diem',
+ selectAllPerDiemRates: 'Sélectionner tous les taux de per diem',
selectAllMembers: 'Sélectionner tous les membres',
selectAllValues: 'Sélectionner toutes les valeurs',
selectAllRules: 'Sélectionner toutes les règles',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index b9ba00a4..b3904d29 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -8107,10 +8107,10 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
selectAllTransactions: 'Seleziona tutte le transazioni',
selectAllItems: 'Seleziona tutti gli elementi',
selectAllCategories: 'Seleziona tutte le categorie',
- selectAllDistanceRates: 'Seleziona tutte le tariffe per distanza',
- selectAllTags: 'Seleziona tutte le etichette',
- selectAllTaxes: 'Seleziona tutte le tasse',
- selectAllPerDiemRates: 'Seleziona tutte le tariffe diarie',
+ selectAllDistanceRates: 'Seleziona tutte le tariffe chilometriche',
+ selectAllTags: 'Seleziona tutti i tag',
+ selectAllTaxes: 'Seleziona tutte le imposte',
+ selectAllPerDiemRates: 'Seleziona tutte le tariffe giornaliere',
selectAllMembers: 'Seleziona tutti i membri',
selectAllValues: 'Seleziona tutti i valori',
selectAllRules: 'Seleziona tutte le regole',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index 0e7fe81d..a8ec433d 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -8007,11 +8007,11 @@ ${reportName}
selectAllFeatures: 'すべての機能を選択',
selectAllTransactions: 'すべての取引を選択',
selectAllItems: 'すべての項目を選択',
- selectAllCategories: 'すべてのカテゴリーを選択',
- selectAllDistanceRates: 'すべての距離料金を選択',
+ selectAllCategories: 'すべてのカテゴリを選択',
+ selectAllDistanceRates: 'すべての距離レートを選択',
selectAllTags: 'すべてのタグを選択',
- selectAllTaxes: 'すべての税金を選択',
- selectAllPerDiemRates: 'すべての日当料金を選択',
+ selectAllTaxes: 'すべての税を選択',
+ selectAllPerDiemRates: 'すべての日当レートを選択',
selectAllMembers: 'すべてのメンバーを選択',
selectAllValues: 'すべての値を選択',
selectAllRules: 'すべてのルールを選択',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index 950f5425..a6313d31 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -8079,14 +8079,14 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
selectAllFeatures: 'Selecteer alle functies',
selectAllTransactions: 'Selecteer alle transacties',
selectAllItems: 'Alle items selecteren',
- selectAllCategories: 'Alle categorieën selecteren',
- selectAllDistanceRates: 'Alle afstandstarieven selecteren',
+ selectAllCategories: 'Selecteer alle categorieën',
+ selectAllDistanceRates: 'Selecteer alle afstandstarieven',
selectAllTags: 'Alle tags selecteren',
- selectAllTaxes: 'Alle belastingen selecteren',
- selectAllPerDiemRates: 'Alle dagvergoedingen selecteren',
+ selectAllTaxes: 'Selecteer alle belastingen',
+ selectAllPerDiemRates: 'Selecteer alle dagvergoedingen',
selectAllMembers: 'Alle leden selecteren',
- selectAllValues: 'Alle waarden selecteren',
- selectAllRules: 'Alle regels selecteren',
+ selectAllValues: 'Selecteer alle waarden',
+ selectAllRules: 'Selecteer alle regels',
},
parentReportAction: {
deletedReport: 'Verwijderd rapport',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index a491730e..de0432b2 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -8070,10 +8070,10 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
selectAllTransactions: 'Zaznacz wszystkie transakcje',
selectAllItems: 'Zaznacz wszystkie elementy',
selectAllCategories: 'Zaznacz wszystkie kategorie',
- selectAllDistanceRates: 'Zaznacz wszystkie stawki dystansowe',
+ selectAllDistanceRates: 'Wybierz wszystkie stawki za dystans',
selectAllTags: 'Zaznacz wszystkie tagi',
- selectAllTaxes: 'Zaznacz wszystkie podatki',
- selectAllPerDiemRates: 'Zaznacz wszystkie stawki dzienne',
+ selectAllTaxes: 'Wybierz wszystkie podatki',
+ selectAllPerDiemRates: 'Wybierz wszystkie stawki diet',
selectAllMembers: 'Zaznacz wszystkich członków',
selectAllValues: 'Zaznacz wszystkie wartości',
selectAllRules: 'Zaznacz wszystkie reguły',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index 1fbf0f82..bf97fcd5 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -8073,8 +8073,8 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
selectAllTransactions: 'Selecionar todas as transações',
selectAllItems: 'Selecionar todos os itens',
selectAllCategories: 'Selecionar todas as categorias',
- selectAllDistanceRates: 'Selecionar todas as taxas de distância',
- selectAllTags: 'Selecionar todas as etiquetas',
+ selectAllDistanceRates: 'Selecionar todas as tarifas de distância',
+ selectAllTags: 'Selecionar todas as tags',
selectAllTaxes: 'Selecionar todos os impostos',
selectAllPerDiemRates: 'Selecionar todas as diárias',
selectAllMembers: 'Selecionar todos os membros',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index d338d9c9..7816b3af 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -7872,14 +7872,14 @@ ${reportName}
selectAllFeatures: '选择所有功能',
selectAllTransactions: '选择所有交易',
selectAllItems: '全选所有项目',
- selectAllCategories: '全选所有类别',
- selectAllDistanceRates: '全选所有距离费率',
- selectAllTags: '全选所有标签',
+ selectAllCategories: '选择所有类别',
+ selectAllDistanceRates: '选择所有距离费率',
+ selectAllTags: '选择所有标签',
selectAllTaxes: '全选所有税种',
- selectAllPerDiemRates: '全选所有日津贴费率',
+ selectAllPerDiemRates: '选择所有每日津贴费率',
selectAllMembers: '全选所有成员',
- selectAllValues: '全选所有值',
- selectAllRules: '全选所有规则',
+ selectAllValues: '选择所有值',
+ selectAllRules: '选择所有规则',
},
parentReportAction: {
deletedReport: '已删除的报告',
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
Contributor
Author
|
The failing check ( Failing test: Why it's unrelated: This PR only modifies accessibility labels in This appears to be a pre-existing flaky test. Re-running the failed job should resolve it. |
Contributor
Reviewer Checklist
Screenshots/VideosMacOS: Chrome / Safari
|
Contributor
@MelvinBot, add those testing steps to the PR Author Checklist and check off every checkbox |
Contributor
|
@MelvinBot, pull the latest main |
Contributor
Author
|
Done! I've updated the PR body:
|
Contributor
Author
|
I can only make code changes when directed by the PR author, an assignee, or an existing co-author. To have me merge main into this branch, the PR assignee ( |
Contributor
|
@MelvinBot, testing steps in the checklist should be a numbered list instead of checkboxes
|
Contributor
Author
|
Updated the Tests and QA Steps sections — testing steps are now a numbered list instead of checkboxes. |
Member
|
@MelvinBot mark ready please |
Contributor
Author
|
Done — PR is now marked as ready for review. |
melvin-bot
Bot
requested review from
daledah and
trjExpensify
and removed request for
a team and
trjExpensify
melvin-bot
Bot
requested review from
a team,
madmax330 and
trjExpensify
and removed request for
a team
|
@madmax330 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Contributor
|
Did we approve the Spanish in Slack / take what the parrot said for the other languages? |
Member
|
@MelvinBot please apply #89816 (comment) |
Contributor
Author
|
No — the Polyglot Parrot translation changes from that comment have not been applied. The PR currently has only one commit and no translation file changes in the diff. To apply them, copy the diff from the comment and run |
Member
|
@MelvinBot please use the parrot translations |
Member
|
@MelvinBot merge main |
Co-authored-by: Rushat Gabhane <rushatgabhane@users.noreply.github.com>
Contributor
Author
|
Applied the Polyglot Parrot translations (de, fr, it, ja, nl, pl, pt-BR, zh-hans). |
|
@chiragsalian Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
…sibilityLabels Co-authored-by: Rushat Gabhane <rushatgabhane@users.noreply.github.com>
Contributor
Author
|
Merged main into this branch. |
Contributor
Author
|
The failing check was Reassure Performance Tests from the previous run — specifically a render count regression in This is unrelated to this PR. The PR only adds A new CI run is already in progress. This appears to be a flaky perf test — no code fix is needed. |
trjExpensify
approved these changes
May 12, 2026
Contributor
trjExpensify
left a comment
trjExpensify
left a comment
There was a problem hiding this comment.
Accessibility project PR. 👍
Contributor
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Contributor
|
🚧 @chiragsalian has triggered a test Expensify/App build. You can view the workflow run here. |
Contributor
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
82 tasks
Contributor
|
🚀 Deployed to staging by https://github.com/chiragsalian in version: 9.3.73-0 🚀
Bundle Size Analysis (Sentry): |
Contributor
Author
|
I reviewed the changes in this PR. It adds descriptive accessibility labels to "Select all" checkboxes across workspace pages (Categories, Tags, Taxes, Members, Distance Rates, Per Diem, Report Fields, Expense Rules) for WCAG 2.4.6 compliance. No help site changes are required. These are purely internal accessibility improvements — they only affect what screen readers announce for existing checkboxes. No user-facing features, workflows, settings, or behaviors are changed. |
Contributor
|
🚀 Deployed to staging by https://github.com/chiragsalian in version: 9.3.73-0 🚀
Bundle Size Analysis (Sentry): |
Contributor
|
🚀 Deployed to production by https://github.com/Beamanator in version: 9.3.73-4 🚀
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Explanation of Change
The "Select all" checkbox in
ListHeaderwas announced generically by screen readers as "Select all items" without context about what is being selected. This is a WCAG 2.4.6 violation because users cannot determine what the checkbox action applies to.PR #80464 fixed this for the Duplicate Workspace > Select Features screen, but the other occurrences listed in the issue (Categories, Distance Rates, Tags, Taxes, Per Diem, Members, etc.) were not addressed.
This PR:
selectAllAccessibilityLabelprop toSelectionListandListHeadercomponents, allowing each page to provide a context-specific labelFixed Issues
$ #76961
Tests
Offline tests
N/A — accessibility labels are static strings that do not depend on network state.
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari