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 = false) {
+    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,14 +17,16 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Classes, Intent } from "../../common";
+import { Classes, Intent, mergeRefs, Utils } from "../../common";
 import {
     type ControlledValueProps,
     DISPLAYNAME_PREFIX,
     type OptionProps,
     type Props,
     removeNonHTMLProps,
 } from "../../common/props";
+import { getArrowKeyDirection } from "../../common/utils/keyboardUtils";
+import type { ButtonProps } from "../button/buttonProps";
 import { Button } from "../button/buttons";
 
 export type SegmentedControlIntent = typeof Intent.NONE | typeof Intent.PRIMARY;
@@ -65,6 +67,15 @@ export interface SegmentedControlProps
      */
     options: Array<OptionProps<string>>;
 
+    /**
+     * Aria role for the overall component. Child buttons get appropriate roles.
+     *
+     * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar
+     *
+     * @default 'radiogroup'
+     */
+    role?: Extract<React.AriaRole, "radiogroup" | "group" | "toolbar">;
+
     /**
      * Whether this control should use small buttons.
      *
@@ -88,6 +99,7 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
         large,
         onValueChange,
         options,
+        role = "radiogroup",
         small,
         value: controlledValue,
         ...htmlProps
@@ -96,6 +108,8 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
     const [localValue, setLocalValue] = React.useState<string | undefined>(defaultValue);
     const selectedValue = controlledValue ?? localValue;
 
+    const outerRef = React.useRef<HTMLDivElement>(null);
+
     const handleOptionClick = React.useCallback(
         (newSelectedValue: string, targetElement: HTMLElement) => {
             setLocalValue(newSelectedValue);
@@ -104,24 +118,78 @@ export const SegmentedControl: React.FC<SegmentedControlProps> = React.forwardRe
         [onValueChange],
     );
 
+    const handleKeyDown = React.useCallback(
+        (e: React.KeyboardEvent<HTMLDivElement>) => {
+            if (role === "radiogroup") {
+                // in a `radiogroup`, arrow keys select next item, not tab key.
+                const direction = getArrowKeyDirection(e, true);
+                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<HTMLButtonElement>("button:not(: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, role],
+    );
+
     const classes = classNames(Classes.SEGMENTED_CONTROL, className, {
         [Classes.FILL]: fill,
         [Classes.INLINE]: inline,
     });
 
+    const isAnySelected = options.some(option => selectedValue === option.value);
+
     return (
-        <div className={classes} ref={ref} {...removeNonHTMLProps(htmlProps)}>
-            {options.map(option => (
-                <SegmentedControlOption
-                    {...option}
-                    intent={intent}
-                    isSelected={selectedValue === option.value}
-                    key={option.value}
-                    large={large}
-                    onClick={handleOptionClick}
-                    small={small}
-                />
-            ))}
+        <div
+            {...removeNonHTMLProps(htmlProps)}
+            role={role}
+            onKeyDown={handleKeyDown}
+            className={classes}
+            ref={mergeRefs(ref, outerRef)}
+        >
+            {options.map((option, index) => {
+                const isSelected = selectedValue === option.value;
+                return (
+                    <SegmentedControlOption
+                        {...option}
+                        intent={intent}
+                        isSelected={isSelected}
+                        key={option.value}
+                        large={large}
+                        onClick={handleOptionClick}
+                        small={small}
+                        {...(role === "radiogroup"
+                            ? {
+                                  "aria-checked": isSelected,
+                                  role: "radio",
+                                  // "roving tabIndex" on a radiogroup: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+                                  // `!isAnySelected` accounts for case where no value is currently selected
+                                  // (passed value/defaultValue is not one of the values of the passed options.)
+                                  // In this case, set first item to be tabbable even though it's unselected.
+                                  tabIndex: isSelected || (index === 0 && !isAnySelected) ? 0 : -1,
+                              }
+                            : {
+                                  "aria-pressed": isSelected,
+                              })}
+                    />
+                );
+            })}
         </div>
     );
 });
@@ -133,7 +201,9 @@ SegmentedControl.displayName = `${DISPLAYNAME_PREFIX}.SegmentedControl`;
 
 interface SegmentedControlOptionProps
     extends OptionProps<string>,
-        Pick<SegmentedControlProps, "intent" | "small" | "large"> {
+        Pick<SegmentedControlProps, "intent" | "small" | "large">,
+        Pick<ButtonProps, "role" | "tabIndex">,
+        React.AriaAttributes {
     isSelected: boolean;
     onClick: (value: string, targetElement: HTMLElement) => void;
 }
@@ -144,6 +214,6 @@ function SegmentedControlOption({ isSelected, label, onClick, value, ...buttonPr
         [onClick, value],
     );
 
-    return <Button onClick={handleClick} minimal={!isSelected} text={label} {...buttonProps} />;
+    return <Button {...buttonProps} onClick={handleClick} minimal={!isSelected} text={label} />;
 }
 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,24 +254,25 @@ export class Tabs extends AbstractPureComponent<TabsProps, TabsState> {
     }
 
     private handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+        const direction = getArrowKeyDirection(e, true);
+        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) {
             return;
         }
 
         // 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 enabledTabElements = this.getTabElements('[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,14 +18,15 @@ 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>> = [
     {
         label: "List",
         value: "list",
     },
     {
+        disabled: true,
         label: "Grid",
         value: "grid",
     },
@@ -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"}