From b958ae2f87e6f4c63b98915a288bc3666453ae79 Mon Sep 17 00:00:00 2001 From: Haz Date: Mon, 20 Jul 2020 06:49:30 -0300 Subject: [PATCH] Components: Fix Toolbar arrow key navigation in RTL contexts (#24043) --- packages/components/src/toolbar/toolbar-container.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/src/toolbar/toolbar-container.js b/packages/components/src/toolbar/toolbar-container.js index 2ea7cfc7fee8c..5141e6fe69f95 100644 --- a/packages/components/src/toolbar/toolbar-container.js +++ b/packages/components/src/toolbar/toolbar-container.js @@ -12,12 +12,17 @@ import { forwardRef } from '@wordpress/element'; * Internal dependencies */ import ToolbarContext from '../toolbar-context'; +import { getRTL } from '../utils/rtl'; function ToolbarContainer( { accessibilityLabel, ...props }, ref ) { // https://reakit.io/docs/basic-concepts/#state-hooks // Passing baseId for server side rendering (which includes snapshots) // If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids - const toolbarState = useToolbarState( { loop: true, baseId: props.id } ); + const toolbarState = useToolbarState( { + loop: true, + baseId: props.id, + rtl: getRTL(), + } ); return ( // This will provide state for `ToolbarButton`'s