From 6cf69e27fc98de920b41f87f2565dd9406d275e7 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Mon, 6 May 2024 19:55:31 +0800 Subject: [PATCH 1/4] Splitter: change focusable element (#27306) Co-authored-by: EugeniyKiyashko --- .../Overview/Angular/app/app.component.css | 15 +++++ .../Overview/Angular/app/app.component.html | 26 ++++----- .../Demos/Splitter/Overview/React/App.tsx | 18 +++--- .../Splitter/Overview/React/PaneContent.tsx | 33 +++++++---- .../Demos/Splitter/Overview/React/styles.css | 15 +++++ .../Demos/Splitter/Overview/ReactJs/App.js | 18 +++--- .../Splitter/Overview/ReactJs/PaneContent.js | 43 +++++++++------ .../Splitter/Overview/ReactJs/styles.css | 15 +++++ .../demos/Demos/Splitter/Overview/Vue/App.vue | 25 ++++++++- .../Splitter/Overview/Vue/PaneContent.vue | 31 ++++++----- .../Demos/Splitter/Overview/jQuery/index.js | 30 +++++----- .../Demos/Splitter/Overview/jQuery/styles.css | 15 +++++ .../testing/widgets/splitter/Overview.test.js | 52 ++++++++++++++++++ ...cused_Central_Pane (fluent.blue.light).png | Bin 0 -> 41131 bytes ...sed_Central_Pane (material.blue.light).png | Bin 0 -> 42725 bytes .../etalons/Splitter_Focused_Central_Pane.png | Bin 0 -> 40754 bytes ..._Focused_Left_Pane (fluent.blue.light).png | Bin 0 -> 41236 bytes ...ocused_Left_Pane (material.blue.light).png | Bin 0 -> 42796 bytes .../etalons/Splitter_Focused_Left_Pane.png | Bin 0 -> 40863 bytes ...ested_Central_Pane (fluent.blue.light).png | Bin 0 -> 41160 bytes ...ted_Central_Pane (material.blue.light).png | Bin 0 -> 42678 bytes .../Splitter_Focused_Nested_Central_Pane.png | Bin 0 -> 40795 bytes ...d_Nested_Left_Pane (fluent.blue.light).png | Bin 0 -> 41159 bytes ...Nested_Left_Pane (material.blue.light).png | Bin 0 -> 42677 bytes .../Splitter_Focused_Nested_Left_Pane.png | Bin 0 -> 40794 bytes ..._Nested_Right_Pane (fluent.blue.light).png | Bin 0 -> 41159 bytes ...ested_Right_Pane (material.blue.light).png | Bin 0 -> 42676 bytes .../Splitter_Focused_Nested_Right_Pane.png | Bin 0 -> 40793 bytes ...Focused_Right_Pane (fluent.blue.light).png | Bin 0 -> 41237 bytes ...cused_Right_Pane (material.blue.light).png | Bin 0 -> 42791 bytes .../etalons/Splitter_Focused_Right_Pane.png | Bin 0 -> 40863 bytes 31 files changed, 237 insertions(+), 99 deletions(-) create mode 100644 apps/demos/testing/widgets/splitter/Overview.test.js create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Central_Pane (fluent.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Central_Pane (material.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Central_Pane.png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Left_Pane (fluent.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Left_Pane (material.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Left_Pane.png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Central_Pane (fluent.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Central_Pane (material.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Central_Pane.png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Left_Pane (fluent.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Left_Pane (material.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Left_Pane.png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Right_Pane (fluent.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Right_Pane (material.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Nested_Right_Pane.png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Right_Pane (fluent.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Right_Pane (material.blue.light).png create mode 100644 apps/demos/testing/widgets/splitter/etalons/Splitter_Focused_Right_Pane.png diff --git a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css index b35872ba0358..e2f2229cb057 100644 --- a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css +++ b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.css @@ -26,3 +26,18 @@ color: var(--dx-texteditor-color-label); font-size: 10px; } + +::ng-deep #splitter > .dx-splitter-item:first-child > .dx-splitter-item-content:focus { + border-start-start-radius: 8px; + border-end-start-radius: 8px; +} + +::ng-deep #splitter > .dx-splitter-item:last-child > .dx-splitter-item-content:focus { + border-end-end-radius: 8px; + border-start-end-radius: 8px; +} + +::ng-deep .dx-splitter-item-content:focus { + outline: none; + box-shadow: inset 0 0 0 1px var(--dx-color-primary); +} diff --git a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.html b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.html index bcba69a4ea22..fc1daa0bb795 100644 --- a/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.html +++ b/apps/demos/Demos/Splitter/Overview/Angular/app/app.component.html @@ -35,11 +35,7 @@ > -
+
-
+
-
+
-
{{ title }}
-
{{ getPaneState(data) }}
- -
{{ item.key }}: {{ item.value }}
- +
+
{{ title }}
+
{{ getPaneState(data) }}
+ +
{{ item.key }}: {{ item.value }}
+ +
diff --git a/apps/demos/Demos/Splitter/Overview/React/App.tsx b/apps/demos/Demos/Splitter/Overview/React/App.tsx index 5b2d137063b7..6cc7a97d76f0 100644 --- a/apps/demos/Demos/Splitter/Overview/React/App.tsx +++ b/apps/demos/Demos/Splitter/Overview/React/App.tsx @@ -2,10 +2,8 @@ import React from 'react'; import Splitter, { Item } from 'devextreme-react/splitter'; import PaneContent from './PaneContent.tsx'; -const PaneContentWithTitleRender = (title, initialSize?: string) => { - const PaneContentRender = (data) => (); - return PaneContentRender; -} +const PaneContentWithTitle = (title: string, initialSize?: string) => (data) => (); + const App = () => ( ( resizable={true} size="140px" minSize="70px" - render={PaneContentWithTitleRender('Left Pane', '140px')} + render={PaneContentWithTitle('Left Pane', '140px')} /> ( resizable={true} collapsible={true} maxSize="75%" - render={PaneContentWithTitleRender('Central Pane')} + render={PaneContentWithTitle('Central Pane')} /> ( collapsible={true} size="30%" minSize="5%" - render={PaneContentWithTitleRender('Nested Left Pane', '30%')} + render={PaneContentWithTitle('Nested Left Pane', '30%')} /> @@ -60,7 +58,7 @@ const App = () => ( resizable={false} collapsible={false} size="140px" - render={PaneContentWithTitleRender('Right Pane', '140px')} + render={PaneContentWithTitle('Right Pane', '140px')} /> diff --git a/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx b/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx index bfc26083191c..ed34935d69ec 100644 --- a/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx +++ b/apps/demos/Demos/Splitter/Overview/React/PaneContent.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; const dimensionOptions = new Set(['size', 'minSize', 'maxSize']); @@ -16,16 +16,25 @@ const getFilteredDimensionOptions = (data) => Object.entries(data) .filter(([key, value]) => dimensionOptions.has(key) && value) .map(([key, value]) => ({ key, value })); -const PaneContent = (data) => ( -
-
{data.title}
-
{getPaneState(data)}
- {getFilteredDimensionOptions(data).map((item, index) => ( -
- {item.key}: {item.value} -
- ))} -
-); +const PaneContent = (data: any) => { + const paneContentRef = useRef(null); + + useEffect(() => { + const element = paneContentRef.current.parentNode; + element.setAttribute('tabIndex', '0'); + }); + + return ( +
+
{data.title}
+
{getPaneState(data)}
+ {getFilteredDimensionOptions(data).map((item, index) => ( +
+ {item.key}: {item.value} +
+ ))} +
+ ); +}; export default PaneContent; diff --git a/apps/demos/Demos/Splitter/Overview/React/styles.css b/apps/demos/Demos/Splitter/Overview/React/styles.css index 591d02282a00..21c5dbb1b0c3 100644 --- a/apps/demos/Demos/Splitter/Overview/React/styles.css +++ b/apps/demos/Demos/Splitter/Overview/React/styles.css @@ -30,3 +30,18 @@ color: var(--dx-texteditor-color-label); font-size: 10px; } + +#splitter > .dx-splitter-item:first-child > .dx-splitter-item-content:focus { + border-start-start-radius: 8px; + border-end-start-radius: 8px; +} + +#splitter > .dx-splitter-item:last-child > .dx-splitter-item-content:focus { + border-end-end-radius: 8px; + border-start-end-radius: 8px; +} + +.dx-splitter-item-content:focus { + outline: none; + box-shadow: inset 0 0 0 1px var(--dx-color-primary); +} diff --git a/apps/demos/Demos/Splitter/Overview/ReactJs/App.js b/apps/demos/Demos/Splitter/Overview/ReactJs/App.js index aac121431127..9f0691fda786 100644 --- a/apps/demos/Demos/Splitter/Overview/ReactJs/App.js +++ b/apps/demos/Demos/Splitter/Overview/ReactJs/App.js @@ -2,16 +2,14 @@ import React from 'react'; import Splitter, { Item } from 'devextreme-react/splitter'; import PaneContent from './PaneContent.js'; -const PaneContentWithTitleRender = (title, initialSize) => { - const PaneContentRender = (data) => ( +const PaneContentWithTitle = (title, initialSize) => (data) => + ( ); - return PaneContentRender; -}; const App = () => ( @@ -19,7 +17,7 @@ const App = () => ( resizable={true} size="140px" minSize="70px" - render={PaneContentWithTitleRender('Left Pane', '140px')} + render={PaneContentWithTitle('Left Pane', '140px')} /> @@ -27,7 +25,7 @@ const App = () => ( resizable={true} collapsible={true} maxSize="75%" - render={PaneContentWithTitleRender('Central Pane')} + render={PaneContentWithTitle('Central Pane')} /> ( collapsible={true} size="30%" minSize="5%" - render={PaneContentWithTitleRender('Nested Left Pane', '30%')} + render={PaneContentWithTitle('Nested Left Pane', '30%')} /> @@ -60,7 +58,7 @@ const App = () => ( resizable={false} collapsible={false} size="140px" - render={PaneContentWithTitleRender('Right Pane', '140px')} + render={PaneContentWithTitle('Right Pane', '140px')} /> diff --git a/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js b/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js index 568452e70d26..b3e8559c649f 100644 --- a/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js +++ b/apps/demos/Demos/Splitter/Overview/ReactJs/PaneContent.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; const dimensionOptions = new Set(['size', 'minSize', 'maxSize']); const getPaneState = (data) => { @@ -13,21 +13,28 @@ const getFilteredDimensionOptions = (data) => Object.entries(data) .filter(([key, value]) => dimensionOptions.has(key) && value) .map(([key, value]) => ({ key, value })); -const PaneContent = (data) => ( -
-
{data.title}
-
{getPaneState(data)}
- {getFilteredDimensionOptions(data).map((item, index) => ( -
- {item.key}: {item.value} -
- ))} -
-); +const PaneContent = (data) => { + const paneContentRef = useRef(null); + useEffect(() => { + const element = paneContentRef.current.parentNode; + element.setAttribute('tabIndex', '0'); + }); + return ( +
+
{data.title}
+
{getPaneState(data)}
+ {getFilteredDimensionOptions(data).map((item, index) => ( +
+ {item.key}: {item.value} +
+ ))} +
+ ); +}; export default PaneContent; diff --git a/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css b/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css index 591d02282a00..21c5dbb1b0c3 100644 --- a/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css +++ b/apps/demos/Demos/Splitter/Overview/ReactJs/styles.css @@ -30,3 +30,18 @@ color: var(--dx-texteditor-color-label); font-size: 10px; } + +#splitter > .dx-splitter-item:first-child > .dx-splitter-item-content:focus { + border-start-start-radius: 8px; + border-end-start-radius: 8px; +} + +#splitter > .dx-splitter-item:last-child > .dx-splitter-item-content:focus { + border-end-end-radius: 8px; + border-start-end-radius: 8px; +} + +.dx-splitter-item-content:focus { + outline: none; + box-shadow: inset 0 0 0 1px var(--dx-color-primary); +} diff --git a/apps/demos/Demos/Splitter/Overview/Vue/App.vue b/apps/demos/Demos/Splitter/Overview/Vue/App.vue index 0e658db2db5d..5a706cb601fa 100644 --- a/apps/demos/Demos/Splitter/Overview/Vue/App.vue +++ b/apps/demos/Demos/Splitter/Overview/Vue/App.vue @@ -1,5 +1,7 @@