From 102e9ac7bcdb160ef308ed52712f087755b240c1 Mon Sep 17 00:00:00 2001
From: "blake.vandercar" <blake.vandercar@validatek.com>
Date: Tue, 12 Jul 2022 14:31:19 -0600
Subject: [PATCH 1/9] improve slider a11y

---
 packages/core/src/components/slider/handle.tsx |  8 +++++++-
 .../core/src/components/slider/handleProps.tsx |  3 +++
 .../core/src/components/slider/multiSlider.tsx |  3 ++-
 .../core/src/components/slider/rangeSlider.tsx | 18 +++++++++++++++---
 packages/core/src/components/slider/slider.tsx |  6 +++++-
 packages/core/src/components/slider/sliders.md | 13 +++++++++++--
 .../demo-app/src/examples/SliderExample.tsx    | 11 ++++++++++-
 .../core-examples/breadcrumbsExample.tsx       |  1 +
 .../src/examples/core-examples/cardExample.tsx |  1 +
 .../core-examples/collapsibleListExample.tsx   |  1 +
 .../src/examples/core-examples/iconExample.tsx |  1 +
 .../core-examples/multiSliderExample.tsx       |  4 ++++
 .../examples/core-examples/progressExample.tsx |  1 +
 .../core-examples/rangeSliderExample.tsx       |  1 +
 .../examples/core-examples/sliderExample.tsx   |  3 +++
 .../examples/core-examples/spinnerExample.tsx  |  2 ++
 16 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components/slider/handle.tsx b/packages/core/src/components/slider/handle.tsx
