fix: update to Carbon 11 compatible versions to latest (carbon-design…

…-system#5664) * fix: update Carbon 11 compatible versions to latest * fix(tests): added waitForPosition * fix: address a11y issues in http error/full page error svgs * fix: a11y issue with coachmark beacon svg * chore: use title instead of aria-label for coachmark beacon * feat: add autoAlign prop to editable cell dropdown * fix: comment updates Co-authored-by: Alexander Melo <alexandermelox@gmail.com> --------- Co-authored-by: lee-chase <lee-chase@users.noreply.github.com> Co-authored-by: ariellalgilmore <ariellalgilmore@gmail.com> Co-authored-by: Alexander Melo <alexandermelox@gmail.com>
amal-k-joy · Aug 8, 2024 · aa77fed · aa77fed
1 parent 413b210
commit aa77fed
Show file tree

Hide file tree

Showing 24 changed files with 212 additions and 325 deletions.
diff --git a/config/stylelint-config-ibm-products/package.json b/config/stylelint-config-ibm-products/package.json
@@ -23,7 +23,7 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-no-unsupported-browser-features": "^7.0.0",
-    "stylelint-plugin-carbon-tokens": "^2.3.1",
+    "stylelint-plugin-carbon-tokens": "^2.8.0",
     "stylelint-use-logical": "^2.1.0"
   }
 }
diff --git a/package.json b/package.json
@@ -225,7 +225,7 @@
     ]
   },
   "dependencies": {
-    "stylelint-plugin-carbon-tokens": "2.3.1"
+    "stylelint-plugin-carbon-tokens": "2.8.0"
   },
   "packageManager": "yarn@4.0.2"
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -28,13 +28,13 @@
     "upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$)/'"
   },
   "devDependencies": {
-    "@carbon/grid": "^11.22.0",
+    "@carbon/grid": "^11.24.1",
     "@carbon/ibm-products-styles": "^2.43.0-rc.0",
-    "@carbon/layout": "^11.21.0",
-    "@carbon/motion": "^11.17.0",
-    "@carbon/react": "^1.60.3",
+    "@carbon/layout": "^11.23.1",
+    "@carbon/motion": "^11.19.1",
+    "@carbon/react": "^1.61.0",
     "@carbon/themes": "^11.37.1",
-    "@carbon/type": "^11.26.0",
+    "@carbon/type": "^11.28.1",
     "@storybook/addon-a11y": "^8.1.10",
     "@storybook/addon-actions": "^8.0.9",
     "@storybook/addon-controls": "^8.0.9",

diff --git a/packages/ibm-products-community/package.json b/packages/ibm-products-community/package.json
@@ -24,12 +24,12 @@
     "test": "jest --colors"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.22.0",
-    "@carbon/layout": "^11.21.0",
-    "@carbon/motion": "^11.17.0",
-    "@carbon/react": "^1.60.3",
+    "@carbon/grid": "^11.24.1",
+    "@carbon/layout": "^11.23.1",
+    "@carbon/motion": "^11.19.1",
+    "@carbon/react": "^1.61.0",
     "@carbon/themes": "^11.37.1",
-    "@carbon/type": "^11.26.0",
+    "@carbon/type": "^11.28.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/packages/ibm-products-styles/package.json b/packages/ibm-products-styles/package.json
@@ -61,11 +61,11 @@
     "yargs": "^17.7.2"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.22.0",
-    "@carbon/layout": "^11.21.0",
-    "@carbon/motion": "^11.17.0",
+    "@carbon/grid": "^11.24.1",
+    "@carbon/layout": "^11.23.1",
+    "@carbon/motion": "^11.19.1",
     "@carbon/themes": "^11.37.1",
-    "@carbon/type": "^11.26.0"
+    "@carbon/type": "^11.28.1"
   },
   "dependencies": {
     "@ibm/telemetry-js": "^1.5.0"

diff --git a/packages/ibm-products/package.json b/packages/ibm-products/package.json
@@ -111,12 +111,12 @@
     "react-window": "^1.8.10"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.22.0",
-    "@carbon/layout": "^11.21.0",
-    "@carbon/motion": "^11.17.0",
-    "@carbon/react": "^1.60.3",
+    "@carbon/grid": "^11.24.1",
+    "@carbon/layout": "^11.23.1",
+    "@carbon/motion": "^11.19.1",
+    "@carbon/react": "^1.61.0",
     "@carbon/themes": "^11.37.1",
-    "@carbon/type": "^11.26.0",
+    "@carbon/type": "^11.28.1",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   }

