feat(SegmentedControl): a11y - set role to radiogroup

packages/core/src/common/utils/keyboardUtils.ts

@@ -25,3 +25,21 @@ export function isKeyboardClick(event: React.KeyboardEvent<HTMLElement>) {
 export function isArrowKey(event: React.KeyboardEvent<HTMLElement>) {
     return ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(event.key) >= 0;
 }
+
+/**
+ * Direction multiplier for component such as radiogroup, tablist
+ *
+ * @param upMovesLeft
+ * If true, up arrow returns same as left arrow, down arrow returns same as right arrow.
+ * If false, down arrow returns same as left arrow, up arrow returns same as right arrow.
+ * @returns -1 for left, 1 for right, undefined if not an arrow keypress.
+ */
+export function getArrowKeyDirection(event: React.KeyboardEvent<HTMLElement>, upMovesLeft: boolean = true) {
+    const [leftVerticalKey, rightVerticalKey] = upMovesLeft ? ["ArrowUp", "ArrowDown"] : ["ArrowDown", "ArrowUp"];
+    if (event.key === "ArrowLeft" || event.key === leftVerticalKey) {
+        return -1;
+    } else if (event.key === "ArrowRight" || event.key === rightVerticalKey) {
+        return 1;
+    }
+    return undefined;
+}

packages/core/src/components/segmented-control/segmentedControl.tsx

@@ -17,7 +17,8 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Classes, Intent } from "../../common";
+import { Classes, Intent, mergeRefs, Utils } from "../../common";
+import { getArrowKeyDirection } from "../../common/utils/keyboardUtils";
 import {
     type ControlledValueProps,
     DISPLAYNAME_PREFIX,
@@ -26,6 +27,7 @@ import {
     removeNonHTMLProps,
 } from "../../common/props";
 import { Button } from "../button/buttons";
+import type { ButtonProps } from "../button/buttonProps";
 
 export type SegmentedControlIntent = typeof Intent.NONE | typeof Intent.PRIMARY;
 
@@ -92,34 +94,72 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
         value: controlledValue,
         ...htmlProps
     } = props;
+    const [selectedIndex, setSelectedIndex] = React.useState<number>(
+        options.findIndex(option => option.value === (controlledValue ?? defaultValue)),
+    );
 
