Tooltip for categories expand collapse button

core/src/navigation/LeftNav.svelte

@@ -462,6 +462,10 @@
         : expandNavTooltip;
     }
   }
+
+  function setTitleForCategoryButton(nodes, expandedCategories){
+    return isExpanded(nodes, expandedCategories) ? nodes.metaInfo.titleCollapseButton : nodes.metaInfo.titleExpandButton;
+  }
 </script>
 
 <svelte:window
@@ -592,11 +596,11 @@
                             <StatusBadge {node} />
                           </span>
                           {#if node.externalLink && node.externalLink.url}
-                          <i
-                            class="fd-nested-list__icon sap-icon sap-icon--action"
-                            role="presentation"
-                          />
-                          {/if}                     
+                            <i
+                              class="fd-nested-list__icon sap-icon sap-icon--action"
+                              role="presentation"
+                            />
+                          {/if}
                           {#if node.badgeCounter}
                             <BadgeCounter {node} />
                           {/if}
@@ -672,6 +676,10 @@
                         aria-label="Expand categories"
                         aria-haspopup="true"
                         aria-expanded={isExpanded(nodes, expandedCategories)}
+                        title={setTitleForCategoryButton(
+                          nodes,
+                          expandedCategories
+                        )}
                         on:click|preventDefault={() =>
                           setExpandedState(
                             nodes,
@@ -723,10 +731,10 @@
                                 )}
                               >
                                 <span class="fd-nested-list__title">
-                                  {$getTranslation(node.label)}                                  
+                                  {$getTranslation(node.label)}
                                   <StatusBadge {node} />
-                                </span>                                
-                                
+                                </span>
+
                                 {#if node.externalLink && node.externalLink.url}
                                   <i class="sap-icon--action" />
                                 {/if}
@@ -779,7 +787,7 @@
                                       )}
                                     >
                                       <span class="fd-nested-list__title">
-                                        {$getTranslation(node.label)}                                        
+                                        {$getTranslation(node.label)}
                                         <StatusBadge {node} />
                                       </span>
                                       {#if node.externalLink && node.externalLink.url}

core/src/utilities/helpers/navigation-helpers.js

@@ -114,6 +114,7 @@ class NavigationHelpersClass {
   }
 
   groupNodesBy(nodes, property, useVirtualGroups) {
+    const defaultTooltipForExpandCollapseCategories = LuigiConfig.getConfigValue('navigation.defaults.category');
     let result = {};
     let groupCounter = 0;
     let virtualGroupCounter = 0;
@@ -162,6 +163,14 @@ class NavigationHelpersClass {
         delete arr.metaInfo._fromString;
         arr.metaInfo = { ...arr.metaInfo, ...category };
       }
+      if (GenericHelpers.isObject(category) && defaultTooltipForExpandCollapseCategories) {
+        category.titleExpandButton
+          ? (arr.metaInfo.titleExpandButton = category.titleExpandButton)
+          : (arr.metaInfo.titleExpandButton = defaultTooltipForExpandCollapseCategories.titleExpandButton);
+        category.titleCollapseButton
+          ? (arr.metaInfo.titleCollapseButton = category.titleCollapseButton)
+          : (arr.metaInfo.titleCollapseButton = defaultTooltipForExpandCollapseCategories.titleCollapseButton);
+      }
       if (!arr.metaInfo.categoryUid && key && arr.metaInfo.collapsible) {
         arr.metaInfo.categoryUid = node.parent ? this.getNodePath(node.parent) + ':' + key : key;
       }

docs/navigation-parameters-reference.md

@@ -89,6 +89,23 @@ The navigation parameters allow you to configure **global** navigation settings
 - **description**: if set to `true`, proper href attributes are added to all navigation links. It is set to `false` by default.
 - **since**: v0.7.4
 
+### defaults.category
+- **type**: object
+- **description**: defines a default `title` for expand and collapse button on categries. It is possible to override the default to define a title on [category](navigation-parameters-reference.md#category) itself.
+- **attributes**:
+  - **titleExpandButton** adds the HTML `title` attribute with the defined value to the expand button.
+  - **titleCollapseButton** adds the HTML `title` attribute with the defined value to the collapse button.
+- **since**: NEXTRELEASE
+- **example**:
+```javascript
+config.navigation.defaults = {
+    category: {
+         titleExpandButton: 'Expand category',
+         titleCollapseButton: 'Collapse category',
+    }
+}
+```
+
 ### defaults.isolateView
 - **type**: boolean
 - **description**: renders all views in new frames. This setting overrides the same-domain frame reuse.
@@ -223,6 +240,8 @@ Node parameters are all the parameters that can be added to an individual naviga
   - **collapsible** if set to `true`, category items are hidden at first. To expand them, click the main category node.
   - **testId** is a string where you can define your own custom `testId` for  E2E tests. If nothing is specified, it is the node's label written as one word in lower case, for example`label`.
   - **id** if this property is defined all nodes with the same category `id` will be grouped.
+  - **titleExpandButton** adds the HTML `title` attribute with the defined value to the expand button.
+  - **titleCollapseButton** adds the HTML `title` attribute with the defined value to the collapse button.
 
 ### children
 - **type**: array | function

test/e2e-test-application/e2e/tests/0-js-test-app/js-test-app-navigation.spec.js

@@ -117,6 +117,51 @@ describe('JS-TEST-APP', () => {
         cy.contains('.fd-shellbar').should('not.exist');
       });
     });
+    describe('Tooltext for category button', () => {
+      let newConfig;
+      beforeEach(() => {
+        newConfig = cloneDeep(defaultLuigiConfig);
+        newConfig.navigation.nodes[0].children[0].category = {
+          label: 'Test Category',
+          collapsible: true,
+          titleExpandButton: 'Expand test category',
+          titleCollapseButton: 'Collapse test category'
+        };
+        newConfig.tag = 'tooltip-test';
+      });
+      it('Tooltip for expand/collapse button', () => {
+        cy.visitTestApp('/', newConfig);
+        cy.get('#app[configversion="tooltip-test"]');
+        cy.get('.lui-collapsible-item').contains('Test Category');
+        cy.get('.lui-collapsible-item button').should('have.attr', 'title', 'Expand test category');
+        cy.get('.lui-collapsible-item')
+          .contains('Test Category')
+          .click();
+        cy.get('.lui-collapsible-item button').should('have.attr', 'title', 'Collapse test category');
+      });
+      it('Tooltip for expand button not defined', () => {
+        delete newConfig.navigation.nodes[0].children[0].category.titleExpandButton;
+        cy.visitTestApp('/', newConfig);
+        cy.get('#app[configversion="tooltip-test"]');
+        cy.get('.lui-collapsible-item').contains('Test Category');
+        cy.get('.lui-collapsible-item button').should('not.have.attr', 'title');
+        cy.get('.lui-collapsible-item')
+          .contains('Test Category')
+          .click();
+        cy.get('.lui-collapsible-item button').should('have.attr', 'title', 'Collapse test category');
+      });
+      it('Tooltip for collapse button not defined', () => {
+        delete newConfig.navigation.nodes[0].children[0].category.titleCollapseButton;
+        cy.visitTestApp('/', newConfig);
+        cy.get('#app[configversion="tooltip-test"]');
+        cy.get('.lui-collapsible-item').contains('Test Category');
+        cy.get('.lui-collapsible-item button').should('have.attr', 'title', 'Expand test category');
+        cy.get('.lui-collapsible-item')
+          .contains('Test Category')
+          .click();
+        cy.get('.lui-collapsible-item button').should('not.have.attr', 'title');
+      });
+    });
   });
   describe('ContextSwitcher', () => {
     let newConfig;