test(accessibility-checker): update to versioned ruleArchive (#17351)

* test(accessibility-checker): update to versioned ruleset

* chore(accessibility-checker): update to 3.1.75

* chore(accessibility-checker): update to 3.1.75

* fix(inputprops): remove autoComplete property

* chore(deps): update to latest accessibility-checker

* add dep cache

* revert unintended file changes

* revert unintended file changes

* chore: yarn dedupe

* chore: update accessibility-checker to 3.1.77

* chore: fix a11y violations

* chore: wip

* fix: updated test, snapshots, yarn format

* chore: yarn format

* test: updated tests to match ariaLabelText

* chore(accessibility-checker): update to 3.1.78

* chore: adds cache

* refactor: added rules to denylist

* refactor: added rules to denylist

* chore: yarn dedupe

* chore: nx cache

* chore: removes .nx/cache files

* test: adds tests for SliderSkeleton

* refactor: revert scss change

---------

Co-authored-by: Nikhil Tomar <[email protected]>
Co-authored-by: Nikhil Tomar <[email protected]>

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

@@ -59,7 +59,7 @@
     "@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/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7448,6 +7448,9 @@ Map {
   },
   "SliderSkeleton" => Object {
     "propTypes": Object {
+      "ariaLabel": Object {
+        "type": "string",
+      },
       "className": Object {
         "type": "string",
       },
@@ -7457,6 +7460,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>

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

@@ -1,27 +1,29 @@
 import { PrefixContext } from '../../internal/usePrefix';
 import React from 'react';
 
-export const LowerHandle = () => (
+export const LowerHandle = (props) => (
   <PrefixContext.Consumer>
     {(prefix) => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 16 24"
-        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`}>
+        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower`}
+        {...props}>
         <path d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z" />
         <path fill="none" d="M-4 0h24v24H-4z" />
       </svg>
     )}
   </PrefixContext.Consumer>
 );
 
-export const LowerHandleFocus = () => (
+export const LowerHandleFocus = (props) => (
   <PrefixContext.Consumer>
     {(prefix) => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 16 24"
-        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`}>
+        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--lower ${prefix}--slider__thumb-icon--focus`}
+        {...props}>
         <path d="M15.08 6.46H16v11.08h-.92zM4.46 17.54c-.25 0-.46-.21-.46-.46V6.92a.465.465 0 0 1 .69-.4l8.77 5.08a.46.46 0 0 1 0 .8l-8.77 5.08c-.07.04-.15.06-.23.06Z" />
         <path fill="none" d="M-4 0h24v24H-4z" />
         <path d="M15.08 0H16v6.46h-.92z" />
@@ -32,27 +34,29 @@ export const LowerHandleFocus = () => (
   </PrefixContext.Consumer>
 );
 
-export const UpperHandle = () => (
+export const UpperHandle = (props) => (
   <PrefixContext.Consumer>
     {(prefix) => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 16 24"
-        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`}>
+        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper`}
+        {...props}>
         <path d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z" />
         <path fill="none" d="M-4 0h24v24H-4z" />
       </svg>
     )}
   </PrefixContext.Consumer>
 );
 
-export const UpperHandleFocus = () => (
+export const UpperHandleFocus = (props) => (
   <PrefixContext.Consumer>
     {(prefix) => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 16 24"
-        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`}>
+        className={`${prefix}--slider__thumb-icon ${prefix}--slider__thumb-icon--upper ${prefix}--slider__thumb-icon--focus`}
+        {...props}>
         <path d="M0 6.46h.92v11.08H0zM11.54 6.46c.25 0 .46.21.46.46v10.15a.465.465 0 0 1-.69.4L2.54 12.4a.46.46 0 0 1 0-.8l8.77-5.08c.07-.04.15-.06.23-.06Z" />
         <path fill="none" d="M-4 0h24v24H-4z" />
         <path d="M.92 24H0v-6.46h.92z" />

packages/react/src/components/Slider/Slider-test.js → packages/react/src/components/Slider/__test__/Slider-test.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Slider from './Slider';
+import Slider from '../Slider';
 import userEvent from '@testing-library/user-event';
 import { fireEvent, render, screen } from '@testing-library/react';
 
@@ -574,9 +574,9 @@ describe('Slider', () => {
     it('should render children as expected', () => {
       renderTwoHandleSlider();
       const lowerElems = screen.getAllByLabelText(defaultAriaLabelInput);
-      expect(lowerElems).toHaveLength(2);
+      expect(lowerElems).toHaveLength(4);
       const upperElems = screen.getAllByLabelText(defaultAriaLabelInputUpper);
-      expect(upperElems).toHaveLength(2);
+      expect(upperElems).toHaveLength(4);
     });
 
     it('should apply the expected classes', () => {

packages/react/src/components/Slider/__test__/SliderSkeleton-test.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SliderSkeleton from '../Slider.Skeleton';
+
+describe('SliderSkeleton', () => {
+  describe('behaves as expected - Component API', () => {
+    it('should apply the expected classes', () => {
+      const { container } = render(<SliderSkeleton />);
+      expect(container.firstChild.firstChild).toHaveClass(
+        'cds--label cds--skeleton'
+      );
+    });
+
+    it('should pass custom class via className', () => {
+      const customSliderClass = 'slider-custom-class';
+      const { container } = render(
+        <SliderSkeleton twoHandles={true} className={customSliderClass} />
+      );
+      expect(container.firstChild).toHaveClass(customSliderClass);
+    });
+
+    it('renders without label when hideLabel is true', () => {
+      const { container } = render(<SliderSkeleton hideLabel={true} />);
+      const label = container.querySelector('.cds--label.cds--skeleton');
+      expect(label).not.toBeInTheDocument();
+    });
+
+    describe('Accessibility labels', () => {
+      it('applies default aria labels', () => {
+        render(<SliderSkeleton twoHandles={true} />);
+        const lowerHandle = screen.getByLabelText('slider handle');
+        const upperHandle = screen.getByLabelText('upper slider handle');
+        expect(lowerHandle).toBeInTheDocument();
+        expect(upperHandle).toBeInTheDocument();
+      });
+
+      it('allows custom aria labels', () => {
+        render(
+          <SliderSkeleton
+            twoHandles={true}
+            ariaLabel="Custom Lower Handle"
+            unstable_ariaLabelHandleUpper="Custom Upper Handle"
+          />
+        );
+        const lowerHandle = screen.getByLabelText('Custom Lower Handle');
+        const upperHandle = screen.getByLabelText('Custom Upper Handle');
+        expect(lowerHandle).toBeInTheDocument();
+        expect(upperHandle).toBeInTheDocument();
+      });
+    });
+  });
+});