Tabs: label icon-only tabs after their icon, as Button does (#5077) - #35122
Conversation
There was a problem hiding this comment.
🟡 Changes recommended
Tabs sets aria-label for icon-only items but does not clear it when an item later gains text/html (stale aria-label on reused elements, especially with repaintChangesOnly).
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR improves accessibility for Tabs and TabPanel by ensuring icon-only tabs get an accessible name (aria-label) derived from the icon, aligned with the existing Button behavior. It also centralizes the icon-to-label derivation logic in a shared utility and extends automated coverage across unit, markup, and e2e accessibility tests.
Changes:
- Added
getImageAriaLabel()utility and refactored Button/Tabs/TabPanel to derive aria-labels from icon sources consistently. - Added QUnit markup tests covering aria-label behavior for Tabs and TabPanel (including live updates and DataSource push).
- Updated TestCafe accessibility fixtures and removed the demo rule ignore now that tabs have accessible names.
File summaries
| File | Description |
|---|---|
| packages/devextreme/testing/tests/DevExpress.ui.widgets/tabs.markup.tests.js | Adds QUnit coverage for aria-label behavior on icon-only tabs, including updates and DataSource push. |
| packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.markup.tests.js | Adds QUnit coverage for aria-label behavior on TabPanel’s header tabs. |
| packages/devextreme/testing/tests/DevExpress.core/utils.icon.tests.js | Adds unit tests for the new getImageAriaLabel() icon-label derivation utility, including localization. |
| packages/devextreme/js/__internal/ui/tabs/tabs.ts | Introduces internal _itemAriaLabelExpr and applies aria-label postprocessing for rendered items. |
| packages/devextreme/js/__internal/ui/tab_panel/tab_panel.ts | Passes _itemAriaLabelExpr into the header Tabs so icon-only tabs get aria-labels. |
| packages/devextreme/js/__internal/ui/button/button.tsx | Replaces inline icon-label derivation logic with getImageAriaLabel(). |
| packages/devextreme/js/__internal/core/utils/m_icon.ts | Adds getImageAriaLabel() implementation shared across components. |
| e2e/testcafe-devextreme/tests/accessibility/tabs.ts | Updates accessibility test data to include icon-only/badge tabs. |
| e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts | Updates accessibility test data to include icon-only/badge tabs in TabPanel. |
| apps/demos/testing/common.test.ts | Removes the Tabs demo’s ignored aria-tab-name rule since tabs now have accessible names. |
Review details
- Files reviewed: 10/10 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
…rule remove aria-label too (DevExpress#5077)
There was a problem hiding this comment.
🟢 Approval recommended
The accessibility behavior is implemented via a shared utility and is covered by new/updated unit, markup, and e2e accessibility tests for both Tabs and TabPanel.
Review details
- Files reviewed: 10/10 changed files
- Comments generated: 0 new
- Review effort level: Lite
No description provided.