diff --git a/packages/ibm-products/src/components/AddSelect/AddSelect.test.js b/packages/ibm-products/src/components/AddSelect/AddSelect.test.js
@@ -7,6 +7,7 @@
 
 import { render, screen } from '@testing-library/react';
 import React from 'react';
+import { waitForPosition } from '../../global/js/utils/wait_for_position';
 import { AddSelect } from './AddSelect';
 import { pkg } from '../../settings';
 
@@ -159,6 +160,7 @@ describe(componentName, () => {
       },
     };
     render(<AddSelect {...newProps} />);
+    await waitForPosition();
     expect(screen.getByTitle('editor')).toBeInTheDocument();
   });
 

diff --git a/packages/ibm-products/src/components/AddSelect/AddSelectBody.test.js b/packages/ibm-products/src/components/AddSelect/AddSelectBody.test.js
@@ -12,6 +12,7 @@ import { pkg, carbon } from '../../settings';
 import { getGlobalFilterValues, normalize } from './add-select-utils';
 import { Document } from '@carbon/react/icons';
 import image from '../UserProfileImage/headshot.jpg'; // cspell:disable-line
+import { waitForPosition } from '../../global/js/utils/wait_for_position';
 
 const blockClass = `${pkg.prefix}--add-select`;
 const componentName = AddSelectBody.name;
