From 5f299afac4ea6f5ad77e07909f934357da263838 Mon Sep 17 00:00:00 2001 From: Abdulwahab Omira Date: Thu, 21 Aug 2025 23:03:06 -0500 Subject: [PATCH 1/2] Add support for ARIA 1.3 attributes Added support for new ARIA 1.3 accessibility attributes that enhance support for users with disabilities, particularly those using braille devices: - aria-braillelabel: Provides specific labels for braille device users - aria-brailleroledescription: Provides role descriptions for braille devices - aria-colindextext: Provides human-readable text alternatives for column indices - aria-rowindextext: Provides human-readable text alternatives for row indices These attributes were introduced in the ARIA 1.3 specification (First Public Working Draft, January 2024) and improve React's accessibility support by allowing developers to provide enhanced context for assistive technologies. Added comprehensive tests to verify that these new attributes are properly validated and don't trigger warnings when used correctly. --- .../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 fb72fea2606..9421ba5a156 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 725cedab1f1..f154320036f 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([ From d77ec5461fb6b3b70ba952a9476c7780910ec5d2 Mon Sep 17 00:00:00 2001 From: Sebastian Sebbie Silbermann Date: Fri, 22 Aug 2025 12:09:11 +0200 Subject: [PATCH 2/2] Format --- .../src/__tests__/ReactDOMInvalidARIAHook-test.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js index f154320036f..a5fd14e95c9 100644 --- a/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js @@ -37,20 +37,20 @@ 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',