diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js index 9e5c4afd1a4204..e04e83aebb3661 100644 --- a/packages/dom/src/tabbable.js +++ b/packages/dom/src/tabbable.js @@ -50,7 +50,7 @@ function createStatefulCollapseRadioGroup() { const { nodeName, type, checked, name } = element; // For all non-radio tabbables, construct to array by concatenating. - if ( nodeName !== 'INPUT' || type !== 'radio' ) { + if ( nodeName !== 'INPUT' || type !== 'radio' || ! name ) { return result.concat( element ); } diff --git a/packages/dom/src/test/tabbable.js b/packages/dom/src/test/tabbable.js index 4f0955777be248..e262fccd86d65e 100644 --- a/packages/dom/src/test/tabbable.js +++ b/packages/dom/src/test/tabbable.js @@ -104,5 +104,29 @@ describe( 'tabbable', () => { thirdRadio, ] ); } ); + + it( 'not consolidate unnamed radio inputs', () => { + const node = createElement( 'div' ); + const firstRadio = createElement( 'input' ); + firstRadio.type = 'radio'; + firstRadio.value = 'firstRadio'; + const text = createElement( 'input' ); + text.type = 'text'; + text.name = 'b'; + const secondRadio = createElement( 'input' ); + secondRadio.type = 'radio'; + secondRadio.value = 'secondRadio'; + node.appendChild( firstRadio ); + node.appendChild( text ); + node.appendChild( secondRadio ); + + const tabbables = find( node ); + + expect( tabbables ).toEqual( [ + firstRadio, + text, + secondRadio, + ] ); + } ); } ); } );