From 478b58df08f7d30abc2fe37d482eac36e09b843e Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Wed, 26 Jan 2022 16:54:46 -0600 Subject: [PATCH 1/8] Revising drag and drop for accessible interactive and complex patterns. --- .../drag_and_drop/drag_and_drop_complex.js | 1 + .../drag_and_drop_custom_handle.js | 1 + .../drag_and_drop_disable_blocking.js | 30 +++++++++++++++---- src/components/drag_and_drop/_draggable.scss | 4 +++ src/components/drag_and_drop/draggable.tsx | 19 ++++++++++++ 5 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js index 4a4aa45b46d..1880b312a8d 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js @@ -77,6 +77,7 @@ export default () => { spacing="l" style={{ flex: '1 0 50%' }} disableInteractiveElementBlocking // Allows button to be drag handle + draggableContainer={true} > {(provided) => ( diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js index 927fee0ef72..57a32d33773 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js @@ -44,6 +44,7 @@ export default () => { index={idx} draggableId={id} customDragHandle={true} + draggableContainer={true} > {(provided) => ( diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js index 2c1068f4524..50e7f846c80 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js @@ -4,6 +4,10 @@ import { EuiDragDropContext, EuiDraggable, EuiDroppable, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiPanel, euiDragDropReorder, } from '../../../../src/components'; import { htmlIdGenerator } from '../../../../src/services'; @@ -30,10 +34,9 @@ export default () => { return ( {list.map(({ content, id }, idx) => ( { key={id} index={idx} draggableId={id} - disableInteractiveElementBlocking + customDragHandle={true} + draggableContainer={true} + interactiveElements={true} > - {}}> - {content} - + {(provided) => ( + + + +
+ +
+ + + {}}> + {content} + + + + + )} ))} diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss index 6f7481654c6..037affb5e01 100644 --- a/src/components/drag_and_drop/_draggable.scss +++ b/src/components/drag_and_drop/_draggable.scss @@ -16,6 +16,10 @@ transition-duration: .001s !important; // sass-lint:disable-line no-important } + &.euiDraggable--hasInteractiveElements .euiFlexItem:first-of-type { + margin-left: $euiSize; + } + &:focus > .euiDraggable__item, &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus { @include euiFocusRing; diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 6b9d60b3cbe..dc6d3b585f9 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -40,6 +40,14 @@ export interface EuiDraggableProps * Whether the `children` will provide and set up its own drag handle */ customDragHandle?: boolean; + /** + * Whether the container is draggable and should have role="group" instead of "button" + */ + draggableContainer?: boolean; + /** + * Whether the `children` will contain interactive elements + */ + interactiveElements?: boolean; /** * Whether the item is currently in a position to be removed */ @@ -54,7 +62,9 @@ export interface EuiDraggableProps export const EuiDraggable: FunctionComponent = ({ customDragHandle = false, draggableId, + interactiveElements = false, isDragDisabled = false, + draggableContainer = false, isRemovable = false, index, children, @@ -79,6 +89,7 @@ export const EuiDraggable: FunctionComponent = ({ { 'euiDraggable--hasClone': cloneItems, 'euiDraggable--hasCustomDragHandle': customDragHandle, + 'euiDraggable--hasInteractiveElements': interactiveElements, 'euiDraggable--isDragging': snapshot.isDragging, 'euiDraggable--withoutDropAnimation': isRemovable, }, @@ -104,6 +115,14 @@ export const EuiDraggable: FunctionComponent = ({ data-test-subj={dataTestSubj} className={classes} style={{ ...style, ...provided.draggableProps.style }} + role={ + draggableContainer ? 'group' : provided.dragHandleProps?.role + } + tabIndex={ + draggableContainer + ? undefined + : provided.dragHandleProps?.tabIndex + } > {cloneElement(DraggableElement, { className: classNames( From de4bae51519ec731cfc3f54d58e0fb7e9d5e078d Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Thu, 27 Jan 2022 09:58:16 -0600 Subject: [PATCH 2/8] Adding documentation and changelog entry for drag and drop patterns * Adding documentation for custom and interactive patterns props. * Adding changelog entry. --- CHANGELOG.md | 1 + .../drag_and_drop/drag_and_drop_example.js | 19 ++++++++++++------- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ca1ce825062..779f2f75c35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ **Bug fixes** - Fixed EuiDataGrid height issue when in full-screen mode and with scrolling content ([#5557](https://github.com/elastic/eui/pull/5557)) +- Fixed an accessibility issue in custom and interactive Drag and Drop patterns ([#5568](https://github.com/elastic/eui/pull/5568)) ## [`46.1.0`](https://github.com/elastic/eui/tree/v46.1.0) diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js index 9b6f2598690..909b02ea305 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js @@ -199,15 +199,18 @@ export const DragAndDropExample = {

