feat: improve keyboard operation accessibility

assets/index.less

@@ -117,3 +117,14 @@
     direction: rtl;
   }
 }
+
+.rc-segmented-item {
+  &:focus {
+    outline: none;
+  }
+
+  &-focused {
+    border-radius: 2px;
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  }
+}

docs/demo/basic.tsx

@@ -8,13 +8,16 @@ export default function App() {
       <div className="wrapper">
         <Segmented
           options={['iOS', 'Android', 'Web']}
+          defaultValue="Android"
+          name="segmented1"
           onChange={(value) => console.log(value, typeof value)}
         />
       </div>
       <div className="wrapper">
         <Segmented
           vertical
           options={['iOS', 'Android', 'Web']}
+          name="segmented2"
           onChange={(value) => console.log(value, typeof value)}
         />
       </div>

package.json

@@ -55,6 +55,7 @@
     "@rc-component/father-plugin": "^1.0.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^29.2.4",
     "@types/react": "^18.3.11",

src/index.tsx

@@ -84,6 +84,9 @@ const InternalSegmentedOption: React.FC<{
     e: React.ChangeEvent<HTMLInputElement>,
     value: SegmentedRawOption,
   ) => void;
+  onFocus: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur: (e?: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent) => void;
 }> = ({
   prefixCls,
   className,
@@ -94,11 +97,16 @@ const InternalSegmentedOption: React.FC<{
   value,
   name,
   onChange,
+  onFocus,
+  onBlur,
+  onKeyDown,
 }) => {
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled) {
       return;
     }
+    // Do not add focus style when clicking
+    onBlur();
     onChange(event, value);
   };
 
@@ -111,16 +119,17 @@ const InternalSegmentedOption: React.FC<{
       <input
         name={name}
         className={`${prefixCls}-item-input`}
-        aria-hidden="true"
         type="radio"
         disabled={disabled}
         checked={checked}
         onChange={handleChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
       />
       <div
         className={`${prefixCls}-item-label`}
         title={title}
-        role="option"
         aria-selected={checked}
       >
         {label}
@@ -176,10 +185,51 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
 
     const divProps = omit(restProps, ['children']);
 
+    // ======================= Focus ========================
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    const currentIndex = segmentedOptions.findIndex(
+      (option) => option.value === rawValue,
+    );
+
+    const handleFocus = () => {
+      setIsFocused(true);
+    };
+
+    const handleBlur = () => {
+      setIsFocused(false);
+    };
+
+    // ======================= Keyboard ========================
+    const onOffset = (offset: number) => {
+      const total = segmentedOptions.length;
+      const nextIndex = (currentIndex + offset + total) % total;
+
+      const nextOption = segmentedOptions[nextIndex];
+      if (nextOption) {
+        setRawValue(nextOption.value);
+        onChange?.(nextOption.value);
+      }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          onOffset(-1);
+          break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+          onOffset(1);
+          break;
+      }
+    };
+
     return (
       <div
-        role="listbox"
+        role="radiogroup"
         aria-label="segmented control"
+        tabIndex={disabled ? undefined : 0}
         {...divProps}
         className={classNames(
           prefixCls,
@@ -222,10 +272,15 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
                 {
                   [`${prefixCls}-item-selected`]:
                     segmentedOption.value === rawValue && !thumbShow,
+                  [`${prefixCls}-item-focused`]:
+                    isFocused && segmentedOption.value === rawValue,
                 },
               )}
               checked={segmentedOption.value === rawValue}
               onChange={handleChange}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              onKeyDown={handleKeyDown}
               disabled={!!disabled || !!segmentedOption.disabled}
             />
           ))}