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 Oct 23, 2021
1 parent d0f857a commit 1e91c55
Showing 1 changed file with 10 additions and 2 deletions.
Original file line number Diff line number Diff line change
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 1e91c55

Please sign in to comment.