-    const [localValue, setLocalValue] = React.useState<string | undefined>(defaultValue);
-    const selectedValue = controlledValue ?? localValue;
+    const outerRef = React.useRef<HTMLDivElement>(null);
+    const optionRefs = options.map(() => React.useRef<HTMLButtonElement>(null));
 
     const handleOptionClick = React.useCallback(
-        (newSelectedValue: string, targetElement: HTMLElement) => {
-            setLocalValue(newSelectedValue);
-            onValueChange?.(newSelectedValue, targetElement);
+        (index: number, e: React.MouseEvent<HTMLElement>) => {
+            setSelectedIndex(index);
+            onValueChange?.(options[index].value, e.currentTarget);
         },
         [onValueChange],
     );
 
+    const handleKeyDown = React.useCallback(
+        (e: React.KeyboardEvent<HTMLDivElement>) => {
+            const direction = getArrowKeyDirection(e);
+            const { current: outerElement } = outerRef;
+            if (direction == undefined || !outerElement) return;
+
+            const focusedElement = Utils.getActiveElement(outerElement)?.closest<HTMLButtonElement>("button");
+            if (!focusedElement) return;
+
+            // must rely on DOM state because we have no way of mapping `focusedElement` to a React.JSX.Element
+            const enabledOptionElements = Array.from(outerElement.querySelectorAll("button")).filter(
+                el => !el.disabled,
+            );
+            const focusedIndex = enabledOptionElements.indexOf(focusedElement);
+            if (focusedIndex < 0) return;
+
+            e.preventDefault();
+            // auto-wrapping at 0 and `length`
+            const newIndex = (focusedIndex + direction + enabledOptionElements.length) % enabledOptionElements.length;
+            const newOption = enabledOptionElements[newIndex];
+            newOption.click();
+            newOption.focus();
+        },
+        [outerRef],
+    );
+
     const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
         [Classes.FILL]: fill,
         [Classes.INLINE]: inline,
     });
 
     return (
-        <div className={classes} ref={ref} {...removeNonHTMLProps(htmlProps)}>
-            {options.map(option => (
+        <div
+            role="radiogroup"
+            {...removeNonHTMLProps(htmlProps)}
+            onKeyDown={handleKeyDown}
+            className={classes}
+            ref={mergeRefs(ref, outerRef)}
+        >
+            {options.map((option, index) => (
                 <SegmentedControlOption
                     {...option}
                     intent={intent}
-                    isSelected={selectedValue === option.value}
+                    isSelected={index == selectedIndex}
                     key={option.value}
                     large={large}
-                    onClick={handleOptionClick}
+                    onClick={e => handleOptionClick(index, e)}
+                    ref={optionRefs[index]}
                     small={small}
+                    // selectedIndex==-1 accounts for case where passed value/defaultValue is not one of the values of the passed options.
+                    tabIndex={selectedIndex == -1 && index == 0 ? 0 : undefined}
                 />
             ))}
         </div>
@@ -133,17 +173,27 @@ SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;
 
 interface SegmentedControlOptionProps
     extends OptionProps<string>,
-        Pick<SegmentedControlProps, "intent" | "small" | "large"> {
+        Pick<SegmentedControlProps, "intent" | "small" | "large">,
+        Pick<ButtonProps, "tabIndex" | "ref" | "onClick"> {
     isSelected: boolean;
-    onClick: (value: string, targetElement: HTMLElement) => void;
+    /**
+     * @default 0 if isSelected else -1
+     */
+    tabIndex?: ButtonProps["tabIndex"];
 }
 
-function SegmentedControlOption({ isSelected, label, onClick, value, ...buttonProps }: SegmentedControlOptionProps) {
-    const handleClick = React.useCallback(
-        (event: React.MouseEvent<HTMLElement>) => onClick?.(value, event.currentTarget),
-        [onClick, value],
-    );
-
-    return <Button onClick={handleClick} minimal={!isSelected} text={label} {...buttonProps} />;
-}
+const SegmentedControlOption: React.FC<SegmentedControlOptionProps> = React.forwardRef(
+    ({ isSelected, label, value, tabIndex, ...buttonProps }, ref) => (
+        <Button
+            role="radio"
+            aria-checked={isSelected}
+            minimal={!isSelected}
+            text={label}
+            {...buttonProps}
+            ref={ref}
+            // "roving tabIndex" on a radiogroup: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+            tabIndex={tabIndex ?? (isSelected ? 0 : -1)}
+        />
+    ),
+);
 SegmentedControlOption.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControlOption`;

packages/core/src/components/slider/handle.tsx

@@ -20,6 +20,7 @@ import * as React from "react";
 import { AbstractPureComponent, Classes, Utils } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
 import { clamp } from "../../common/utils";
+import { getArrowKeyDirection } from "../../common/utils/keyboardUtils";
 
 import type { HandleProps } from "./handleProps";
 import { formatPercentage } from "./sliderUtils";
@@ -199,14 +200,11 @@ export class Handle extends AbstractPureComponent<InternalHandleProps, HandleSta
 
     private handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
         const { stepSize, value } = this.props;
-        const { key } = event;
-        if (key === "ArrowDown" || key === "ArrowLeft") {
-            this.changeValue(value - stepSize);
+        const direction = getArrowKeyDirection(event, false);
+        if (direction !== undefined) {
+            this.changeValue(value + stepSize * direction);
             // this key event has been handled! prevent browser scroll on up/down
             event.preventDefault();
-        } else if (key === "ArrowUp" || key === "ArrowRight") {
-            this.changeValue(value + stepSize);
-            event.preventDefault();
         }
     };
 

packages/core/src/components/tabs/tabs.tsx

@@ -18,6 +18,7 @@ import classNames from "classnames";
 import * as React from "react";
 
 import { AbstractPureComponent, Classes, DISPLAYNAME_PREFIX, type Props, Utils } from "../../common";
+import { getArrowKeyDirection } from "../../common/utils/keyboardUtils";
 
 import { Tab, type TabId, type TabProps } from "./tab";
 import { TabPanel } from "./tabPanel";
@@ -235,15 +236,6 @@ export class Tabs extends AbstractPureComponent<TabsProps, TabsState> {
         }
     }
 
-    private getKeyCodeDirection(e: React.KeyboardEvent<HTMLElement>) {
-        if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
-            return -1;
-        } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
-            return 1;
-        }
-        return undefined;
-    }
-
     private getTabChildrenProps(props: TabsProps & { children?: React.ReactNode } = this.props) {
         return this.getTabChildren(props).map(child => child.props);
     }
@@ -262,6 +254,9 @@ export class Tabs extends AbstractPureComponent<TabsProps, TabsState> {
     }
 
     private handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        const direction = getArrowKeyDirection(e);
+        if (direction == undefined) return;
+
         const focusedElement = Utils.getActiveElement(this.tablistElement)?.closest(TAB_SELECTOR);
         // rest of this is potentially expensive and futile, so bail if no tab is focused
         if (focusedElement == null) {
@@ -271,15 +266,13 @@ export class Tabs extends AbstractPureComponent<TabsProps, TabsState> {
         // must rely on DOM state because we have no way of mapping `focusedElement` to a React.JSX.Element
         const enabledTabElements = this.getTabElements().filter(el => el.getAttribute("aria-disabled") === "false");
         const focusedIndex = enabledTabElements.indexOf(focusedElement);
-        const direction = this.getKeyCodeDirection(e);
+        if (focusedIndex < 0) return;
 
-        if (focusedIndex >= 0 && direction !== undefined) {
-            e.preventDefault();
-            const { length } = enabledTabElements;
-            // auto-wrapping at 0 and `length`
-            const nextFocusedIndex = (focusedIndex + direction + length) % length;
-            (enabledTabElements[nextFocusedIndex] as HTMLElement).focus();
-        }
+        e.preventDefault();
+        const { length } = enabledTabElements;
+        // auto-wrapping at 0 and `length`
+        const nextFocusedIndex = (focusedIndex + direction + length) % length;
+        (enabledTabElements[nextFocusedIndex] as HTMLElement).focus();
     };
 
     private handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {

packages/core/test/segmented-control/segmentedControlTests.tsx

@@ -18,7 +18,7 @@ import { assert } from "chai";
 import { mount } from "enzyme";
 import * as React from "react";
 
-import { Classes, type OptionProps, SegmentedControl } from "../../src";
+import { Classes, type OptionProps, SegmentedControl, type SegmentedControlProps } from "../../src";
 
 const OPTIONS: Array<OptionProps<string>> = [
     {
@@ -28,6 +28,7 @@ const OPTIONS: Array<OptionProps<string>> = [
     {
         label: "Grid",
         value: "grid",
+        disabled: true,
     },
     {
         label: "Gallery",
@@ -36,7 +37,7 @@ const OPTIONS: Array<OptionProps<string>> = [
 ];
 
 describe("<SegmentedControl>", () => {
-    let containerElement: HTMLElement | undefined;
+    let containerElement: HTMLElement;
 
     beforeEach(() => {
         containerElement = document.createElement("div");
@@ -47,14 +48,50 @@ describe("<SegmentedControl>", () => {
         containerElement?.remove();
     });
 
-    describe("basic rendering", () => {
-        it("supports className", () => {
-            const testClassName = "test-class-name";
-            const wrapper = mount(<SegmentedControl className={testClassName} options={OPTIONS} />, {
-                attachTo: containerElement,
-            });
-            assert.isTrue(wrapper.find(`.${Classes.SEGMENTED_CONTROL}`).hostNodes().exists());
-            assert.isTrue(wrapper.find(`.${testClassName}`).hostNodes().exists());
+    const mountSegmentedControl = (props?: Partial<SegmentedControlProps>) =>
+        mount(<SegmentedControl options={OPTIONS} {...props} />, {
+            attachTo: containerElement,
         });
+
+    it("supports className", () => {
+        const testClassName = "test-class-name";
+        const wrapper = mountSegmentedControl({ className: testClassName });
+        assert.isTrue(wrapper.find(`.${Classes.SEGMENTED_CONTROL}`).hostNodes().exists());
+        assert.isTrue(wrapper.find(`.${testClassName}`).hostNodes().exists());
+    });
+
+    it("when no default value passed, first button gets tabIndex=0, none have aria-checked initially", () => {
+        const wrapper = mountSegmentedControl();
+        assert.lengthOf(wrapper.find("[tabIndex=0]").hostNodes(), 1);
+        assert.lengthOf(wrapper.find("[aria-checked=true]").hostNodes(), 0);
+        const optionButtons = containerElement.querySelectorAll("button")!;
+        assert.equal(optionButtons[0].getAttribute("tabIndex"), "0");
+        assert.equal(optionButtons[0].getAttribute("aria-checked"), "false");
+    });
+
+    it("when defaultValue passed, tabIndex=0 and aria-checked applied to correct option, no others", () => {
+        const wrapper = mountSegmentedControl({ defaultValue: OPTIONS[2].value });
+        assert.lengthOf(wrapper.find("[tabIndex=0]").hostNodes(), 1);
+        assert.lengthOf(wrapper.find("[aria-checked=true]").hostNodes(), 1);
+        const optionButtons = containerElement.querySelectorAll("button")!;
+        assert.equal(optionButtons[2].getAttribute("tabIndex"), "0");
+        assert.equal(optionButtons[2].getAttribute("aria-checked"), "true");
+    });
+
+    it("changes option button focus when arrow keys are pressed", () => {
+        const wrapper = mountSegmentedControl();
+        const radioGroup = wrapper.find('[role="radiogroup"]');
+
+        const optionButtons = containerElement.querySelectorAll<HTMLElement>('[role="radio"]');
+        optionButtons[0].focus();
+
+        radioGroup.simulate("keydown", { key: "ArrowRight" });
+        assert.equal(document.activeElement, optionButtons[2], "move right and skip disabled");
+        radioGroup.simulate("keydown", { key: "ArrowRight" });
+        assert.equal(document.activeElement, optionButtons[0], "wrap around to first option");
+        radioGroup.simulate("keydown", { key: "ArrowLeft" });
+        assert.equal(document.activeElement, optionButtons[2], "wrap around to last option");
+        radioGroup.simulate("keydown", { key: "ArrowLeft" });
+        assert.equal(document.activeElement, optionButtons[0], "move left and skip disabled");
     });
 });

packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx

@@ -73,15 +73,15 @@ export const SegmentedControlExample: React.FC<ExampleProps> = props => {
                         label: "Grid",
                         value: "grid",
                     },
-                    {
-                        label: "Gallery",
-                        value: "gallery",
-                    },
                     {
                         disabled: true,
                         label: "Disabled",
                         value: "disabled",
                     },
+                    {
+                        label: "Gallery",
+                        value: "gallery",
+                    },
                 ]}
                 large={size === "large"}
                 small={size === "small"}