Merge branch 'main' into 18005-add-decorator-in-dataTable

.github/workflows/ci.yml

@@ -65,7 +65,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: '20.x'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         if: github.event_name != 'merge_group'
         id: cache
         with:
@@ -87,7 +87,7 @@ jobs:
       - name: Run tests
         run: yarn test --ci --collectCoverage
       - name: Upload coverage reports to Codecov with GitHub Action
-        uses: codecov/codecov-action@5c47607acb93fed5485fdbf7232e8a31425f672a # v5.0.2
+        uses: codecov/codecov-action@7f8b4b4bde536c465e797be725718b88c5d95e0e # v5.1.1
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
   e2e:
@@ -99,7 +99,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: '20.x'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         if: github.event_name != 'merge_group'
         id: cache
         with:
@@ -145,7 +145,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: '20.x'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         if: github.event_name != 'merge_group'
         id: cache
         with:
@@ -214,7 +214,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: '20.x'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         if: github.event_name != 'merge_group'
         id: cache
         with:
@@ -279,7 +279,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: '20.x'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         if: github.event_name != 'merge_group'
         id: cache
         with:

.github/workflows/v10-ci.yml

@@ -64,7 +64,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: '20.x'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         id: cache
         with:
           path: |
@@ -92,7 +92,7 @@ jobs:
         uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0
         with:
           node-version: '20.x'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         id: cache
         with:
           path: |

.github/workflows/version.yml

@@ -36,7 +36,7 @@ jobs:
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
-      - uses: actions/cache@6849a6489940f00c2f30c0fb92c6274307ccb58a # v4.1.2
+      - uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 # v4.2.0
         id: cache
         with:
           path: |

achecker.js

@@ -10,16 +10,18 @@
 const path = require('path');
 
 module.exports = {
-  ruleArchive: '17June2024',
+  ruleArchive: 'versioned',
   policies: ['Custom_Ruleset'],
   failLevels: ['violation'],
-  reportLevels: [
-    'violation',
-    'potentialviolation',
-    'recommendation',
-    'potentialrecommendation',
-    'manual',
-  ],
+  reportLevels: !process.env.CI
+    ? ['violation']
+    : [
+        'violation',
+        'potentialviolation',
+        'recommendation',
+        'potentialrecommendation',
+        'manual',
+      ],
   outputFormat: ['json'],
   outputFolder: path.join('.avt', 'reports'),
   baselineFolder: path.join('.avt', 'baseline'),

config/jest-config-carbon/matchers/toHaveNoACViolations.js

@@ -20,6 +20,9 @@ async function toHaveNoACViolations(node, label) {
       'html_skipnav_exists',
       'aria_content_in_landmark',
       'aria_child_tabbable',
+      'aria_attribute_conflict',
+      'label_name_visible',
+      'target_spacing_sufficient',
     ]);
     const ruleset = await aChecker.getRuleset('IBM_Accessibility');
     const customRuleset = JSON.parse(JSON.stringify(ruleset));

config/jest-config-carbon/package.json

@@ -27,7 +27,7 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/runtime": "^7.24.7",
-    "accessibility-checker": "^3.1.74",
+    "accessibility-checker": "^3.1.78",
     "axe-core": "^4.3.5",
     "babel-jest": "^28.1.0",
     "chalk": "^4.1.1",

e2e/components/AILabel/AILabel-test.avt.e2e.js

@@ -57,7 +57,7 @@ test.describe('@avt AILabel', () => {
       },
     });
     const slug = page.getByRole('button', {
-      name: 'AI - Show information',
+      name: 'AI Show information',
     });
     const callout = page.locator('.cds--popover--open');
     await expect(slug).toBeVisible();

package.json

@@ -51,15 +51,15 @@
     "@carbon/cli": "workspace:packages/cli",
     "@commitlint/cli": "^18.0.0",
     "@commitlint/config-conventional": "^18.0.0",
-    "@percy/cli": "^1.27.0",
-    "@percy/playwright": "^1.0.4",
+    "@percy/cli": "^1.30.4",
+    "@percy/playwright": "^1.0.7",
     "@playwright/test": "^1.36.2",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/react-is": "~18.3.0",
