Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: improve keyboard operation accessibility #285

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
afc163 merged 10 commits into react-component:master from aojunhao123:a11y-focus
Nov 28, 2024
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions assets/index.less
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,3 +117,13 @@
direction: rtl;
}
}

.rc-segmented-item {
&:focus {
outline: none;
}

&-focused {
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
75 changes: 72 additions & 3 deletions src/index.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import KeyCode from 'rc-util/lib/KeyCode';
import omit from 'rc-util/lib/omit';
import { composeRef } from 'rc-util/lib/ref';
import * as React from 'react';
Expand Down Expand Up @@ -84,6 +85,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,
Expand All @@ -94,11 +98,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();
Copy link

@coderabbitai coderabbitai bot Nov 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

手动调用 onBlur() 可能导致意外行为

在 handleChange 函数中手动调用 onBlur() 可能会导致与正常的事件流不一致,可能引发意外的焦点丢失或其他副作用。建议重新评估这种调用的必要性,或者寻找更符合 React 事件处理规范的方法。

onChange(event, value);
};

Expand All @@ -111,16 +120,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}
Expand Down Expand Up @@ -176,10 +186,64 @@ 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 = (event: React.FocusEvent<HTMLInputElement>) => {
setIsFocused(true);
};

const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {
setIsFocused(false);
};

// ======================= Keyboard ========================
const getNextIndex = (current: number, offset: number) => {
if (disabled) {
return current;
}

const total = segmentedOptions.length;
const nextIndex = (current + offset + total) % total;

if (segmentedOptions[nextIndex]?.disabled) {
return getNextIndex(nextIndex, offset);
}
return nextIndex;
};
Copy link

@coderabbitai coderabbitai bot Nov 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

当所有选项均被禁用时,getNextIndex 函数可能导致无限递归

getNextIndex 函数在所有选项都被禁用的情况下,会陷入无限递归,导致堆栈溢出。建议在函数中添加一个终止条件,检测所有选项是否都被禁用,并在这种情况下返回当前索引或采取适当的措施。

建议的修改:

const getNextIndex = (current: number, offset: number) => {
 if (disabled) {
 return current;
 }
 const total = segmentedOptions.length;
+ if (segmentedOptions.every(option => option.disabled)) {
+ return current;
+ }
 const nextIndex = (current + offset + total) % total;
 if (segmentedOptions[nextIndex]?.disabled) {
 return getNextIndex(nextIndex, offset);
 }
 return nextIndex;
};
📝 Committable suggestion

!!️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const getNextIndex = (current: number, offset: number) => {
if (disabled) {
return current;
}
const total = segmentedOptions.length;
const nextIndex = (current + offset + total) % total;
if (segmentedOptions[nextIndex]?.disabled) {
return getNextIndex(nextIndex, offset);
}
return nextIndex;
};
const getNextIndex = (current: number, offset: number) => {
if (disabled) {
return current;
}
const total = segmentedOptions.length;
if (segmentedOptions.every(option => option.disabled)) {
return current;
}
const nextIndex = (current + offset + total) % total;
if (segmentedOptions[nextIndex]?.disabled) {
return getNextIndex(nextIndex, offset);
}
return nextIndex;
};


const handleKeyDown = (event: React.KeyboardEvent) => {
let offset = 0;

switch (event.which) {
case KeyCode.LEFT:
case KeyCode.UP:
offset = -1;
break;
case KeyCode.RIGHT:
case KeyCode.DOWN:
offset = 1;
break;
}

const nextIndex = getNextIndex(currentIndex, offset);
const nextOption = segmentedOptions[nextIndex];

if (nextOption) {
setRawValue(nextOption.value);
onChange?.(nextOption.value);
}
};

return (
<div
role="listbox"
role="radiogroup"
aria-label="segmented control"
tabIndex={disabled ? undefined : 0}
{...divProps}
className={classNames(
prefixCls,
Expand Down Expand Up @@ -222,10 +286,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}
/>
))}
Expand Down
Loading
Loading

AltStyle によって変換されたページ (->オリジナル) /