Skip to content

Commit

Permalink
Adding key event handlers for space and enter. This is to persist but…
Browse files Browse the repository at this point in the history
…ton element behaviour, even though we're switching to an anchor element.

Forcing a tabIndex of `0` so the anchor elements are tabbable.
  • Loading branch information
ramonjd committed Nov 17, 2021
1 parent e9d17d7 commit 4099726
Showing 1 changed file with 10 additions and 2 deletions.
Expand Up @@ -19,6 +19,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
import { getBlockPositionDescription } from './utils';
import BlockTitle from '../block-title';
import ListViewExpander from './expander';
import { SPACE, ENTER } from '@wordpress/keycodes';

function ListViewBlockSelectButton(
{
Expand All @@ -30,7 +31,6 @@ function ListViewBlockSelectButton(
position,
siblingBlockCount,
level,
tabIndex,
onFocus,
onDragStart,
onDragEnd,
Expand All @@ -56,6 +56,13 @@ function ListViewBlockSelectButton(
onDragStart( event );
};

function onKeyDownHandler( event ) {
if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
event.preventDefault();
onClick( event );
}
}

return (
<>
<Button
Expand All @@ -64,9 +71,10 @@ function ListViewBlockSelectButton(
className
) }
onClick={ onClick }
onKeyDown={ onKeyDownHandler }
aria-describedby={ descriptionId }
ref={ ref }
tabIndex={ tabIndex }
tabIndex="0"
onFocus={ onFocus }
onDragStart={ onDragStartHandler }
onDragEnd={ onDragEnd }
Expand Down

0 comments on commit 4099726

Please sign in to comment.