index c1940aaff3f..b1903479b33 100644
--- a/packages/core/src/components/slider/handle.tsx
+++ b/packages/core/src/components/slider/handle.tsx
@@ -67,7 +67,7 @@ export class Handle extends AbstractPureComponent2<IInternalHandleProps, IHandle
     }
 
     public render() {
-        const { className, disabled, label } = this.props;
+        const { className, disabled, label, min, max, value, vertical, ariaLabel } = this.props;
         const { isMoving } = this.state;
 
         return (
@@ -80,6 +80,12 @@ export class Handle extends AbstractPureComponent2<IInternalHandleProps, IHandle
                 ref={this.refHandlers.handle}
                 style={this.getStyleProperties()}
                 tabIndex={0}
+                role="slider"
+                aria-valuemin={min}
+                aria-valuemax={max}
+                aria-valuenow={value}
+                aria-label={ariaLabel}
+                aria-orientation={vertical ? "vertical" : "horizontal"}
             >
                 {label == null ? null : <span className={Classes.SLIDER_LABEL}>{label}</span>}
             </span>
diff --git a/packages/core/src/components/slider/handleProps.tsx b/packages/core/src/components/slider/handleProps.tsx
index 49aa8a6fb85..2286cbe0cd8 100644
--- a/packages/core/src/components/slider/handleProps.tsx
+++ b/packages/core/src/components/slider/handleProps.tsx
@@ -89,4 +89,7 @@ export interface IHandleProps extends Props {
      * @default "full"
      */
     type?: HandleType;
+
+    /** Applied to `aria-label` prop of the handle `span` element */
+    ariaLabel?: string;
 }
diff --git a/packages/core/src/components/slider/multiSlider.tsx b/packages/core/src/components/slider/multiSlider.tsx
index 83730ed2e85..a45933f0c30 100644
--- a/packages/core/src/components/slider/multiSlider.tsx
+++ b/packages/core/src/components/slider/multiSlider.tsx
@@ -310,8 +310,9 @@ export class MultiSlider extends AbstractPureComponent2<MultiSliderProps, ISlide
             return null;
         }
 
-        return handleProps.map(({ value, type, className }, index) => (
+        return handleProps.map(({ value, type, className, ariaLabel }, index) => (
             <Handle
+                ariaLabel={ariaLabel}
                 className={classNames(
                     {
                         [Classes.START]: type === HandleType.START,
diff --git a/packages/core/src/components/slider/rangeSlider.tsx b/packages/core/src/components/slider/rangeSlider.tsx
index 2abfcc5ab03..10c2c4aba7a 100644
--- a/packages/core/src/components/slider/rangeSlider.tsx
+++ b/packages/core/src/components/slider/rangeSlider.tsx
@@ -44,6 +44,9 @@ export interface IRangeSliderProps extends ISliderBaseProps {
 
     /** Callback invoked when a handle is released. */
     onRelease?(value: NumberRange): void;
+
+    /** Applied to `aria-label` props of the slider Handles */
+    handleAriaLabels?: { startAriaLabel: string; endAriaLabel: string };
 }
 
 export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
@@ -56,11 +59,20 @@ export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.RangeSlider`;
 
     public render() {
-        const { value, ...props } = this.props;
+        const { value, handleAriaLabels, ...props } = this.props;
         return (
             <MultiSlider {...props}>
-                <MultiSlider.Handle value={value![RangeIndex.START]} type="start" intentAfter={props.intent} />
-                <MultiSlider.Handle value={value![RangeIndex.END]} type="end" />
+                <MultiSlider.Handle
+                    value={value![RangeIndex.START]}
+                    type="start"
+                    intentAfter={props.intent}
+                    ariaLabel={handleAriaLabels ? handleAriaLabels.startAriaLabel : undefined}
+                />
+                <MultiSlider.Handle
+                    value={value![RangeIndex.END]}
+                    type="end"
+                    ariaLabel={handleAriaLabels ? handleAriaLabels.endAriaLabel : undefined}
+                />
             </MultiSlider>
         );
     }
diff --git a/packages/core/src/components/slider/slider.tsx b/packages/core/src/components/slider/slider.tsx
index 4015a414c43..b27fa586ac3 100644
--- a/packages/core/src/components/slider/slider.tsx
+++ b/packages/core/src/components/slider/slider.tsx
@@ -44,6 +44,9 @@ export interface ISliderProps extends ISliderBaseProps {
 
     /** Callback invoked when the handle is released. */
     onRelease?(value: number): void;
+
+    /** Applied to `aria-label` prop of the slider Handle. */
+    handleAriaLabel?: string;
 }
 
 export class Slider extends AbstractPureComponent2<SliderProps> {
@@ -57,7 +60,7 @@ export class Slider extends AbstractPureComponent2<SliderProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Slider`;
 
     public render() {
-        const { initialValue, intent, value, onChange, onRelease, ...props } = this.props;
+        const { initialValue, intent, value, onChange, onRelease, handleAriaLabel, ...props } = this.props;
         return (
             <MultiSlider {...props}>
                 <MultiSlider.Handle
@@ -66,6 +69,7 @@ export class Slider extends AbstractPureComponent2<SliderProps> {
                     intentBefore={value! >= initialValue! ? intent : undefined}
                     onChange={onChange}
                     onRelease={onRelease}
+                    ariaLabel={handleAriaLabel}
                 />
                 <MultiSlider.Handle value={initialValue!} interactionKind="none" />
             </MultiSlider>
diff --git a/packages/core/src/components/slider/sliders.md b/packages/core/src/components/slider/sliders.md
index c3e7bde1051..0730828ee3c 100644
--- a/packages/core/src/components/slider/sliders.md
+++ b/packages/core/src/components/slider/sliders.md
@@ -55,8 +55,17 @@ elements, each with their own `value` and other properties.
 ```tsx
 // RangeSlider looks roughly like this:
 <MultiSlider onChange={...}>
-    <MultiSlider.Handle value={startValue} type="start" intentAfter={Intent.PRIMARY} />
-    <MultiSlider.Handle value={endValue} type="end" />
+    <MultiSlider.Handle
+        value={startValue}
+        type="start"
+        intentAfter={Intent.PRIMARY}
+        ariaLabel={handleAriaLabels.startAriaLabel}
+    />
+    <MultiSlider.Handle
+        value={endValue}
+        type="end"
+        ariaLabel={handleAriaLabels.endAriaLabel}
+    />
 </MultiSlider>
 ```
 
diff --git a/packages/demo-app/src/examples/SliderExample.tsx b/packages/demo-app/src/examples/SliderExample.tsx
index 83f5efc79d6..d12013312b9 100644
--- a/packages/demo-app/src/examples/SliderExample.tsx
+++ b/packages/demo-app/src/examples/SliderExample.tsx
@@ -44,8 +44,17 @@ export class SliderExample extends React.PureComponent<Record<string, unknown>,
                         labelStepSize={10}
                         onChange={this.getChangeHandler("value")}
                         value={this.state.value}
+                        handleAriaLabel="example 1"
+                    />
+                    <Slider
+                        disabled={true}
+                        min={0}
+                        max={10}
+                        stepSize={0.1}
+                        labelStepSize={10}
+                        value={5}
+                        handleAriaLabel="example 2"
                     />
-                    <Slider disabled={true} min={0} max={10} stepSize={0.1} labelStepSize={10} value={5} />
                 </ExampleCard>
             </div>
         );
diff --git a/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx b/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
index 657773f660c..472b54745c8 100644
--- a/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
@@ -103,6 +103,7 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
                     onChange={this.handleChangeWidth}
                     showTrackFill={false}
                     value={this.state.width}
+                    handleAriaLabel="breadcrumb width"
                 />
             </>
         );
diff --git a/packages/docs-app/src/examples/core-examples/cardExample.tsx b/packages/docs-app/src/examples/core-examples/cardExample.tsx
index a3edd1482ef..d3366816545 100644
--- a/packages/docs-app/src/examples/core-examples/cardExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/cardExample.tsx
@@ -42,6 +42,7 @@ export class CardExample extends React.PureComponent<IExampleProps, ICardExample
                         showTrackFill={false}
                         value={this.state.elevation}
                         onChange={this.handleElevationChange}
+                        handleAriaLabel="card elevation"
                     />
                 </Label>
             </>
diff --git a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx b/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
index e4cb9c3bfb2..f69b2614bb4 100644
--- a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
@@ -58,6 +58,7 @@ export class CollapsibleListExample extends React.PureComponent<IExampleProps, I
                     onChange={this.handleChangeCount}
                     showTrackFill={false}
                     value={this.state.visibleItemCount}
+                    handleAriaLabel="number of visible items"
                 />
                 <RadioGroup
                     name="collapseFrom"
diff --git a/packages/docs-app/src/examples/core-examples/iconExample.tsx b/packages/docs-app/src/examples/core-examples/iconExample.tsx
index 2647797d33d..e09863c71be 100644
--- a/packages/docs-app/src/examples/core-examples/iconExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/iconExample.tsx
@@ -58,6 +58,7 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
                     showTrackFill={false}
                     value={iconSize}
                     onChange={this.handleIconSizeChange}
+                    handleAriaLabel="icon size"
                 />
             </>
         );
diff --git a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
index ee1d8d9a880..e05af078472 100644
--- a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
@@ -87,6 +87,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.dangerStart}
                             intentBefore="danger"
                             interactionKind={interactionKind}
+                            ariaLabel="danger start"
                         />
                     )}
                     {showWarning && (
@@ -95,6 +96,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.warningStart}
                             intentBefore="warning"
                             interactionKind={interactionKind}
+                            ariaLabel="warning start"
                         />
                     )}
                     {showWarning && (
@@ -103,6 +105,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.warningEnd}
                             intentAfter="warning"
                             interactionKind={interactionKind}
+                            ariaLabel="warning end"
                         />
                     )}
                     {showDanger && (
@@ -111,6 +114,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.dangerEnd}
                             intentAfter="danger"
                             interactionKind={interactionKind}
+                            ariaLabel="danger end"
                         />
                     )}
                 </MultiSlider>
diff --git a/packages/docs-app/src/examples/core-examples/progressExample.tsx b/packages/docs-app/src/examples/core-examples/progressExample.tsx
index 5e46aa07f94..b4029241166 100644
--- a/packages/docs-app/src/examples/core-examples/progressExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/progressExample.tsx
@@ -55,6 +55,7 @@ export class ProgressExample extends React.PureComponent<IExampleProps, IProgres
                     stepSize={0.1}
                     showTrackFill={false}
                     value={value}
+                    handleAriaLabel="progressbar value"
                 />
             </>
         );
diff --git a/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx b/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
index 08e0e7d1cbd..8dbbeff1e68 100644
--- a/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
@@ -51,6 +51,7 @@ export class RangeSliderExample extends React.PureComponent<IExampleProps, IRang
                     onChange={this.handleValueChange}
                     value={range}
                     vertical={vertical}
+                    handleAriaLabels={{ startAriaLabel: "example start", endAriaLabel: "example end" }}
                 />
             </Example>
         );