@@ -345,6 +346,7 @@ describe(componentName, () => {
       onSubmit,
     };
     render(<AddSelectBody {...newProps} />);
+    await waitForPosition();
     const submitBtn = screen.getByText('Add');
     const opt1 = screen.getByLabelText('Kansas');
     fireEvent.click(opt1);

diff --git a/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.tsx b/packages/ibm-products/src/components/CoachmarkBeacon/CoachmarkBeacon.tsx
@@ -76,6 +76,7 @@ export let CoachmarkBeacon = React.forwardRef<
         className={`${blockClass}__target`}
       >
         <svg className={`${blockClass}__center`}>
+          <title>{label}</title>
           <circle r={1} cx={38} cy={38} />
         </svg>
       </button>

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -2337,11 +2337,11 @@ describe(componentName, () => {
       'Data was not found with the current filters applied. Change filters or clear filters to see other results.',
   };
 
-  it('should test basic interactions of filter panel', async () => {
+  it.only('should test basic interactions of filter panel', async () => {
     const user = userEvent.setup({
       advanceTimers: jest.advanceTimersByTime,
     });
-    const { keyboard } = user;
+    const { keyboard, type } = user;
     const dropdownOnChange = jest.fn();
     render(
       <FilteringUsage
@@ -2406,23 +2406,22 @@ describe(componentName, () => {
     await click(dropdownOption);
     expect(dropdownOnChange).toHaveBeenCalledTimes(1);
 
-    // Add beginning date but no end date, confirm no changes are made since we need a beginning and end date
-    const dateInput = screen.getAllByPlaceholderText('mm/dd/yyyy');
-    await click(dateInput[0]);
-    await keyboard('01/01/2024');
-    expect(dateInput[0].value).toEqual('01/01/2024');
     // Apply radio button change
     const designerRadio = screen.getByRole('radio', { name: 'Designer' });
     await click(designerRadio);
     expect(designerRadio.checked).toEqual(true);
     // Apply valid date filter
     const dateInputs = screen.getAllByPlaceholderText('mm/dd/yyyy');
     await click(dateInputs[0]);
-    await keyboard('01/01/2024');
-    await click(dateInputs[1]);
+    // Clear previously value from date input
+    dateInputs[0].setSelectionRange(0, dateInputs[0].value.length);
+    await type(dateInputs[0], '01/01/2024');
+    await keyboard('[Escape]');
+    await keyboard('[Tab]');
     await keyboard('01/02/2024');
-    expect(dateInput[0].value).toEqual('01/01/2024');
-    expect(dateInput[1].value).toEqual('01/02/2024');
+    await keyboard('[Escape]');
+    expect(dateInputs[0].value).toEqual('01/01/2024');
+    expect(dateInputs[1].value).toEqual('01/02/2024');
     // Reset to "Any" radio filter
     const anyRadio = screen.getByRole('radio', { name: 'Any' });
     await click(anyRadio);

diff --git a/...ducts/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js b/...ducts/src/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js
@@ -368,6 +368,7 @@ export const InlineEditCell = ({
           },
         }}
         ref={dropdownRef}
+        autoAlign
       />
     );
   };

diff --git a/packages/ibm-products/src/components/FullPageError/FullPageError.tsx b/packages/ibm-products/src/components/FullPageError/FullPageError.tsx
@@ -84,18 +84,25 @@ export let FullPageError = React.forwardRef<HTMLDivElement, FullPageErrorProps>(
     const errorData = {
       403: {
         svg: (
-          <Error403SVG className={`${blockClass}__svg ${blockClass}__403`} />
+          <Error403SVG
+            className={`${blockClass}__svg ${blockClass}__403`}
+            title={title}
+          />
         ),
       },
       404: {
         svg: (
-          <Error404SVG className={`${blockClass}__svg ${blockClass}__404`} />
+          <Error404SVG
+            className={`${blockClass}__svg ${blockClass}__404`}
+            title={title}
+          />
         ),
       },
       custom: {
         svg: (
           <ErrorGenericSVG
             className={`${blockClass}__svg ${blockClass}__custom`}
+            title={title}
           />
         ),
       },

diff --git a/packages/ibm-products/src/components/FullPageError/assets/Error403SVG.js b/packages/ibm-products/src/components/FullPageError/assets/Error403SVG.js
@@ -11,13 +11,14 @@ import React from 'react';
 // Other standard imports.
 import { string } from 'prop-types';
 
-export const Error403SVG = ({ className }) => {
+export const Error403SVG = ({ className, title }) => {
   return (
     <svg
       viewBox="0 0 750 570"
       fill="none"
       className={className}
       xmlns="http://www.w3.org/2000/svg"
+      aria-label={title}
     >
       <g clipPath="url(#clip0_0_2401)">
         <path
@@ -828,4 +829,5 @@ export const Error403SVG = ({ className }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 Error403SVG.propTypes = {
   className: string,
+  title: string,
 };
diff --git a/packages/ibm-products/src/components/FullPageError/assets/Error404SVG.js b/packages/ibm-products/src/components/FullPageError/assets/Error404SVG.js
@@ -11,13 +11,14 @@ import React from 'react';
 // Other standard imports.
 import { string } from 'prop-types';
 
-export const Error404SVG = ({ className }) => {
+export const Error404SVG = ({ className, title }) => {
   return (
     <svg
       viewBox="0 0 751 549"
       fill="none"
       className={className}
       xmlns="http://www.w3.org/2000/svg"
+      aria-label={title}
     >
       <g clipPath="url(#clip0_0_2285)">
         <path d="M103.296 290.22V153.267H612.488" fill="#F3F3F3" />
@@ -732,4 +733,5 @@ export const Error404SVG = ({ className }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 Error404SVG.propTypes = {
   className: string,
+  title: string,
 };
diff --git a/packages/ibm-products/src/components/FullPageError/assets/ErrorGenericSVG.js b/packages/ibm-products/src/components/FullPageError/assets/ErrorGenericSVG.js
@@ -11,13 +11,14 @@ import React from 'react';
 // Other standard imports.
 import { string } from 'prop-types';
 
-export const ErrorGenericSVG = ({ className }) => {
+export const ErrorGenericSVG = ({ className, title }) => {
   return (
     <svg
       viewBox="0 0 750 506"
       fill="none"
       className={className}
       xmlns="http://www.w3.org/2000/svg"
+      aria-label={title}
     >
       <g clipPath="url(#clip0_203_144)">
         <path
@@ -827,4 +828,5 @@ export const ErrorGenericSVG = ({ className }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 ErrorGenericSVG.propTypes = {
   className: string,
+  title: string,
 };
diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPError403/HTTPError403.tsx b/packages/ibm-products/src/components/HTTPErrors/HTTPError403/HTTPError403.tsx
@@ -77,7 +77,7 @@ export let HTTPError403 = React.forwardRef<HTMLDivElement, HTTPError403Props>(
         {...getDevtoolsProps(componentName)}
       >
         <HTTPErrorContent {...{ description, errorCodeLabel, title, links }} />
-        <HTTPErrorSvg403 className={`${blockClass}__image`} />
+        <HTTPErrorSvg403 className={`${blockClass}__image`} title={title} />
       </div>
     );
   }

diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPError404/HTTPError404.tsx b/packages/ibm-products/src/components/HTTPErrors/HTTPError404/HTTPError404.tsx
@@ -67,7 +67,7 @@ export let HTTPError404 = React.forwardRef<HTMLDivElement, HTTPError404Props>(
         {...getDevtoolsProps(componentName)}
       >
         <HTTPErrorContent {...{ description, errorCodeLabel, title, links }} />
-        <HTTPErrorSvg404 className={`${blockClass}__image`} />
+        <HTTPErrorSvg404 className={`${blockClass}__image`} title={title} />
       </div>
     );
   }

diff --git a/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.tsx b/packages/ibm-products/src/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.tsx
@@ -77,7 +77,7 @@ export let HTTPErrorOther = React.forwardRef(
         {...getDevtoolsProps(componentName)}
       >
         <HTTPErrorContent {...{ description, errorCodeLabel, title, links }} />
-        <HTTPErrorSvgOther className={`${blockClass}__image`} />
+        <HTTPErrorSvgOther title={title} className={`${blockClass}__image`} />
       </div>
     );
   }

diff --git a/packages/ibm-products/src/components/HTTPErrors/assets/HTTPErrorSvg403.js b/packages/ibm-products/src/components/HTTPErrors/assets/HTTPErrorSvg403.js
@@ -14,14 +14,15 @@ import { pkg } from '../../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--http-errors-403`;
-export const HTTPErrorSvg403 = ({ className }) => {
+export const HTTPErrorSvg403 = ({ className, title }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 1584 916"
       className={className}
       preserveAspectRatio="xMinYMax meet"
+      aria-label={title}
     >
       <defs>
         <clipPath id="prefix__clip-path">
@@ -1343,4 +1344,5 @@ export const HTTPErrorSvg403 = ({ className }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 HTTPErrorSvg403.propTypes = {
   className: string,
+  title: string,
 };
diff --git a/packages/ibm-products/src/components/HTTPErrors/assets/HTTPErrorSvg404.js b/packages/ibm-products/src/components/HTTPErrors/assets/HTTPErrorSvg404.js
@@ -14,14 +14,15 @@ import { pkg } from '../../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--http-errors-404`;
-export const HTTPErrorSvg404 = ({ className }) => {
+export const HTTPErrorSvg404 = ({ className, title }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 1584 916"
       className={className}
       preserveAspectRatio="xMinYMax meet"
+      aria-label={title}
     >
       <defs>
         <clipPath id="prefix__clip-path">
@@ -1218,4 +1219,5 @@ export const HTTPErrorSvg404 = ({ className }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 HTTPErrorSvg404.propTypes = {
   className: string,
+  title: string,
 };
diff --git a/packages/ibm-products/src/components/HTTPErrors/assets/HTTPErrorSvgOther.js b/packages/ibm-products/src/components/HTTPErrors/assets/HTTPErrorSvgOther.js
@@ -14,14 +14,15 @@ import { pkg } from '../../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--http-errors-other`;
-export const HTTPErrorSvgOther = ({ className }) => {
+export const HTTPErrorSvgOther = ({ className, title }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox="0 0 1584 916"
       className={className}
       preserveAspectRatio="xMinYMax meet"
+      aria-label={title}
     >
       <defs>
         <clipPath id="prefix__clip-path">
@@ -1239,4 +1240,5 @@ export const HTTPErrorSvgOther = ({ className }) => {
 // See https://www.npmjs.com/package/prop-types#usage.
 HTTPErrorSvgOther.propTypes = {
   className: string,
+  title: string,
 };
diff --git a/packages/ibm-products/src/components/SearchBar/SearchBar.test.js b/packages/ibm-products/src/components/SearchBar/SearchBar.test.js
@@ -9,6 +9,7 @@ import React from 'react';
 import { act, render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro
 
 import { pkg, carbon } from '../../settings';
+import { waitForPosition } from '../../global/js/utils/wait_for_position';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { SearchBar } from '.';
 
@@ -164,6 +165,7 @@ describe(componentName, () => {
 
   it('renders with selected scopes', async () => {
     renderComponent({ ...scopesDefaultProps });
+    await waitForPosition();
   });
 
   it.skip('select scope, type text, and calls submit with an expected object', async () => {