@patternfly/react-core 4.214.4 → 4.214.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.214.4",
+  "version": "4.214.5",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.65.4",
-    "@patternfly/react-styles": "^4.64.4",
-    "@patternfly/react-tokens": "^4.66.4",
+    "@patternfly/react-icons": "^4.65.5",
+    "@patternfly/react-styles": "^4.64.5",
+    "@patternfly/react-tokens": "^4.66.5",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "3d5b3c0c42f57a138b464cc5157654a9e430b8fe"
+  "gitHead": "f5ee87ffe8b88ade3018d145fba33f0579c85c61"
 }

package/src/components/Slider/Slider.tsx

@@ -61,6 +61,10 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   leftActions?: React.ReactNode;
   /** Actions placed to the right of the slider */
   rightActions?: React.ReactNode;
+  /** One or more id's to use for the slider thumb description */
+  'aria-describedby'?: string;
+  /** One or more id's to use for the slider thumb label */
+  'aria-labelledby'?: string;
 }
 
 const getPercentage = (current: number, max: number) => (100 * current) / max;
@@ -86,6 +90,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   max = 100,
   showTicks = false,
   showBoundaries = true,
+  'aria-describedby': ariaDescribedby,
+  'aria-labelledby': ariaLabelledby,
   ...props
 }: SliderProps) => {
   const sliderRailRef = React.useRef<HTMLDivElement>();
@@ -362,6 +368,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       aria-valuetext={findAriaTextValue()}
       aria-label={thumbAriaLabel}
       aria-disabled={isDisabled}
+      aria-describedby={ariaDescribedby}
+      aria-labelledby={ariaLabelledby}
       onMouseDown={!isDisabled ? handleMouseDown : null}
       onTouchStart={!isDisabled ? handleTouchStart : null}
       onKeyDown={!isDisabled ? handleThumbKeys : null}

package/src/components/Slider/_tests_/Slider.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Slider } from '../Slider';
 import { Button } from '../../Button';
 
@@ -79,3 +79,29 @@ describe('slider', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+test('renders slider with aria-labelledby', () => {
+  render(
+    <>
+      <p id="test">label text</p>
+      <Slider value={50} aria-labelledby="test" />
+    </>
+  );
+
+  const slider = screen.getByRole('slider', { name: 'label text' });
+
+  expect(slider).toBeVisible();
+});
+
+test('renders slider with aria-describedby', () => {
+  render(
+    <>
+      <p id="test">descriptive text about the slider</p>
+      <Slider value={50} aria-describedby="test" />
+    </>
+  );
+
+  const slider = screen.getByRole('slider', { description: 'descriptive text about the slider' });
+
+  expect(slider).toBeVisible();
+});