diff --git a/packages/docs-app/src/examples/core-examples/sliderExample.tsx b/packages/docs-app/src/examples/core-examples/sliderExample.tsx
index ab129bbc3e8..220953a4928 100644
--- a/packages/docs-app/src/examples/core-examples/sliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/sliderExample.tsx
@@ -55,6 +55,7 @@ export class SliderExample extends React.PureComponent<IExampleProps, ISliderExa
                     onChange={this.getChangeHandler("value2")}
                     value={this.state.value2}
                     vertical={vertical}
+                    handleAriaLabel="example 1"
                 />
                 <Slider
                     min={0}
@@ -65,6 +66,7 @@ export class SliderExample extends React.PureComponent<IExampleProps, ISliderExa
                     labelRenderer={this.renderLabel2}
                     value={this.state.value1}
                     vertical={vertical}
+                    handleAriaLabel="example 2"
                 />
                 <Slider
                     min={-12}
@@ -76,6 +78,7 @@ export class SliderExample extends React.PureComponent<IExampleProps, ISliderExa
                     showTrackFill={false}
                     value={this.state.value3}
                     vertical={vertical}
+                    handleAriaLabel="example 3"
                 />
             </Example>
         );
diff --git a/packages/docs-app/src/examples/core-examples/spinnerExample.tsx b/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
index a59936fb7dc..8976f120ba0 100644
--- a/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
@@ -68,6 +68,7 @@ export class SpinnerExample extends React.PureComponent<IExampleProps, ISpinnerE
                     stepSize={5}
                     value={size}
                     onChange={this.handleSizeChange}
+                    handleAriaLabel="spinner size"
                 />
                 <Switch checked={hasValue} label="Known value" onChange={this.handleIndeterminateChange} />
                 <Slider
@@ -80,6 +81,7 @@ export class SpinnerExample extends React.PureComponent<IExampleProps, ISpinnerE
                     stepSize={0.1}
                     showTrackFill={false}
                     value={value}
+                    handleAriaLabel="spinner value"
                 />
             </>
         );

From 4bd6db1e2073a3d4c5b78a160bac98766fec90f9 Mon Sep 17 00:00:00 2001
From: bvandercar-vt <87083504+bvandercar-vt@users.noreply.github.com>
Date: Tue, 19 Jul 2022 14:43:12 -0600
Subject: [PATCH 2/9] Update
 packages/core/src/components/slider/handleProps.tsx

Co-authored-by: Adi Dahiya <adi.dahiya14@gmail.com>
---
 packages/core/src/components/slider/handleProps.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/slider/handleProps.tsx b/packages/core/src/components/slider/handleProps.tsx
index 2286cbe0cd8..90aaefbb359 100644
--- a/packages/core/src/components/slider/handleProps.tsx
+++ b/packages/core/src/components/slider/handleProps.tsx
@@ -90,6 +90,6 @@ export interface IHandleProps extends Props {
      */
     type?: HandleType;
 
-    /** Applied to `aria-label` prop of the handle `span` element */
+    /** Accessible label text for this handle element. */
     ariaLabel?: string;
 }

From 6e2e88bc4e025f69b47143d0b04cebf10e658dea Mon Sep 17 00:00:00 2001
From: "blake.vandercar" <blake.vandercar@validatek.com>
Date: Tue, 19 Jul 2022 15:33:34 -0600
Subject: [PATCH 3/9] refactor: handleHtmlProps

---
 packages/core/src/components/slider/handle.tsx           | 8 ++++----
 packages/core/src/components/slider/handleProps.tsx      | 8 ++++++--
 packages/core/src/components/slider/multiSlider.tsx      | 4 ++--
 packages/core/src/components/slider/rangeSlider.tsx      | 9 +++++----
 packages/core/src/components/slider/slider.tsx           | 8 ++++----
 packages/core/src/components/slider/sliders.md           | 4 ++--
 packages/demo-app/src/examples/SliderExample.tsx         | 4 ++--
 .../src/examples/core-examples/breadcrumbsExample.tsx    | 6 ++++--
 .../docs-app/src/examples/core-examples/cardExample.tsx  | 2 +-
 .../examples/core-examples/collapsibleListExample.tsx    | 6 ++++--
 .../docs-app/src/examples/core-examples/iconExample.tsx  | 6 ++++--
 .../src/examples/core-examples/multiSliderExample.tsx    | 8 ++++----
 .../src/examples/core-examples/progressExample.tsx       | 2 +-
 .../src/examples/core-examples/rangeSliderExample.tsx    | 2 +-
 .../src/examples/core-examples/sliderExample.tsx         | 6 +++---
 .../src/examples/core-examples/spinnerExample.tsx        | 8 +++++---
 16 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/packages/core/src/components/slider/handle.tsx b/packages/core/src/components/slider/handle.tsx
