move expand button and adjust icon (align with QGIS)

open-pioneer · Dec 20, 2024 · bb10bef · bb10bef
1 parent 33b5942
commit bb10bef
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 37 deletions.
diff --git a/src/packages/toc/LayerList.tsx b/src/packages/toc/LayerList.tsx
@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2023 Open Pioneer project (https://github.com/open-pioneer)
 // SPDX-License-Identifier: Apache-2.0
-import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
+import { ChevronDownIcon, ChevronRightIcon } from "@chakra-ui/icons";
 import {
     Box,
     Button,
@@ -189,6 +189,22 @@ function LayerItem(props: { layer: AnyLayer }): JSX.Element {
                 /** Aligned to the size of the (potential) menu button in LayerItemDescriptor */
                 minHeight={10}
             >
+                <IconButton
+                    variant="ghost"
+                    borderRadius="full"
+                    padding={0}
+                    className="toc-layer-item-collapse-button"
+                    onClick={() => setExpanded(!expanded)}
+                    icon={expanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
+                    aria-label={
+                        expanded
+                            ? intl.formatMessage({ id: "group.collapse" }, { title: title })
+                            : intl.formatMessage({ id: "group.expand" }, { title: title })
+                    }
+                    aria-expanded={expanded}
+                    aria-controls={layerGroupId}
+                    visibility={nestedChildren && isCollapsible ? "visible" : "hidden"} //use visible:hidden for layers without children for correct indent
+                />
                 <Checkbox
                     // Keyboard navigation jumps only to Checkboxes and uses the texts inside this DOM node. The aria-labels of Tooltip and Icon is ignored by screenreader because they are no child element of the checkbox. To consider the notAvailableLabel, an aria-label at the checkbox is necessary.
                     aria-label={title + (!isAvailable ? " " + notAvailableLabel : "")}
@@ -216,23 +232,6 @@ function LayerItem(props: { layer: AnyLayer }): JSX.Element {
                         </span>
                     </Tooltip>
                 )}
-                {nestedChildren && isCollapsible && (
-                    <IconButton
-                        variant="ghost"
-                        borderRadius="full"
-                        padding={0}
-                        className="toc-layer-item-collapse-button"
-                        onClick={() => setExpanded(!expanded)}
-                        icon={expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                        aria-label={
-                            expanded
-                                ? intl.formatMessage({ id: "group.collapse" }, { title: title })
-                                : intl.formatMessage({ id: "group.expand" }, { title: title })
-                        }
-                        aria-expanded={expanded}
-                        aria-controls={layerGroupId}
-                    />
-                )}
                 <Spacer></Spacer>
                 {description && (
                     <LayerItemDescriptor

diff --git a/src/packages/toc/__snapshots__/Toc.test.tsx.snap b/src/packages/toc/__snapshots__/Toc.test.tsx.snap
@@ -23,7 +23,6 @@ exports[`should successfully create a toc component 1`] = `
     >
       <div
         class="basemap-switcher-select react-select--has-value css-79elbk"
-        data-theme="light"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -38,15 +37,12 @@ exports[`should successfully create a toc component 1`] = `
         />
         <div
           class="react-select__control react-select__control--menu-is-open css-156sfem"
-          data-theme="light"
         >
           <div
             class="react-select__value-container react-select__value-container--has-value css-j93siq"
-            data-theme="light"
           >
             <div
               class="basemap-switcher-value react-select__single-value css-1xa1gs2"
-              data-theme="light"
             >
               <div
                 class="css-u4p24i"
@@ -73,22 +69,18 @@ exports[`should successfully create a toc component 1`] = `
           </div>
           <div
             class="react-select__indicators css-hfbj6y"
-            data-theme="light"
           >
             <hr
               aria-orientation="vertical"
               class="chakra-divider react-select__indicator-separator css-hxuk4g"
-              data-theme="light"
             />
             <div
               aria-hidden="true"
               class="react-select__indicator react-select__dropdown-indicator css-1hbdnuy"
-              data-theme="light"
             >
               <svg
                 aria-hidden="true"
                 class="chakra-icon css-onkibi"
-                data-theme="light"
                 focusable="false"
                 role="presentation"
                 viewBox="0 0 24 24"
@@ -106,20 +98,17 @@ exports[`should successfully create a toc component 1`] = `
         >
           <div
             class="react-select__menu css-ky7590"
-            data-theme="light"
           >
             <div
               aria-multiselectable="false"
               class="react-select__menu-list css-mkffje"
-              data-theme="light"
               id="react-select-2-listbox"
               role="listbox"
             >
               <div
                 aria-selected="true"
                 class="basemap-switcher-option react-select__option react-select__option--is-focused react-select__option--is-selected css-2rk73n"
                 data-focus="true"
-                data-theme="light"
                 id="react-select-2-option-0"
                 role="option"
                 tabindex="-1"
@@ -179,6 +168,26 @@ exports[`should successfully create a toc component 1`] = `
             class="toc-layer-item-content css-bk4v0k"
             data-theme="light"
           >
+            <button
+              aria-controls=":r1:"
+              aria-expanded="true"
+              aria-label="group.collapse"
+              class="chakra-button toc-layer-item-collapse-button css-146rx40"
+              data-theme="light"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
             <label
               class="chakra-checkbox css-1577qb8"
               data-checked=""
@@ -237,6 +246,26 @@ exports[`should successfully create a toc component 1`] = `
             class="toc-layer-item-content css-bk4v0k"
             data-theme="light"
           >
+            <button
+              aria-controls=":r2:"
+              aria-expanded="true"
+              aria-label="group.collapse"
+              class="chakra-button toc-layer-item-collapse-button css-146rx40"
+              data-theme="light"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="chakra-icon css-onkibi"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                  fill="currentColor"
+                />
+              </svg>
+            </button>
             <label
               class="chakra-checkbox css-1577qb8"
               data-checked=""

diff --git a/src/packages/toc/__snapshots__/Tools.test.tsx.snap b/src/packages/toc/__snapshots__/Tools.test.tsx.snap
@@ -24,7 +24,6 @@ exports[`Should successfully create a toc with default tool component 1`] = `
       >
         <div
           class="basemap-switcher-select react-select--has-value css-79elbk"
-          data-theme="light"
         >
           <span
             class="css-1f43avz-a11yText-A11yText"
@@ -39,15 +38,12 @@ exports[`Should successfully create a toc with default tool component 1`] = `
           />
           <div
             class="react-select__control css-156sfem"
-            data-theme="light"
           >
             <div
               class="react-select__value-container react-select__value-container--has-value css-j93siq"
-              data-theme="light"
             >
               <div
                 class="basemap-switcher-value react-select__single-value css-1xa1gs2"
-                data-theme="light"
               >
                 <div
                   class="css-u4p24i"
@@ -72,22 +68,18 @@ exports[`Should successfully create a toc with default tool component 1`] = `
             </div>
             <div
               class="react-select__indicators css-hfbj6y"
-              data-theme="light"
             >
               <hr
                 aria-orientation="vertical"
                 class="chakra-divider react-select__indicator-separator css-hxuk4g"
-                data-theme="light"
               />
               <div
                 aria-hidden="true"
                 class="react-select__indicator react-select__dropdown-indicator css-1hbdnuy"
-                data-theme="light"
               >
                 <svg
                   aria-hidden="true"
                   class="chakra-icon css-onkibi"
-                  data-theme="light"
                   focusable="false"
                   role="presentation"
                   viewBox="0 0 24 24"
@@ -199,6 +191,26 @@ exports[`Should successfully create a toc with default tool component 1`] = `
               class="toc-layer-item-content css-bk4v0k"
               data-theme="light"
             >
+              <button
+                aria-controls=":r4:"
+                aria-expanded="true"
+                aria-label="group.collapse"
+                class="chakra-button toc-layer-item-collapse-button css-146rx40"
+                data-theme="light"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="chakra-icon css-onkibi"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </button>
               <label
                 class="chakra-checkbox css-1577qb8"
                 data-checked=""