From 698bb4deb7c77010c040ac49630c26db94e6e28c Mon Sep 17 00:00:00 2001 From: Abdulwahab Omira <32625230+Abdul-Omira@users.noreply.github.com> Date: Fri, 22 Aug 2025 09:22:18 -0500 Subject: [PATCH] Add support for ARIA 1.3 attributes (#34264) Co-authored-by: Abdulwahab Omira Co-authored-by: Sebastian Sebbie Silbermann --- .../src/shared/validAriaProperties.js | 5 +++++ .../__tests__/ReactDOMInvalidARIAHook-test.js | 21 +++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/packages/react-dom-bindings/src/shared/validAriaProperties.js b/packages/react-dom-bindings/src/shared/validAriaProperties.js index fb72fea260..9421ba5a15 100644 --- a/packages/react-dom-bindings/src/shared/validAriaProperties.js +++ b/packages/react-dom-bindings/src/shared/validAriaProperties.js @@ -59,6 +59,11 @@ const ariaProperties = { 'aria-rowindex': 0, 'aria-rowspan': 0, 'aria-setsize': 0, + // ARIA 1.3 Attributes + 'aria-braillelabel': 0, + 'aria-brailleroledescription': 0, + 'aria-colindextext': 0, + 'aria-rowindextext': 0, }; export default ariaProperties; diff --git a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js index 725cedab1f..a5fd14e95c 100644 --- a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js @@ -37,6 +37,27 @@ describe('ReactDOMInvalidARIAHook', () => { it('should allow valid aria-* props', async () => { await mountComponent({'aria-label': 'Bumble bees'}); }); + + it('should allow new ARIA 1.3 attributes', async () => { + // Test aria-braillelabel + await mountComponent({'aria-braillelabel': 'Braille label text'}); + + // Test aria-brailleroledescription + await mountComponent({'aria-brailleroledescription': 'Navigation menu'}); + + // Test aria-colindextext + await mountComponent({'aria-colindextext': 'Column A'}); + + // Test aria-rowindextext + await mountComponent({'aria-rowindextext': 'Row 1'}); + + // Test multiple ARIA 1.3 attributes together + await mountComponent({ + 'aria-braillelabel': 'Braille text', + 'aria-colindextext': 'First column', + 'aria-rowindextext': 'First row', + }); + }); it('should warn for one invalid aria-* prop', async () => { await mountComponent({'aria-badprop': 'maybe'}); assertConsoleErrorDev([