fix: broken coachmark accessibility tests and avt (#6398)

* fix: broken coachmark accessibility tests * fix: avt fixes * fix: pageheader breadcrumb label
carbon-design-system · Nov 11, 2024 · 1fe4d81 · 1fe4d81
1 parent 365c310
commit 1fe4d81
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 35 deletions.
diff --git a/e2e/components/CreateFlows/CreateTearsheet-test.avt.e2e.js b/e2e/components/CreateFlows/CreateTearsheet-test.avt.e2e.js
@@ -62,6 +62,7 @@ test.describe('CreateTearsheet @avt', () => {
     const nextButton = page.getByText('Next');
     const backButton = page.getByText('Back');
     // Expect the Learn More link to be focused
+    await expect(learnMoreAnchor).toBeVisible();
     await expect(learnMoreAnchor).toBeFocused();
 
     // Switch focus to input box

diff --git a/packages/ibm-products/src/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js b/packages/ibm-products/src/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js
@@ -42,6 +42,7 @@ const componentName = 'BreadcrumbWithOverflow';
 export let BreadcrumbWithOverflow = ({
   breadcrumbs,
   className,
+  label,
   maxVisible,
   noTrailingSlash,
   overflowAriaLabel,
@@ -95,7 +96,7 @@ export let BreadcrumbWithOverflow = ({
         aria-hidden={true}
         ref={sizingContainerRef}
       >
-        <Breadcrumb>
+        <Breadcrumb aria-label={`${label}-hidden`}>
           <BreadcrumbItem key={`${blockClass}-hidden-overflow-${internalId}`}>
             <OverflowMenu
               aria-label={overflowAriaLabel}
@@ -129,7 +130,7 @@ export let BreadcrumbWithOverflow = ({
         </Breadcrumb>
       </div>
     );
-  }, [breadcrumbs, overflowAriaLabel]);
+  }, [breadcrumbs, label, overflowAriaLabel]);
 
   useEffect(() => {
     // updates displayedBreadcrumbItems and overflowBreadcrumbItems based on displayCount and breadcrumbs
@@ -308,6 +309,7 @@ export let BreadcrumbWithOverflow = ({
         {hiddenSizingItems}
 
         <Breadcrumb
+          aria-label={label}
           className={cx(`${blockClass}__breadcrumb-container`, {
             [`${blockClass}__breadcrumb-container-with-items`]:
               displayedBreadcrumbItems.length > 1,
@@ -386,6 +388,10 @@ BreadcrumbWithOverflow.propTypes = {
    * className
    */
   className: PropTypes.string,
+  /**
+   * Label for the Breadcrumb component
+   */
+  label: PropTypes.string,
   /**
    * maxVisible: maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1)
    */

diff --git a/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.tsx b/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.tsx
@@ -71,10 +71,9 @@ export let CoachmarkBeacon = React.forwardRef<
         tabIndex={0}
         type="button"
         {...coachmark.buttonProps}
-        aria-label={label}
         className={`${blockClass}__target`}
       >
-        <svg className={`${blockClass}__center`}>
+        <svg className={`${blockClass}__center`} aria-label={label}>
           <title>{label}</title>
           <circle r={1} cx={38} cy={38} />
         </svg>

diff --git a/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.stories.jsx b/packages/ibm-products/src/components/EditSidePanel/EditSidePanel.stories.jsx
@@ -222,16 +222,19 @@ editSidePanel.args = {
       label: 'Copy platform id',
       icon: (props) => <Copy size={16} {...props} />,
       onClick: action('Toolbar button clicked: Copy'),
+      hasIconOnly: true,
     },
     {
       label: 'Settings',
       icon: (props) => <Settings size={16} {...props} />,
       onClick: action('Toolbar button clicked: Settings'),
+      hasIconOnly: true,
     },
     {
       label: 'Delete',
       icon: (props) => <TrashCan size={16} {...props} />,
       onClick: action('Toolbar button clicked: Delete'),
+      hasIconOnly: true,
     },
   ],
   includeOverlay: true,

diff --git a/packages/ibm-products/src/components/FullPageError/preview-components/Breadcrumbs.js b/packages/ibm-products/src/components/FullPageError/preview-components/Breadcrumbs.js
@@ -12,44 +12,24 @@ import React from 'react';
 import { string } from 'prop-types';
 import { BreadcrumbWithOverflow } from '../../BreadcrumbWithOverflow';
 
+const makeCrumbs = (n) =>
+  Array.from(Array(n)).map((i, idx) => ({
+    href: '/#',
+    id: `id-${idx}`,
+    key: `${idx}`,
+    label: `Link ${idx}`,
+    onClick: () => {},
+  }));
+
 export const Breadcrumbs = ({ className }) => {
-  const breadcrumbs = [
-    {
-      href: '/#',
-      id: 'id-1',
-      key: '1',
-      label: 'Breadcrumb',
-      onClick: () => {},
-    },
-    {
-      href: '/#',
-      id: 'id-2',
-      key: '2',
-      label: 'Breadcrumb',
-      onClick: () => {},
-    },
-    {
-      href: '/#',
-      id: 'id-3',
-      key: '3',
-      label: 'Breadcrumb',
-      onClick: () => {},
-    },
-    {
-      href: '/#',
-      id: 'id-4',
-      key: '4',
-      label: 'Breadcrumb',
-      onClick: () => {},
-      title: 'Breadcrumb 4 title',
-    },
-  ];
+  const breadcrumbs = makeCrumbs(4);
 
   return (
     <BreadcrumbWithOverflow
       className={className}
       breadcrumbs={breadcrumbs}
       overflowAriaLabel="open breadcrumbs"
+      label="Breadcrumbs"
     />
   );
 };

diff --git a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx
@@ -766,6 +766,7 @@ export let NotificationsPanel = React.forwardRef(
                   renderIcon={(props) => <Settings size={16} {...props} />}
                   iconDescription={settingsIconDescription}
                   onClick={() => onSettingsClick()}
+                  hasIconOnly
                 />
               </div>
             ) : null}

diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx
@@ -293,6 +293,10 @@ interface PageHeaderBaseProps extends PropsWithChildren {
    * align breadcrumb overflow tooltip
    */
   breadcrumbOverflowTooltipAlign?: PopoverAlignment;
+  /**
+   * Label for the Breadcrumb component
+   */
+  breadcrumbLabel?: string;
   /**
    * Specifies class(es) to be applied to the top-level PageHeader node.
    * Optional.
@@ -428,6 +432,7 @@ export let PageHeader = React.forwardRef(
       allTagsModalTitle,
       hasBackgroundAlways: deprecated_hasBackgroundAlways,
       breadcrumbOverflowAriaLabel,
+      breadcrumbLabel,
       breadcrumbs,
       children,
       className,
@@ -955,6 +960,7 @@ export let PageHeader = React.forwardRef(
                           breadcrumbs={displayedBreadcrumbs}
                           overflowTooltipAlign={breadcrumbOverflowTooltipAlign}
                           maxVisible={undefined}
+                          label={breadcrumbLabel}
                         />
                       )}
                     </Column>