-    "accessibility-checker": "^3.1.48",
+    "accessibility-checker": "^3.1.78",
     "all-contributors-cli": "^6.19.0",
     "cross-env": "^7.0.0",
     "cross-spawn": "^7.0.0",

packages/grid/examples/css-grid/yarn.lock

@@ -811,11 +811,11 @@ __metadata:
   linkType: hard
 
 "nanoid@npm:^3.3.6":
-  version: 3.3.6
-  resolution: "nanoid@npm:3.3.6"
+  version: 3.3.8
+  resolution: "nanoid@npm:3.3.8"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: 8/7d0eda657002738aa5206107bd0580aead6c95c460ef1bdd0b1a87a9c7ae6277ac2e9b945306aaa5b32c6dcb7feaf462d0f552e7f8b5718abfc6ead5c94a71b3
+  checksum: 10/2d1766606cf0d6f47b6f0fdab91761bb81609b2e3d367027aff45e6ee7006f660fb7e7781f4a34799fe6734f1268eeed2e37a5fdee809ade0c2d4eb11b0f9c40
   languageName: node
   linkType: hard
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7459,6 +7459,9 @@ Map {
   },
   "SliderSkeleton" => Object {
     "propTypes": Object {
+      "ariaLabel": Object {
+        "type": "string",
+      },
       "className": Object {
         "type": "string",
       },
@@ -7468,6 +7471,9 @@ Map {
       "twoHandles": Object {
         "type": "bool",
       },
+      "unstable_ariaLabelHandleUpper": Object {
+        "type": "string",
+      },
     },
   },
   "Stack" => Object {

packages/react/src/components/AILabel/index.tsx

@@ -190,8 +190,8 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
 
     const ariaLabelText =
       !aiTextLabel && !textLabel
-        ? `${aiText} - ${slugLabel || ariaLabel}`
-        : `${aiText} - ${aiTextLabel || textLabel}`;
+        ? `${aiText} ${slugLabel || ariaLabel}`
+        : `${aiText} ${aiTextLabel || textLabel}`;
 
     return (
       <div className={aiLabelClasses} ref={ref} id={id}>

packages/react/src/components/ComposedModal/ComposedModal-test.js

@@ -376,7 +376,7 @@ describe('ComposedModal', () => {
     );
 
     expect(
-      screen.getByRole('button', { name: 'AI - Show information' })
+      screen.getByRole('button', { name: 'AI Show information' })
     ).toBeInTheDocument();
     spy.mockRestore();
   });

packages/react/src/components/NumberInput/__tests__/NumberInput-test.js

@@ -75,7 +75,7 @@ describe('NumberInput', () => {
     );
 
     expect(
-      screen.getByRole('button', { name: 'AI - Show information' })
+      screen.getByRole('button', { name: 'AI Show information' })
     ).toBeInTheDocument();
   });
 
@@ -84,7 +84,7 @@ describe('NumberInput', () => {
     render(<NumberInput label="test-label" id="test" slug={<AILabel />} />);
 
     expect(
-      screen.getByRole('button', { name: 'AI - Show information' })
+      screen.getByRole('button', { name: 'AI Show information' })
     ).toBeInTheDocument();
     spy.mockRestore();
   });

packages/react/src/components/Popover/Popover.stories.js

@@ -109,7 +109,7 @@ export const TabTip = () => {
         <PopoverContent className="p-3">
           <RadioButtonGroup
             style={{ alignItems: 'flex-start', flexDirection: 'column' }}
-            legendText="Row height"
+            legendText="Row height 1"
             name="radio-button-group"
             defaultSelected="small">
             <RadioButton labelText="Small" value="small" id="radio-small" />
@@ -146,7 +146,7 @@ export const TabTip = () => {
         <PopoverContent className="p-3">
           <RadioButtonGroup
             style={{ alignItems: 'flex-start', flexDirection: 'column' }}
-            legendText="Row height"
+            legendText="Row height 2"
             name="radio-button-group-2"
             defaultSelected="small-2">
             <RadioButton labelText="Small" value="small-2" id="radio-small-2" />

packages/react/src/components/Select/__tests__/Select-test.js

@@ -372,7 +372,10 @@ describe('Select', () => {
     it('should have no Accessibility Checker violations', async () => {
       const { container } = render(
         <main>
-          <Select id="select" labelText="Select">
+          <Select
+            id="select"
+            labelText="Select an option"
+            aria-label="Select an option">
             <SelectItem value="option-1" text="Option 1" />
             <SelectItem value="option-2" text="Option 2" />
           </Select>

packages/react/src/components/Slider/Slider.Skeleton.tsx

@@ -14,6 +14,16 @@ import classNames from 'classnames';
 import { LowerHandle, UpperHandle } from './SliderHandles';
 
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The `ariaLabel` for the handle icon.
+   */
+  ariaLabel?: string;
+
+  /**
+   * The `ariaLabel` for the upper bound slider handle when there are two handles.
+   */
+  unstable_ariaLabelHandleUpper?: string;
+
   /**
    * Specify an optional className to add to the form item wrapper.
    */
@@ -31,6 +41,8 @@ export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const SliderSkeleton = ({
+  ariaLabel = 'slider handle',
+  unstable_ariaLabelHandleUpper: ariaLabelHandleUpper = 'upper slider handle',
   hideLabel,
   className,
   twoHandles,
@@ -82,19 +94,19 @@ const SliderSkeleton = ({
           <div className={lowerThumbWrapperClasses}>
             <div className={lowerThumbClasses}>
               {twoHandles && !isRtl ? (
-                <LowerHandle />
+                <LowerHandle aria-label={ariaLabel} />
               ) : twoHandles && isRtl ? (
-                <UpperHandle />
+                <UpperHandle aria-label={ariaLabelHandleUpper} />
               ) : undefined}
             </div>
           </div>
           {twoHandles ? (
             <div className={upperThumbWrapperClasses}>
               <div className={upperThumbClasses}>
                 {twoHandles && !isRtl ? (
-                  <UpperHandle />
+                  <UpperHandle aria-label={ariaLabelHandleUpper} />
                 ) : twoHandles && isRtl ? (
-                  <LowerHandle />
+                  <LowerHandle aria-label={ariaLabel} />
                 ) : undefined}
               </div>
             </div>
@@ -107,6 +119,16 @@ const SliderSkeleton = ({
 };
 
 SliderSkeleton.propTypes = {
+  /**
+   * The `ariaLabel` for the handle icon.
+   */
+  ariaLabel: PropTypes.string,
+
+  /**
+   * The `ariaLabel` for the upper bound slider handle when there are two handles.
+   */
+  unstable_ariaLabelHandleUpper: PropTypes.string,
+
   /**
    * Specify an optional className to add to the form item wrapper.
    */

packages/react/src/components/Slider/Slider.tsx

@@ -1533,13 +1533,13 @@ class Slider extends PureComponent<SliderProps> {
                       }>
                       {twoHandles && !isRtl ? (
                         <>
-                          <LowerHandle />
-                          <LowerHandleFocus />
+                          <LowerHandle aria-label={ariaLabelInput} />
+                          <LowerHandleFocus aria-label={ariaLabelInput} />
                         </>
                       ) : twoHandles && isRtl ? (
                         <>
-                          <UpperHandle />
-                          <UpperHandleFocus />
+                          <UpperHandle aria-label={ariaLabelInputUpper} />
+                          <UpperHandleFocus aria-label={ariaLabelInputUpper} />
                         </>
                       ) : undefined}
                     </div>
@@ -1565,13 +1565,15 @@ class Slider extends PureComponent<SliderProps> {
                         }>
                         {twoHandles && !isRtl ? (
                           <>
-                            <UpperHandle />
-                            <UpperHandleFocus />
+                            <UpperHandle aria-label={ariaLabelInputUpper} />
+                            <UpperHandleFocus
+                              aria-label={ariaLabelInputUpper}
+                            />
                           </>
                         ) : twoHandles && isRtl ? (
                           <>
-                            <LowerHandle />
-                            <LowerHandleFocus />
+                            <LowerHandle aria-label={ariaLabelInput} />
+                            <LowerHandleFocus aria-label={ariaLabelInput} />
                           </>
                         ) : undefined}
                       </div>