By default the entire element surface can initiate a drag. To - specify a certain element within as the handle, set - customDragHandle=true on the{' '} + specify an element within as the handle and create a containing + group, set + customDragHandle=true and{' '} + draggableContainer=true on the{' '} EuiDraggable.

The provided parameter on the{' '} EuiDraggable children render prop has all data required for functionality. Along with the{' '} - customDragHandle flag, + customDragHandle and{' '} + draggableContainerflags, provided.dragHandleProps needs to be added to the intended handle element.

@@ -227,10 +230,12 @@ export const DragAndDropExample = {

EuiDraggable elements can contain interactive - elements such as buttons and form fields by adding the - disableInteractiveElementBlocking prop. This will - keep drag functionality while also enabling click, etc., events on - the interactive child elements. + elements such as buttons and form fields. Interactive elements + require customDragHandle=true and{' '} + draggableContainer=true on the{' '} + EuiDraggable. These props will maintain drag + functionality and accessibility, while enabling click, keypress, + etc., events on the interactive child elements.

), From 4d341a2b8f1f556680ea603e8b32c2eb5e47d2b3 Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Thu, 27 Jan 2022 15:42:49 -0600 Subject: [PATCH 3/8] Refactoring to remove demo-only CSS and prop. --- .../drag_and_drop_disable_blocking.js | 5 ++--- .../views/drag_and_drop/drag_and_drop_example.js | 14 +++++--------- src/components/drag_and_drop/_draggable.scss | 4 ---- src/components/drag_and_drop/draggable.tsx | 6 ------ 4 files changed, 7 insertions(+), 22 deletions(-) diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js index 50e7f846c80..decff9bdd3d 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js @@ -46,11 +46,10 @@ export default () => { draggableId={id} customDragHandle={true} draggableContainer={true} - interactiveElements={true} > {(provided) => ( - - + +
diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js index 909b02ea305..1f2a1cf45f6 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js @@ -200,17 +200,14 @@ export const DragAndDropExample = {

By default the entire element surface can initiate a drag. To specify an element within as the handle and create a containing - group, set - customDragHandle=true and{' '} - draggableContainer=true on the{' '} + group, set customDragHandle=true on the{' '} EuiDraggable.

The provided parameter on the{' '} EuiDraggable children render prop has all data required for functionality. Along with the{' '} - customDragHandle and{' '} - draggableContainerflags, + customDragHandle flag, provided.dragHandleProps needs to be added to the intended handle element.

@@ -229,10 +226,9 @@ export const DragAndDropExample = { text: (

- EuiDraggable elements can contain interactive - elements such as buttons and form fields. Interactive elements - require customDragHandle=true and{' '} - draggableContainer=true on the{' '} + EuiDraggable can contain interactive elements such + as buttons and form fields. Interactive elements require{' '} + customDragHandle=true on the{' '} EuiDraggable. These props will maintain drag functionality and accessibility, while enabling click, keypress, etc., events on the interactive child elements. diff --git a/src/components/drag_and_drop/_draggable.scss b/src/components/drag_and_drop/_draggable.scss index 037affb5e01..6f7481654c6 100644 --- a/src/components/drag_and_drop/_draggable.scss +++ b/src/components/drag_and_drop/_draggable.scss @@ -16,10 +16,6 @@ transition-duration: .001s !important; // sass-lint:disable-line no-important } - &.euiDraggable--hasInteractiveElements .euiFlexItem:first-of-type { - margin-left: $euiSize; - } - &:focus > .euiDraggable__item, &.euiDraggable--hasCustomDragHandle > .euiDraggable__item [data-react-beautiful-dnd-drag-handle]:focus { @include euiFocusRing; diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index dc6d3b585f9..c7ba13b5d5a 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -44,10 +44,6 @@ export interface EuiDraggableProps * Whether the container is draggable and should have role="group" instead of "button" */ draggableContainer?: boolean; - /** - * Whether the `children` will contain interactive elements - */ - interactiveElements?: boolean; /** * Whether the item is currently in a position to be removed */ @@ -62,7 +58,6 @@ export interface EuiDraggableProps export const EuiDraggable: FunctionComponent = ({ customDragHandle = false, draggableId, - interactiveElements = false, isDragDisabled = false, draggableContainer = false, isRemovable = false, @@ -89,7 +84,6 @@ export const EuiDraggable: FunctionComponent = ({ { 'euiDraggable--hasClone': cloneItems, 'euiDraggable--hasCustomDragHandle': customDragHandle, - 'euiDraggable--hasInteractiveElements': interactiveElements, 'euiDraggable--isDragging': snapshot.isDragging, 'euiDraggable--withoutDropAnimation': isRemovable, }, From a61a35899d5ca093001ea30d4cc57e9534c48bb0 Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Thu, 27 Jan 2022 16:37:53 -0600 Subject: [PATCH 4/8] Adding snapshot test and better comment for a new prop. --- .../__snapshots__/draggable.test.tsx.snap | 34 +++++++++++++++++++ .../drag_and_drop/draggable.test.tsx | 20 +++++++++++ src/components/drag_and_drop/draggable.tsx | 3 +- 3 files changed, 56 insertions(+), 1 deletion(-) diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index 660c4ce2894..5e7303f8304 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -1,5 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`EuiDraggable can be a draggable container with role group 1`] = ` +

+
+
+
+ Hello +
+
+
+
+
+`; + +exports[`EuiDraggable can be a draggable container with role group 2`] = `undefined`; + exports[`EuiDraggable can be given ReactElement children 1`] = `
{ expect(takeSnapshot(appDiv)).toMatchSnapshot(); }); + + test('can be a draggable container with role group', () => { + const handler = jest.fn(); + ReactDOM.render( + + + +
Hello
+ + + , + appDiv + ); + + expect(takeSnapshot(appDiv)).toMatchSnapshot(); + }); }); diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index c7ba13b5d5a..a7a24a247dc 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -41,7 +41,8 @@ export interface EuiDraggableProps */ customDragHandle?: boolean; /** - * Whether the container is draggable and should have role="group" instead of "button" + * Whether the container is draggable and should have `role="group"` instead of `"button"`. + * Setting this flag ensures your drag & drop container is keyboard & screen reader accessible. */ draggableContainer?: boolean; /** From 27c1d547dfae10449547be3e5d5fdad6885a3e5f Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Fri, 28 Jan 2022 08:19:07 -0600 Subject: [PATCH 5/8] Small updates to add comments, clearer prop name. --- .../views/drag_and_drop/drag_and_drop_complex.js | 2 +- .../drag_and_drop/drag_and_drop_custom_handle.js | 2 +- .../drag_and_drop_disable_blocking.js | 6 +++--- .../views/drag_and_drop/drag_and_drop_example.js | 6 ++++-- .../__snapshots__/draggable.test.tsx.snap | 14 +++++++------- src/components/drag_and_drop/draggable.test.tsx | 4 ++-- src/components/drag_and_drop/draggable.tsx | 14 ++++++++++---- 7 files changed, 28 insertions(+), 20 deletions(-) diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js index 1880b312a8d..28ab7313279 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js @@ -77,7 +77,7 @@ export default () => { spacing="l" style={{ flex: '1 0 50%' }} disableInteractiveElementBlocking // Allows button to be drag handle - draggableContainer={true} + hasInteractiveChildren={true} > {(provided) => ( diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js index 57a32d33773..299146cb7dc 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js @@ -44,7 +44,7 @@ export default () => { index={idx} draggableId={id} customDragHandle={true} - draggableContainer={true} + hasInteractiveChildren={true} > {(provided) => ( diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js index decff9bdd3d..2f048193da6 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js @@ -45,11 +45,11 @@ export default () => { index={idx} draggableId={id} customDragHandle={true} - draggableContainer={true} + hasInteractiveChildren={true} > {(provided) => ( - - + +
diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js index 1f2a1cf45f6..f809062468b 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js @@ -200,7 +200,8 @@ export const DragAndDropExample = {

By default the entire element surface can initiate a drag. To specify an element within as the handle and create a containing - group, set customDragHandle=true on the{' '} + group, set customDragHandle=true and{' '} + hasInteractiveChildren=true on the EuiDraggable.

@@ -228,7 +229,8 @@ export const DragAndDropExample = {

EuiDraggable can contain interactive elements such as buttons and form fields. Interactive elements require{' '} - customDragHandle=true on the{' '} + customDragHandle=true and{' '} + hasInteractiveChildren=true on the{' '} EuiDraggable. These props will maintain drag functionality and accessibility, while enabling click, keypress, etc., events on the interactive child elements. diff --git a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap index 5e7303f8304..1ab083cd1bc 100644 --- a/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap +++ b/src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiDraggable can be a draggable container with role group 1`] = ` +exports[`EuiDraggable can be given ReactElement children 1`] = `

`; -exports[`EuiDraggable can be a draggable container with role group 2`] = `undefined`; +exports[`EuiDraggable can be given ReactElement children 2`] = `undefined`; -exports[`EuiDraggable can be given ReactElement children 1`] = ` +exports[`EuiDraggable hasInteractiveChildren renders with role="group" and no tabIndex 1`] = `
`; -exports[`EuiDraggable can be given ReactElement children 2`] = `undefined`; +exports[`EuiDraggable hasInteractiveChildren renders with role="group" and no tabIndex 2`] = `undefined`; exports[`EuiDraggable is rendered 1`] = `
diff --git a/src/components/drag_and_drop/draggable.test.tsx b/src/components/drag_and_drop/draggable.test.tsx index 81d7ad2280b..2d5266bcdf0 100644 --- a/src/components/drag_and_drop/draggable.test.tsx +++ b/src/components/drag_and_drop/draggable.test.tsx @@ -68,13 +68,13 @@ describe('EuiDraggable', () => { expect(takeSnapshot(appDiv)).toMatchSnapshot(); }); - test('can be a draggable container with role group', () => { + test('hasInteractiveChildren renders with role="group" and no tabIndex', () => { const handler = jest.fn(); ReactDOM.render( diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index a7a24a247dc..268d859aa73 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -44,7 +44,7 @@ export interface EuiDraggableProps * Whether the container is draggable and should have `role="group"` instead of `"button"`. * Setting this flag ensures your drag & drop container is keyboard & screen reader accessible. */ - draggableContainer?: boolean; + hasInteractiveChildren?: boolean; /** * Whether the item is currently in a position to be removed */ @@ -60,7 +60,7 @@ export const EuiDraggable: FunctionComponent = ({ customDragHandle = false, draggableId, isDragDisabled = false, - draggableContainer = false, + hasInteractiveChildren = false, isRemovable = false, index, children, @@ -110,11 +110,17 @@ export const EuiDraggable: FunctionComponent = ({ data-test-subj={dataTestSubj} className={classes} style={{ ...style, ...provided.draggableProps.style }} + // We use [role="group"] instead of [role="button"] when we expect a nested + // interactive element. Screen readers will cue users that this is a container // and has one or more elements inside that are part of a related group. role={ - draggableContainer ? 'group' : provided.dragHandleProps?.role + hasInteractiveChildren + ? 'group' + : provided.dragHandleProps?.role } + // If the container includes an interactive element, we remove the tabindex=0 + // because [role="group"] does not permit or warrant a tab stop tabIndex={ - draggableContainer + hasInteractiveChildren ? undefined : provided.dragHandleProps?.tabIndex } From a25e6e842b0f043eaffe4293df0b6a7a738ed050 Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Fri, 28 Jan 2022 08:22:34 -0600 Subject: [PATCH 6/8] Reformatting inline comment on draggable.tsx --- src/components/drag_and_drop/draggable.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 268d859aa73..e3347f5b616 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -111,7 +111,8 @@ export const EuiDraggable: FunctionComponent = ({ className={classes} style={{ ...style, ...provided.draggableProps.style }} // We use [role="group"] instead of [role="button"] when we expect a nested - // interactive element. Screen readers will cue users that this is a container // and has one or more elements inside that are part of a related group. + // interactive element. Screen readers will cue users that this is a container + // and has one or more elements inside that are part of a related group. role={ hasInteractiveChildren ? 'group' From 490670c8cf604b7220ab6387bd8404da7deb920f Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Fri, 28 Jan 2022 12:40:29 -0600 Subject: [PATCH 7/8] Updating TS comments for hasInteractiveChildren prop, for clarity. --- src/components/drag_and_drop/draggable.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index e3347f5b616..c6f21ff053c 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -41,8 +41,8 @@ export interface EuiDraggableProps */ customDragHandle?: boolean; /** - * Whether the container is draggable and should have `role="group"` instead of `"button"`. - * Setting this flag ensures your drag & drop container is keyboard & screen reader accessible. + * Whether the container has interactive children and should have `role="group"` instead of `"button"`. + * Setting this flag ensures your drag & drop container is keyboard and screen reader accessible. */ hasInteractiveChildren?: boolean; /** From 0952f2bdf2cd1c63a7736eba615803530051c0d5 Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Fri, 28 Jan 2022 13:55:36 -0600 Subject: [PATCH 8/8] Refactored standard DIV to EuiPanel for mconsistent interactive patterns. --- .../drag_and_drop/drag_and_drop_custom_handle.js | 13 +++++++++---- .../drag_and_drop/drag_and_drop_disable_blocking.js | 13 +++++++++---- .../views/drag_and_drop/drag_and_drop_example.js | 2 +- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js index 299146cb7dc..555b6a2e142 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js @@ -47,12 +47,17 @@ export default () => { hasInteractiveChildren={true} > {(provided) => ( - - + + -
+ -
+ {content} diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js index 2f048193da6..55bcdef3ee6 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js @@ -48,12 +48,17 @@ export default () => { hasInteractiveChildren={true} > {(provided) => ( - - + + -
+ -
+ {}}> diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js index f809062468b..fff7e4488dd 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js @@ -201,7 +201,7 @@ export const DragAndDropExample = { By default the entire element surface can initiate a drag. To specify an element within as the handle and create a containing group, set customDragHandle=true and{' '} - hasInteractiveChildren=true on the + hasInteractiveChildren=true on the{' '} EuiDraggable.