index b1903479b33..3ceeba28356 100644
--- a/packages/core/src/components/slider/handle.tsx
+++ b/packages/core/src/components/slider/handle.tsx
@@ -67,11 +67,14 @@ export class Handle extends AbstractPureComponent2<IInternalHandleProps, IHandle
     }
 
     public render() {
-        const { className, disabled, label, min, max, value, vertical, ariaLabel } = this.props;
+        const { className, disabled, label, min, max, value, vertical, handleHtmlProps } = this.props;
         const { isMoving } = this.state;
 
         return (
             <span
+                role="slider"
+                tabIndex={0}
+                {...handleHtmlProps}
                 className={classNames(Classes.SLIDER_HANDLE, { [Classes.ACTIVE]: isMoving }, className)}
                 onKeyDown={disabled ? undefined : this.handleKeyDown}
                 onKeyUp={disabled ? undefined : this.handleKeyUp}
@@ -79,12 +82,9 @@ export class Handle extends AbstractPureComponent2<IInternalHandleProps, IHandle
                 onTouchStart={disabled ? undefined : this.beginHandleTouchMovement}
                 ref={this.refHandlers.handle}
                 style={this.getStyleProperties()}
-                tabIndex={0}
-                role="slider"
                 aria-valuemin={min}
                 aria-valuemax={max}
                 aria-valuenow={value}
-                aria-label={ariaLabel}
                 aria-orientation={vertical ? "vertical" : "horizontal"}
             >
                 {label == null ? null : <span className={Classes.SLIDER_LABEL}>{label}</span>}
diff --git a/packages/core/src/components/slider/handleProps.tsx b/packages/core/src/components/slider/handleProps.tsx
index 90aaefbb359..024465091c9 100644
--- a/packages/core/src/components/slider/handleProps.tsx
+++ b/packages/core/src/components/slider/handleProps.tsx
@@ -47,6 +47,8 @@ export const HandleInteractionKind = {
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type HandleInteractionKind = typeof HandleInteractionKind[keyof typeof HandleInteractionKind];
 
+export type HandleHtmlProps = React.HTMLProps<HTMLSpanElement>;
+
 // eslint-disable-next-line deprecation/deprecation
 export type HandleProps = IHandleProps;
 /** @deprecated use HandleProps */
@@ -90,6 +92,8 @@ export interface IHandleProps extends Props {
      */
     type?: HandleType;
 
-    /** Accessible label text for this handle element. */
-    ariaLabel?: string;
+    /**
+     * HTML props to apply to the Handle
+     */
+    handleHtmlProps?: HandleHtmlProps;
 }
diff --git a/packages/core/src/components/slider/multiSlider.tsx b/packages/core/src/components/slider/multiSlider.tsx
index a45933f0c30..bf66779976b 100644
--- a/packages/core/src/components/slider/multiSlider.tsx
+++ b/packages/core/src/components/slider/multiSlider.tsx
@@ -310,9 +310,9 @@ export class MultiSlider extends AbstractPureComponent2<MultiSliderProps, ISlide
             return null;
         }
 
-        return handleProps.map(({ value, type, className, ariaLabel }, index) => (
+        return handleProps.map(({ value, type, className, handleHtmlProps }, index) => (
             <Handle
-                ariaLabel={ariaLabel}
+                handleHtmlProps={handleHtmlProps}
                 className={classNames(
                     {
                         [Classes.START]: type === HandleType.START,
diff --git a/packages/core/src/components/slider/rangeSlider.tsx b/packages/core/src/components/slider/rangeSlider.tsx
index 10c2c4aba7a..d70c7689164 100644
--- a/packages/core/src/components/slider/rangeSlider.tsx
+++ b/packages/core/src/components/slider/rangeSlider.tsx
@@ -19,6 +19,7 @@ import * as React from "react";
 import { AbstractPureComponent2, Intent } from "../../common";
 import * as Errors from "../../common/errors";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
+import { HandleHtmlProps } from "./handleProps";
 import { ISliderBaseProps, MultiSlider } from "./multiSlider";
 
 export type NumberRange = [number, number];
@@ -46,7 +47,7 @@ export interface IRangeSliderProps extends ISliderBaseProps {
     onRelease?(value: NumberRange): void;
 
     /** Applied to `aria-label` props of the slider Handles */
-    handleAriaLabels?: { startAriaLabel: string; endAriaLabel: string };
+    handleHtmlProps?: { start: HandleHtmlProps; end: HandleHtmlProps };
 }
 
 export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
@@ -59,19 +60,19 @@ export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.RangeSlider`;
 
     public render() {
-        const { value, handleAriaLabels, ...props } = this.props;
+        const { value, handleHtmlProps, ...props } = this.props;
         return (
             <MultiSlider {...props}>
                 <MultiSlider.Handle
                     value={value![RangeIndex.START]}
                     type="start"
                     intentAfter={props.intent}
-                    ariaLabel={handleAriaLabels ? handleAriaLabels.startAriaLabel : undefined}
+                    handleHtmlProps={handleHtmlProps ? handleHtmlProps.start : undefined}
                 />
                 <MultiSlider.Handle
                     value={value![RangeIndex.END]}
                     type="end"
-                    ariaLabel={handleAriaLabels ? handleAriaLabels.endAriaLabel : undefined}
+                    handleHtmlProps={handleHtmlProps ? handleHtmlProps.end : undefined}
                 />
             </MultiSlider>
         );
diff --git a/packages/core/src/components/slider/slider.tsx b/packages/core/src/components/slider/slider.tsx
index b27fa586ac3..a634d6b4e3f 100644
--- a/packages/core/src/components/slider/slider.tsx
+++ b/packages/core/src/components/slider/slider.tsx
@@ -18,6 +18,7 @@ import * as React from "react";
 
 import { AbstractPureComponent2, Intent } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
+import { HandleHtmlProps, HandleProps } from "./handleProps";
 import { ISliderBaseProps, MultiSlider } from "./multiSlider";
 
 // eslint-disable-next-line deprecation/deprecation
@@ -45,8 +46,7 @@ export interface ISliderProps extends ISliderBaseProps {
     /** Callback invoked when the handle is released. */
     onRelease?(value: number): void;
 
-    /** Applied to `aria-label` prop of the slider Handle. */
-    handleAriaLabel?: string;
+    handleHtmlProps?: HandleHtmlProps;
 }
 
 export class Slider extends AbstractPureComponent2<SliderProps> {
@@ -60,7 +60,7 @@ export class Slider extends AbstractPureComponent2<SliderProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Slider`;
 
     public render() {
-        const { initialValue, intent, value, onChange, onRelease, handleAriaLabel, ...props } = this.props;
+        const { initialValue, intent, value, onChange, onRelease, handleHtmlProps, ...props } = this.props;
         return (
             <MultiSlider {...props}>
                 <MultiSlider.Handle
@@ -69,7 +69,7 @@ export class Slider extends AbstractPureComponent2<SliderProps> {
                     intentBefore={value! >= initialValue! ? intent : undefined}
                     onChange={onChange}
                     onRelease={onRelease}
-                    ariaLabel={handleAriaLabel}
+                    handleHtmlProps={handleHtmlProps}
                 />
                 <MultiSlider.Handle value={initialValue!} interactionKind="none" />
             </MultiSlider>
diff --git a/packages/core/src/components/slider/sliders.md b/packages/core/src/components/slider/sliders.md
index 0730828ee3c..e74ec5f4e84 100644
--- a/packages/core/src/components/slider/sliders.md
+++ b/packages/core/src/components/slider/sliders.md
@@ -59,12 +59,12 @@ elements, each with their own `value` and other properties.
         value={startValue}
         type="start"
         intentAfter={Intent.PRIMARY}
-        ariaLabel={handleAriaLabels.startAriaLabel}
+        handleHtmlProps={handleHtmlProps.start}
     />
     <MultiSlider.Handle
         value={endValue}
         type="end"
-        ariaLabel={handleAriaLabels.endAriaLabel}
+        handleHtmlProps={handleHtmlProps.end}
     />
 </MultiSlider>
 ```
diff --git a/packages/demo-app/src/examples/SliderExample.tsx b/packages/demo-app/src/examples/SliderExample.tsx
index d12013312b9..db82fbe5db7 100644
--- a/packages/demo-app/src/examples/SliderExample.tsx
+++ b/packages/demo-app/src/examples/SliderExample.tsx
@@ -44,7 +44,7 @@ export class SliderExample extends React.PureComponent<Record<string, unknown>,
                         labelStepSize={10}
                         onChange={this.getChangeHandler("value")}
                         value={this.state.value}
-                        handleAriaLabel="example 1"
+                        handleHtmlProps={{ "aria-label": "example 1" }}
                     />
                     <Slider
                         disabled={true}
@@ -53,7 +53,7 @@ export class SliderExample extends React.PureComponent<Record<string, unknown>,
                         stepSize={0.1}
                         labelStepSize={10}
                         value={5}
-                        handleAriaLabel="example 2"
+                        handleHtmlProps={{ "aria-label": "example 2" }}
                     />
                 </ExampleCard>
             </div>
diff --git a/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx b/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
index 472b54745c8..eaf0afc50b5 100644
--- a/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/breadcrumbsExample.tsx
@@ -70,6 +70,8 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
         this.setState({ collapseFrom: collapseFrom as Boundary }),
     );
 
+    private breadcrumbWidthLabelId = "num-visible-items-label";
+
     public render() {
         const options = (
             <>
@@ -95,7 +97,7 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
                     checked={this.state.renderCurrentAsInput}
                 />
                 <H5>Example</H5>
-                <Label>Width</Label>
+                <Label id={this.breadcrumbWidthLabelId}>Width</Label>
                 <Slider
                     labelRenderer={this.renderLabel}
                     labelStepSize={50}
@@ -103,7 +105,7 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
                     onChange={this.handleChangeWidth}
                     showTrackFill={false}
                     value={this.state.width}
-                    handleAriaLabel="breadcrumb width"
+                    handleHtmlProps={{ "aria-labelledby": this.breadcrumbWidthLabelId }}
                 />
             </>
         );
diff --git a/packages/docs-app/src/examples/core-examples/cardExample.tsx b/packages/docs-app/src/examples/core-examples/cardExample.tsx
index d3366816545..52f31615d51 100644
--- a/packages/docs-app/src/examples/core-examples/cardExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/cardExample.tsx
@@ -42,7 +42,7 @@ export class CardExample extends React.PureComponent<IExampleProps, ICardExample
                         showTrackFill={false}
                         value={this.state.elevation}
                         onChange={this.handleElevationChange}
-                        handleAriaLabel="card elevation"
+                        handleHtmlProps={{ "aria-label": "card elevation" }}
                     />
                 </Label>
             </>
diff --git a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx b/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
index f69b2614bb4..c32d72bb613 100644
--- a/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/collapsibleListExample.tsx
@@ -48,17 +48,19 @@ export class CollapsibleListExample extends React.PureComponent<IExampleProps, I
 
     private handleChangeCollapse = handleValueChange((collapseFrom: Boundary) => this.setState({ collapseFrom }));
 
+    private numVisibleItemsLabelId = "num-visible-items-label";
+
     public render() {
         const options = (
             <>
                 <H5>Props</H5>
-                <Label>Visible items</Label>
+                <Label id={this.numVisibleItemsLabelId}>Visible items</Label>
                 <Slider
                     max={6}
                     onChange={this.handleChangeCount}
                     showTrackFill={false}
                     value={this.state.visibleItemCount}
-                    handleAriaLabel="number of visible items"
+                    handleHtmlProps={{ "aria-labelledby": this.numVisibleItemsLabelId }}
                 />
                 <RadioGroup
                     name="collapseFrom"
diff --git a/packages/docs-app/src/examples/core-examples/iconExample.tsx b/packages/docs-app/src/examples/core-examples/iconExample.tsx
index e09863c71be..6d1c5d01a2b 100644
--- a/packages/docs-app/src/examples/core-examples/iconExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/iconExample.tsx
@@ -42,6 +42,8 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
 
     private handleIconNameChange = (icon: IconName) => this.setState({ icon });
 
+    private iconSizeLabelId = "icon-size-label";
+
     public render() {
         const { icon, iconSize, intent } = this.state;
 
@@ -50,7 +52,7 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
                 <H5>Props</H5>
                 <IconSelect iconName={icon} onChange={this.handleIconNameChange} />
                 <IntentSelect intent={this.state.intent} onChange={this.handleIntentChange} />
-                <Label>Icon size</Label>
+                <Label id={this.iconSizeLabelId}>Icon size</Label>
                 <Slider
                     labelStepSize={MAX_ICON_SIZE / 5}
                     min={0}
@@ -58,7 +60,7 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
                     showTrackFill={false}
                     value={iconSize}
                     onChange={this.handleIconSizeChange}
-                    handleAriaLabel="icon size"
+                    handleHtmlProps={{ "aria-labelledby": this.iconSizeLabelId }}
                 />
             </>
         );
diff --git a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
index e05af078472..c771927087a 100644
--- a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
@@ -87,7 +87,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.dangerStart}
                             intentBefore="danger"
                             interactionKind={interactionKind}
-                            ariaLabel="danger start"
+                            handleHtmlProps={{ "aria-label": "danger start" }}
                         />
                     )}
                     {showWarning && (
@@ -96,7 +96,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.warningStart}
                             intentBefore="warning"
                             interactionKind={interactionKind}
-                            ariaLabel="warning start"
+                            handleHtmlProps={{ "aria-label": "warning start" }}
                         />
                     )}
                     {showWarning && (
@@ -105,7 +105,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.warningEnd}
                             intentAfter="warning"
                             interactionKind={interactionKind}
-                            ariaLabel="warning end"
+                            handleHtmlProps={{ "aria-label": "warning end" }}
                         />
                     )}
                     {showDanger && (
@@ -114,7 +114,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.dangerEnd}
                             intentAfter="danger"
                             interactionKind={interactionKind}
-                            ariaLabel="danger end"
+                            handleHtmlProps={{ "aria-label": "danger end" }}
                         />
                     )}
                 </MultiSlider>
diff --git a/packages/docs-app/src/examples/core-examples/progressExample.tsx b/packages/docs-app/src/examples/core-examples/progressExample.tsx
index b4029241166..989dd2bf45a 100644
--- a/packages/docs-app/src/examples/core-examples/progressExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/progressExample.tsx
@@ -55,7 +55,7 @@ export class ProgressExample extends React.PureComponent<IExampleProps, IProgres
                     stepSize={0.1}
                     showTrackFill={false}
                     value={value}
-                    handleAriaLabel="progressbar value"
+                    handleHtmlProps={{ "aria-label": "progressbar value" }}
                 />
             </>
         );
diff --git a/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx b/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
index 8dbbeff1e68..da16df967cd 100644
--- a/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/rangeSliderExample.tsx
@@ -51,7 +51,7 @@ export class RangeSliderExample extends React.PureComponent<IExampleProps, IRang
                     onChange={this.handleValueChange}
                     value={range}
                     vertical={vertical}
-                    handleAriaLabels={{ startAriaLabel: "example start", endAriaLabel: "example end" }}
+                    handleHtmlProps={{ start: { "aria-label": "example start" }, end: { "aria-label": "example end" } }}
                 />
             </Example>
         );
diff --git a/packages/docs-app/src/examples/core-examples/sliderExample.tsx b/packages/docs-app/src/examples/core-examples/sliderExample.tsx
index 220953a4928..33c4f9ad551 100644
--- a/packages/docs-app/src/examples/core-examples/sliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/sliderExample.tsx
@@ -55,7 +55,7 @@ export class SliderExample extends React.PureComponent<IExampleProps, ISliderExa
                     onChange={this.getChangeHandler("value2")}
                     value={this.state.value2}
                     vertical={vertical}
-                    handleAriaLabel="example 1"
+                    handleHtmlProps={{ "aria-label": "example 1" }}
                 />
                 <Slider
                     min={0}
@@ -66,7 +66,7 @@ export class SliderExample extends React.PureComponent<IExampleProps, ISliderExa
                     labelRenderer={this.renderLabel2}
                     value={this.state.value1}
                     vertical={vertical}
-                    handleAriaLabel="example 2"
+                    handleHtmlProps={{ "aria-label": "example 2" }}
                 />
                 <Slider
                     min={-12}
@@ -78,7 +78,7 @@ export class SliderExample extends React.PureComponent<IExampleProps, ISliderExa
                     showTrackFill={false}
                     value={this.state.value3}
                     vertical={vertical}
-                    handleAriaLabel="example 3"
+                    handleHtmlProps={{ "aria-label": "example 3" }}
                 />
             </Example>
         );
diff --git a/packages/docs-app/src/examples/core-examples/spinnerExample.tsx b/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
index 8976f120ba0..546f05ad3c4 100644
--- a/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/spinnerExample.tsx
@@ -53,13 +53,15 @@ export class SpinnerExample extends React.PureComponent<IExampleProps, ISpinnerE
         );
     }
 
+    private spinnerSizeLabelId = "spinner-size-label";
+
     private renderOptions() {
         const { size, hasValue, intent, value } = this.state;
         return (
             <>
                 <H5>Props</H5>
                 <IntentSelect intent={intent} onChange={this.handleModifierChange} />
-                <Label>Size</Label>
+                <Label id={this.spinnerSizeLabelId}>Size</Label>
                 <Slider
                     labelStepSize={50}
                     min={0}
@@ -68,7 +70,7 @@ export class SpinnerExample extends React.PureComponent<IExampleProps, ISpinnerE
                     stepSize={5}
                     value={size}
                     onChange={this.handleSizeChange}
-                    handleAriaLabel="spinner size"
+                    handleHtmlProps={{ "aria-labelledby": this.spinnerSizeLabelId }}
                 />
                 <Switch checked={hasValue} label="Known value" onChange={this.handleIndeterminateChange} />
                 <Slider
@@ -81,7 +83,7 @@ export class SpinnerExample extends React.PureComponent<IExampleProps, ISpinnerE
                     stepSize={0.1}
                     showTrackFill={false}
                     value={value}
-                    handleAriaLabel="spinner value"
+                    handleHtmlProps={{ "aria-label": "spinner value" }}
                 />
             </>
         );

From 9e21b3685898156ab07801c0d6195cb535fa1183 Mon Sep 17 00:00:00 2001
From: "blake.vandercar" <blake.vandercar@validatek.com>
Date: Tue, 19 Jul 2022 15:39:11 -0600
Subject: [PATCH 4/9] add prop desc

---
 packages/core/src/components/slider/rangeSlider.tsx | 2 +-
 packages/core/src/components/slider/slider.tsx      | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/slider/rangeSlider.tsx b/packages/core/src/components/slider/rangeSlider.tsx
index d70c7689164..ece890e868f 100644
--- a/packages/core/src/components/slider/rangeSlider.tsx
+++ b/packages/core/src/components/slider/rangeSlider.tsx
@@ -46,7 +46,7 @@ export interface IRangeSliderProps extends ISliderBaseProps {
     /** Callback invoked when a handle is released. */
     onRelease?(value: NumberRange): void;
 
-    /** Applied to `aria-label` props of the slider Handles */
+    /** HTML props to apply to the slider Handles */
     handleHtmlProps?: { start: HandleHtmlProps; end: HandleHtmlProps };
 }
 
diff --git a/packages/core/src/components/slider/slider.tsx b/packages/core/src/components/slider/slider.tsx
index a634d6b4e3f..fa6c651033c 100644
--- a/packages/core/src/components/slider/slider.tsx
+++ b/packages/core/src/components/slider/slider.tsx
@@ -46,6 +46,7 @@ export interface ISliderProps extends ISliderBaseProps {
     /** Callback invoked when the handle is released. */
     onRelease?(value: number): void;
 
+    /** HTML props to apply to the slider Handle */
     handleHtmlProps?: HandleHtmlProps;
 }
 

From bfc255e16e109160111577b42eac23088a7f45b5 Mon Sep 17 00:00:00 2001
From: "blake.vandercar" <blake.vandercar@validatek.com>
Date: Tue, 19 Jul 2022 15:41:23 -0600
Subject: [PATCH 5/9] pick props

---
 packages/core/src/components/slider/handleProps.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/slider/handleProps.tsx b/packages/core/src/components/slider/handleProps.tsx
index 024465091c9..057285e8a42 100644
--- a/packages/core/src/components/slider/handleProps.tsx
+++ b/packages/core/src/components/slider/handleProps.tsx
@@ -47,7 +47,7 @@ export const HandleInteractionKind = {
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type HandleInteractionKind = typeof HandleInteractionKind[keyof typeof HandleInteractionKind];
 
-export type HandleHtmlProps = React.HTMLProps<HTMLSpanElement>;
+export type HandleHtmlProps = Pick<React.HTMLProps<HTMLSpanElement>, "aria-label" | "aria-labelledby">;
 
 // eslint-disable-next-line deprecation/deprecation
 export type HandleProps = IHandleProps;

From 713ae872911cf00d4f3d7154cdbc994c735d55bd Mon Sep 17 00:00:00 2001
From: "blake.vandercar" <blake.vandercar@validatek.com>
Date: Tue, 19 Jul 2022 15:44:46 -0600
Subject: [PATCH 6/9] fix error

---
 packages/core/src/components/slider/slider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/slider/slider.tsx b/packages/core/src/components/slider/slider.tsx
index fa6c651033c..f769b48db25 100644
--- a/packages/core/src/components/slider/slider.tsx
+++ b/packages/core/src/components/slider/slider.tsx
@@ -18,7 +18,7 @@ import * as React from "react";
 
 import { AbstractPureComponent2, Intent } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
-import { HandleHtmlProps, HandleProps } from "./handleProps";
+import { HandleHtmlProps } from "./handleProps";
 import { ISliderBaseProps, MultiSlider } from "./multiSlider";
 
 // eslint-disable-next-line deprecation/deprecation

From 0c3a56bea5dfdd728b60b711bf33b0cc0f8c5914 Mon Sep 17 00:00:00 2001
From: "blake.vandercar" <blake.vandercar@validatek.com>
Date: Wed, 20 Jul 2022 09:21:15 -0600
Subject: [PATCH 7/9] refactor: rename

---
 packages/core/src/components/slider/handle.tsx            | 4 ++--
 packages/core/src/components/slider/handleProps.tsx       | 4 ++--
 packages/core/src/components/slider/multiSlider.tsx       | 4 ++--
 packages/core/src/components/slider/rangeSlider.tsx       | 4 ++--
 packages/core/src/components/slider/slider.tsx            | 4 ++--
 packages/core/src/components/slider/sliders.md            | 4 ++--
 .../src/examples/core-examples/multiSliderExample.tsx     | 8 ++++----
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/components/slider/handle.tsx b/packages/core/src/components/slider/handle.tsx
index 3ceeba28356..18bcadab814 100644
--- a/packages/core/src/components/slider/handle.tsx
+++ b/packages/core/src/components/slider/handle.tsx
@@ -67,14 +67,14 @@ export class Handle extends AbstractPureComponent2<IInternalHandleProps, IHandle
     }
 
     public render() {
-        const { className, disabled, label, min, max, value, vertical, handleHtmlProps } = this.props;
+        const { className, disabled, label, min, max, value, vertical, htmlProps } = this.props;
         const { isMoving } = this.state;
 
         return (
             <span
                 role="slider"
                 tabIndex={0}
-                {...handleHtmlProps}
+                {...htmlProps}
                 className={classNames(Classes.SLIDER_HANDLE, { [Classes.ACTIVE]: isMoving }, className)}
                 onKeyDown={disabled ? undefined : this.handleKeyDown}
                 onKeyUp={disabled ? undefined : this.handleKeyUp}
diff --git a/packages/core/src/components/slider/handleProps.tsx b/packages/core/src/components/slider/handleProps.tsx
index 057285e8a42..6e78cd6f876 100644
--- a/packages/core/src/components/slider/handleProps.tsx
+++ b/packages/core/src/components/slider/handleProps.tsx
@@ -93,7 +93,7 @@ export interface IHandleProps extends Props {
     type?: HandleType;
 
     /**
-     * HTML props to apply to the Handle
+     * A limited subset of HTML props to apply to the rendered `<span>` element.
      */
-    handleHtmlProps?: HandleHtmlProps;
+    htmlProps?: HandleHtmlProps;
 }
diff --git a/packages/core/src/components/slider/multiSlider.tsx b/packages/core/src/components/slider/multiSlider.tsx
index bf66779976b..93d6db0f497 100644
--- a/packages/core/src/components/slider/multiSlider.tsx
+++ b/packages/core/src/components/slider/multiSlider.tsx
@@ -310,9 +310,9 @@ export class MultiSlider extends AbstractPureComponent2<MultiSliderProps, ISlide
             return null;
         }
 
-        return handleProps.map(({ value, type, className, handleHtmlProps }, index) => (
+        return handleProps.map(({ value, type, className, htmlProps }, index) => (
             <Handle
-                handleHtmlProps={handleHtmlProps}
+                htmlProps={htmlProps}
                 className={classNames(
                     {
                         [Classes.START]: type === HandleType.START,
diff --git a/packages/core/src/components/slider/rangeSlider.tsx b/packages/core/src/components/slider/rangeSlider.tsx
index ece890e868f..670b2baf46f 100644
--- a/packages/core/src/components/slider/rangeSlider.tsx
+++ b/packages/core/src/components/slider/rangeSlider.tsx
@@ -67,12 +67,12 @@ export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
                     value={value![RangeIndex.START]}
                     type="start"
                     intentAfter={props.intent}
-                    handleHtmlProps={handleHtmlProps ? handleHtmlProps.start : undefined}
+                    htmlProps={handleHtmlProps ? handleHtmlProps.start : undefined}
                 />
                 <MultiSlider.Handle
                     value={value![RangeIndex.END]}
                     type="end"
-                    handleHtmlProps={handleHtmlProps ? handleHtmlProps.end : undefined}
+                    htmlProps={handleHtmlProps ? handleHtmlProps.end : undefined}
                 />
             </MultiSlider>
         );
diff --git a/packages/core/src/components/slider/slider.tsx b/packages/core/src/components/slider/slider.tsx
index f769b48db25..138a1fc5e72 100644
--- a/packages/core/src/components/slider/slider.tsx
+++ b/packages/core/src/components/slider/slider.tsx
@@ -46,7 +46,7 @@ export interface ISliderProps extends ISliderBaseProps {
     /** Callback invoked when the handle is released. */
     onRelease?(value: number): void;
 
-    /** HTML props to apply to the slider Handle */
+    /** A limited subset of HTML props to apply to the slider Handle */
     handleHtmlProps?: HandleHtmlProps;
 }
 
@@ -70,7 +70,7 @@ export class Slider extends AbstractPureComponent2<SliderProps> {
                     intentBefore={value! >= initialValue! ? intent : undefined}
                     onChange={onChange}
                     onRelease={onRelease}
-                    handleHtmlProps={handleHtmlProps}
+                    htmlProps={handleHtmlProps}
                 />
                 <MultiSlider.Handle value={initialValue!} interactionKind="none" />
             </MultiSlider>
diff --git a/packages/core/src/components/slider/sliders.md b/packages/core/src/components/slider/sliders.md
index e74ec5f4e84..ed65159aa88 100644
--- a/packages/core/src/components/slider/sliders.md
+++ b/packages/core/src/components/slider/sliders.md
@@ -59,12 +59,12 @@ elements, each with their own `value` and other properties.
         value={startValue}
         type="start"
         intentAfter={Intent.PRIMARY}
-        handleHtmlProps={handleHtmlProps.start}
+        htmlProps={handleHtmlProps.start}
     />
     <MultiSlider.Handle
         value={endValue}
         type="end"
-        handleHtmlProps={handleHtmlProps.end}
+        htmlProps={handleHtmlProps.end}
     />
 </MultiSlider>
 ```
diff --git a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
index c771927087a..d7467f35e73 100644
--- a/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
+++ b/packages/docs-app/src/examples/core-examples/multiSliderExample.tsx
@@ -87,7 +87,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.dangerStart}
                             intentBefore="danger"
                             interactionKind={interactionKind}
-                            handleHtmlProps={{ "aria-label": "danger start" }}
+                            htmlProps={{ "aria-label": "danger start" }}
                         />
                     )}
                     {showWarning && (
@@ -96,7 +96,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.warningStart}
                             intentBefore="warning"
                             interactionKind={interactionKind}
-                            handleHtmlProps={{ "aria-label": "warning start" }}
+                            htmlProps={{ "aria-label": "warning start" }}
                         />
                     )}
                     {showWarning && (
@@ -105,7 +105,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.warningEnd}
                             intentAfter="warning"
                             interactionKind={interactionKind}
-                            handleHtmlProps={{ "aria-label": "warning end" }}
+                            htmlProps={{ "aria-label": "warning end" }}
                         />
                     )}
                     {showDanger && (
@@ -114,7 +114,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
                             value={values.dangerEnd}
                             intentAfter="danger"
                             interactionKind={interactionKind}
-                            handleHtmlProps={{ "aria-label": "danger end" }}
+                            htmlProps={{ "aria-label": "danger end" }}
                         />
                     )}
                 </MultiSlider>

From 7a0b73c55d06b9a98201775824ab6f3579b116cd Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adi.dahiya14@gmail.com>
Date: Wed, 20 Jul 2022 12:10:47 -0400
Subject: [PATCH 8/9] Apply suggestions from code review

---
 packages/core/src/components/slider/rangeSlider.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/slider/rangeSlider.tsx b/packages/core/src/components/slider/rangeSlider.tsx
index 670b2baf46f..f38e5f60dd7 100644
--- a/packages/core/src/components/slider/rangeSlider.tsx
+++ b/packages/core/src/components/slider/rangeSlider.tsx
@@ -47,7 +47,7 @@ export interface IRangeSliderProps extends ISliderBaseProps {
     onRelease?(value: NumberRange): void;
 
     /** HTML props to apply to the slider Handles */
-    handleHtmlProps?: { start: HandleHtmlProps; end: HandleHtmlProps };
+    handleHtmlProps?: { start?: HandleHtmlProps; end?: HandleHtmlProps };
 }
 
 export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
@@ -67,12 +67,12 @@ export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
                     value={value![RangeIndex.START]}
                     type="start"
                     intentAfter={props.intent}
-                    htmlProps={handleHtmlProps ? handleHtmlProps.start : undefined}
+                    htmlProps={handleHtmlProps?.start}
                 />
                 <MultiSlider.Handle
                     value={value![RangeIndex.END]}
                     type="end"
-                    htmlProps={handleHtmlProps ? handleHtmlProps.end : undefined}
+                    htmlProps={handleHtmlProps?.end}
                 />
             </MultiSlider>
         );

From ed39bb0584545e67a771d85f26348f8e44bd3634 Mon Sep 17 00:00:00 2001
From: Adi Dahiya <adahiya@palantir.com>
Date: Wed, 20 Jul 2022 12:14:52 -0400
Subject: [PATCH 9/9] formatting

---
 packages/core/src/components/slider/rangeSlider.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/core/src/components/slider/rangeSlider.tsx b/packages/core/src/components/slider/rangeSlider.tsx
index f38e5f60dd7..560ed398490 100644
--- a/packages/core/src/components/slider/rangeSlider.tsx
+++ b/packages/core/src/components/slider/rangeSlider.tsx
@@ -69,11 +69,7 @@ export class RangeSlider extends AbstractPureComponent2<RangeSliderProps> {
                     intentAfter={props.intent}
                     htmlProps={handleHtmlProps?.start}
                 />
-                <MultiSlider.Handle
-                    value={value![RangeIndex.END]}
-                    type="end"
-                    htmlProps={handleHtmlProps?.end}
-                />
+                <MultiSlider.Handle value={value![RangeIndex.END]} type="end" htmlProps={handleHtmlProps?.end} />
             </MultiSlider>
         );
     }