fix(Toolbar): announce number of items in overflow popover

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -2159,13 +2159,13 @@ describe('AnalyticalTable', () => {
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should(
       'have.attr',
       'aria-label',
-      'Name A Grouped, To expand the row, press the spacebar'
+      'Name A Grouped, To expand the row, press the spacebar.'
     );
     cy.get('[name="navigation-right-arrow"]').click();
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should(
       'have.attr',
       'aria-label',
-      'Name A Grouped, To collapse the row, press the spacebar'
+      'Name A Grouped, To collapse the row, press the spacebar.'
     );
     cy.findByText('Name').click();
     cy.findByText('Ungroup').shadow().findByRole('listitem').click({ force: true });

packages/main/src/components/DynamicPage/DynamicPage.stories.tsx

@@ -60,23 +60,23 @@ const meta = {
       <DynamicPageTitle
         actions={
           <>
-            <Button key={'edit'} design={ButtonDesign.Emphasized}>
+            <Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
               Edit
             </Button>
-            <Button key={'delete'} design={ButtonDesign.Transparent}>
+            <Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
               Delete
             </Button>
-            <Button key={'copy'} design={ButtonDesign.Transparent}>
+            <Button data-accessible-name key={'copy'} design={ButtonDesign.Transparent}>
               Copy
             </Button>
-            <Button key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
+            <Button data-accessible-name key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
           </>
         }
         navigationActions={
           <>
-            <Button key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
-            <Button key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
-            <Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
+            <Button data-accessible-name key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
+            <Button data-accessible-name key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
+            <Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
           </>
         }
         breadcrumbs={
@@ -158,10 +158,10 @@ export const WithVariants: Story = {
       <Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
     ]);
     const [actionItems, setActionItems] = useState([
-      <Button key={'edit'} design={ButtonDesign.Emphasized}>
+      <Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
         Edit
       </Button>,
-      <Button key={'delete'} design={ButtonDesign.Transparent}>
+      <Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
         Delete
       </Button>
     ]);
@@ -171,27 +171,37 @@ export const WithVariants: Story = {
       setNavigationItems(
         selectedVariant === 'Header Variant 2'
           ? [
-              <Button key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />,
-              <Button key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />,
-              <Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
+              <Button
+                data-accessible-name
+                key={'fullscreen'}
+                icon={fullscreenIcon}
+                design={ButtonDesign.Transparent}
+              />,
+              <Button
+                data-accessible-name
+                key={'exitFullscreen'}
+                icon={exitFSIcon}
+                design={ButtonDesign.Transparent}
+              />,
+              <Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
             ]
-          : [<Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />]
+          : [<Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />]
       );
       setActionItems(
         selectedVariant === 'Header Variant 1'
           ? [
-              <Button key={'edit'} design={ButtonDesign.Emphasized}>
+              <Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
                 Edit
               </Button>,
-              <Button key={'delete'} design={ButtonDesign.Transparent}>
+              <Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
                 Delete
               </Button>
             ]
           : [
-              <Button key={'copy'} design={ButtonDesign.Transparent}>
+              <Button data-accessible-name key={'copy'} design={ButtonDesign.Transparent}>
                 Copy
               </Button>,
-              <Button key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
+              <Button data-accessible-name key={'action'} icon={actionIcon} design={ButtonDesign.Transparent} />
             ]
       );
     };
@@ -287,30 +297,38 @@ export const WithCustomOverflowButton: Story = {
       },
       actions: (
         <>
-          <Button key={'edit'} design={ButtonDesign.Emphasized}>
+          <Button data-accessible-name key={'edit'} design={ButtonDesign.Emphasized}>
             Edit
           </Button>
-          <Button key={'delete'} design={ButtonDesign.Transparent}>
+          <Button data-accessible-name key={'delete'} design={ButtonDesign.Transparent}>
             Delete
           </Button>
-          <Button key={'copy'} design={ButtonDesign.Transparent}>
+          <Button data-accessible-name key={'copy'} design={ButtonDesign.Transparent}>
             Copy
           </Button>
-          <Button key={'action'} icon={actionIcon} design={ButtonDesign.Transparent}>
+          <Button data-accessible-name key={'action'} icon={actionIcon} design={ButtonDesign.Transparent}>
             Action
           </Button>
-          <Button design={ButtonDesign.Transparent}>Create</Button>
-          <Button design={ButtonDesign.Transparent}>Loooooong actions Button</Button>
+          <Button data-accessible-name design={ButtonDesign.Transparent}>
+            Create
+          </Button>
+          <Button data-accessible-name design={ButtonDesign.Transparent}>
+            Loooooong actions Button
+          </Button>
         </>
       ),
       navigationActions: (
         <>
-          <Button key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
-          <Button key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
-          <Button key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
-          <Button design={ButtonDesign.Transparent}>UI5 Web Components For React</Button>
-          <Button design={ButtonDesign.Transparent}>Navigation Actions Button</Button>
-          <Button design={ButtonDesign.Transparent}>
+          <Button data-accessible-name key={'fullscreen'} icon={fullscreenIcon} design={ButtonDesign.Transparent} />
+          <Button data-accessible-name key={'exitFullscreen'} icon={exitFSIcon} design={ButtonDesign.Transparent} />
+          <Button data-accessible-name key={'decline'} icon={declineIcon} design={ButtonDesign.Transparent} />
+          <Button data-accessible-name design={ButtonDesign.Transparent}>
+            UI5 Web Components For React
+          </Button>
+          <Button data-accessible-name design={ButtonDesign.Transparent}>
+            Navigation Actions Button
+          </Button>
+          <Button data-accessible-name design={ButtonDesign.Transparent}>
             Loooooooooooooooooooooooooooooooooooong navigation actions Button
           </Button>
         </>

packages/main/src/components/ExpandableText/ExpandableText.cy.tsx

@@ -17,8 +17,8 @@ describe('ExpandableText', () => {
       );
       getText(
         renderWhitespace
-          ? '             If renderWhitespace is set to true, there will be thirteen white spaces in front and af… Show more'
-          : 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show more'
+          ? '             If renderWhitespace is set to true, there will be thirteen white spaces in front and af… Show More'
+          : 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More'
       );
       cy.mount(
         <ExpandableText
@@ -32,8 +32,8 @@ describe('ExpandableText', () => {
       );
       getText(
         renderWhitespace
-          ? '             If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence.             Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonu… Show more'
-          : 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt… Show more'
+          ? '             If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence.             Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonu… Show More'
+          : 'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence. Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt… Show More'
       );
 
       cy.mount(
@@ -49,13 +49,13 @@ describe('ExpandableText', () => {
 
   it('expand/collapse', () => {
     cy.mount(<ExpandableText data-testid="et">{longText}</ExpandableText>);
-    cy.findByText('Show more').click();
+    cy.findByText('Show More').click();
     getText(
-      '             If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence.             Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat Show less'
+      '             If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sentence.             Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat Show Less'
     );
-    cy.findByText('Show less').click();
+    cy.findByText('Show Less').click();
     getText(
-      'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show more'
+      'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More'
     );
   });
 
@@ -65,18 +65,18 @@ describe('ExpandableText', () => {
         {longText}
       </ExpandableText>
     );
-    cy.findByText('Show more').should('have.attr', 'accessible-name', 'Show the full text').click();
+    cy.findByText('Show More').should('have.attr', 'accessible-name', 'Show the full text').click();
 
     getText(
-      'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show less'
+      'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show Less'
     );
     cy.get('[ui5-responsive-popover]').should('have.attr', 'open');
-    cy.findByText('Show less').should('have.attr', 'accessible-name', 'Close the popover').click();
+    cy.findByText('Show Less').should('have.attr', 'accessible-name', 'Close the popover').click();
     cy.realPress('Escape');
     getText(
-      'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show more'
+      'If renderWhitespace is set to true, there will be thirteen white spaces in front and after this sent… Show More'
     );
-    cy.findByText('Show more').should('have.attr', 'accessible-name', 'Show the full text');
+    cy.findByText('Show More').should('have.attr', 'accessible-name', 'Show the full text');
   });
 
   cypressPassThroughTestsFactory(ExpandableText);

packages/main/src/components/FilterBar/FilterBar.cy.tsx

@@ -244,19 +244,19 @@ describe('FilterBar.cy.tsx', () => {
     cy.findAllByText('SWITCH').should('have.length', 2);
     cy.findAllByText('SELECT').should('have.length', 2);
 
-    cy.findByPlaceholderText('Search for filters').typeIntoUi5Input('S{enter}');
+    cy.findByPlaceholderText('Search for Filters').typeIntoUi5Input('S{enter}');
 
     cy.findAllByText('INPUT').should('have.length', 1);
     cy.findAllByText('SWITCH').should('have.length', 2);
     cy.findAllByText('SELECT').should('have.length', 2);
 
-    cy.findByPlaceholderText('Search for filters').typeIntoUi5Input('W{enter}', { force: true });
+    cy.findByPlaceholderText('Search for Filters').typeIntoUi5Input('W{enter}', { force: true });
 
     cy.findAllByText('INPUT').should('have.length', 1);
     cy.findAllByText('SWITCH').should('have.length', 2);
     cy.findAllByText('SELECT').should('have.length', 1);
 
-    cy.findByPlaceholderText('Search for filters').shadow().find('[ui5-icon]').click();
+    cy.findByPlaceholderText('Search for Filters').shadow().find('[ui5-icon]').click();
 
     cy.findAllByText('INPUT').should('have.length', 2);
     cy.findAllByText('SWITCH').should('have.length', 2);

packages/main/src/components/FilterBar/FilterDialog.tsx

@@ -537,6 +537,7 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
           <FlexBox direction={FlexBoxDirection.Column} className={classNames.subheaderContainer}>
             <Toolbar className={classNames.subheader} toolbarStyle={ToolbarStyle.Clear}>
               <Select
+                data-accessible-name
                 onChange={handleAttributeFilterChange}
                 title={fieldsByAttributeText}
                 accessibleName={fieldsByAttributeText}
@@ -558,10 +559,10 @@ export const FilterDialog = (props: FilterDialogPropTypes) => {
                 </Option>
               </Select>
               <ToolbarSpacer />
-              <Button design={ButtonDesign.Transparent} onClick={toggleValues} aria-live="polite">
+              <Button data-accessible-name design={ButtonDesign.Transparent} onClick={toggleValues} aria-live="polite">
                 {showValues ? hideValuesText : showValuesText}
               </Button>
-              <SegmentedButton onSelectionChange={handleViewChange}>
+              <SegmentedButton data-accessible-name onSelectionChange={handleViewChange}>
                 <SegmentedButtonItem
                   icon={listIcon}
                   data-id="list"

packages/main/src/components/FilterBar/index.tsx

@@ -340,12 +340,13 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
   const ToolbarButtons = (
     <>
       {showGoOnFB && (
-        <Button onClick={handleGoOnFb} design={ButtonDesign.Emphasized}>
+        <Button data-accessible-name onClick={handleGoOnFb} design={ButtonDesign.Emphasized}>
           {goText}
         </Button>
       )}
       {!hideToggleFiltersButton && !hideToolbar && !isPhone && (
         <Button
+          data-accessible-name
           onClick={handleToggle}
           design={ButtonDesign.Transparent}
           className={classNames.showFiltersBtn}
@@ -355,17 +356,23 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
         </Button>
       )}
       {showClearOnFB && (
-        <Button onClick={handleClear} design={ButtonDesign.Transparent}>
+        <Button data-accessible-name onClick={handleClear} design={ButtonDesign.Transparent}>
           {clearText}
         </Button>
       )}
       {showRestoreOnFB && (
-        <Button onClick={handleFBRestore} design={ButtonDesign.Transparent}>
+        <Button data-accessible-name onClick={handleFBRestore} design={ButtonDesign.Transparent}>
           {restoreText}
         </Button>
       )}
       {!hideFilterConfiguration && (
-        <Button onClick={handleDialogOpen} aria-haspopup="dialog" design={ButtonDesign.Transparent} ref={filterBtnRef}>
+        <Button
+          data-accessible-name
+          onClick={handleDialogOpen}
+          aria-haspopup="dialog"
+          design={ButtonDesign.Transparent}
+          ref={filterBtnRef}
+        >
           {`${filtersText}${
             activeFiltersCount && parseInt(activeFiltersCount as string, 10) > 0 ? ` (${activeFiltersCount})` : ''
           }`}