Skip to content
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.

Sign up for GitHub

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

fix(comboBox): refactor components for accessibility #636

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

fix(comboBox): refactor components for accessibility #636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a4cf92
fix(comboBox): refactor components for accessibility
Tianhui-Han Sep 14, 2024
dad03e4
feat(combobox): remove popover option
Tianhui-Han Oct 11, 2024
818bd3d
Merge branch 'master' into fix/combobox_accessibility
Tianhui-Han Oct 12, 2024
7a27278
feat(combobox): fix ut issue
Tianhui-Han Oct 12, 2024
49fa643
Merge branch 'master' into fix/combobox_accessibility
Tianhui-Han Oct 24, 2024
6cac017
feat(combobox): resolve conflict
Tianhui-Han Oct 24, 2024
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
14 changes: 14 additions & 0 deletions src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot 1`] = `
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -143,6 +144,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with avatarPr
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -302,6 +304,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with classNam
className="example-class md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -422,6 +425,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -620,6 +624,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -823,6 +828,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayM
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1022,6 +1028,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with firstLin
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1141,6 +1148,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with id 1`] =
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1258,6 +1266,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1404,6 +1413,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1550,6 +1560,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1696,6 +1707,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with schedule
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1842,6 +1854,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with secondLi
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down Expand Up @@ -1977,6 +1990,7 @@ exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with style 1`
className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper"
data-allow-text-select={false}
data-disabled={false}
data-focused={false}
data-interactive={true}
data-padded={false}
data-shape="isPilled"
Expand Down
65 changes: 33 additions & 32 deletions src/components/ComboBox/ComboBox.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,51 @@
const CLASS_PREFIX = 'md-combo-box';
import { FocusStrategy } from '@react-types/shared';
import { Direction } from './ComboBox.types';
import { InferredIconName } from '../Icon/Icon.types';

const DEFAULTS = {
WIDTH:'16.25rem',
PLACEHOLDER:'',
NO_RESULT_TEXT:'No results found',
SHOULD_FILTER_ON_ARROW_BUTTON:true,
ERROR:false,
SELECTEDKEY:'',
DISABLEDKEYS:[],
};
const CLASS_PREFIX = 'md-combo-box';

const STYLE = {
description: `${CLASS_PREFIX}-description`,
label: `${CLASS_PREFIX}-label`,
wrapper: `${CLASS_PREFIX}-wrapper`,
inputSection: `${CLASS_PREFIX}-input-section`,
trigger: `${CLASS_PREFIX}-trigger`,
input: `${CLASS_PREFIX}-input`,
divider: `${CLASS_PREFIX}-divider`,
button: `${CLASS_PREFIX}-button`,
arrowIcon: `${CLASS_PREFIX}-arrow-icon`,
selectionPosition: `${CLASS_PREFIX}-selection-position`,
selectionContainer: `${CLASS_PREFIX}-selection-container`,
selection: `${CLASS_PREFIX}-selection`,
noResultText: `${CLASS_PREFIX}-no-result-text`,
listBox: `${CLASS_PREFIX}-listbox`,
popover: `${CLASS_PREFIX}-popover`,
};

const KEYS = {
INPUT_SEARCH_NO_RESULT: 'input_search_no_result',
NO_RESULT: 'no_result',
};

const ELEMENT = {
PROPS: {
SELECTION_CONTAINER_MAX_HEIGHT:244,
},
type IconName = {
[key: string]: InferredIconName;
};

const ICON: IconName = {
ARROW_UP: 'arrow-down',
ARROW_DOWN: 'arrow-down',
};

const DIRECTIONS: Record<string, Direction> = {
bottom: 'bottom',
top: 'top',
};

const DEFAULTS = {
DIRECTION: DIRECTIONS.bottom,
FOCUS_STRATEGY: 'first' as FocusStrategy,
};

const EVENT = {
KEY:{
KEYCODE:{
ESCAPE: 'Escape',
ENTER: 'Enter',
TAB: 'Tab',
ARROW_DOWN: 'ArrowDown',
ARROW_UP: 'ArrowUp',
}
}
KEY: {
ESCAPE: 'Escape',
ENTER: 'Enter',
TAB: 'Tab',
ARROW_DOWN: 'ArrowDown',
ARROW_UP: 'ArrowUp',
},
};

export{STYLE,DEFAULTS,KEYS,ELEMENT,EVENT};
export { STYLE, KEYS, EVENT, ICON, DEFAULTS };
30 changes: 10 additions & 20 deletions src/components/ComboBox/ComboBox.documentation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,28 +43,18 @@ and the items within the section accept an iterable list of options.
import { Item } from '@react-stately/collections';

const comboBoxGroups = [
{
items: [
{ key: 'key1', label: 'item1' },
{ key: 'key2', label: 'item2' },
{ key: 'key3', label: 'item3' },
{ key: 'key4', label: 'item4' },
]
},
{ key: 'key1', label: 'item1' },
{ key: 'key2', label: 'item2' },
{ key: 'key3', label: 'item3' },
{ key: 'key4', label: 'item4' },
]

<ComboBox onSelectionChange={(item) => console.log} comboBoxGroups={comboBoxGroups}>
{(sectionGroup) => {
<ComboBox onSelectionChange={(item) => console.log} defaultItems={comboBoxGroups}>
{(menuItem) => {
return (
<Section key="noSection">
{sectionGroup.items.map((menuItem) => {
return (
<Item key={menuItem.key} textValue={menuItem.key}>
<div>{menuItem.label}</div>
</Item>
);
})}
</Section>
<Item key={menuItem.key} textValue={menuItem.label}>
<div key={menuItem.key + '-label'}>{menuItem.label}</div>
</Item>
);
}}
</ComboBox>
Expand Down Expand Up @@ -120,7 +110,7 @@ const comboBoxGroups = [
<Section title={group.section} key={group.section}>
{group.items.map((menuItem: IItem) => {
return (
<Item key={menuItem.key} textValue={menuItem.key}>
<Item key={menuItem.key} textValue={menuItem.label}>
<div>{menuItem.label}</div>
</Item>
);
Expand Down
Loading
Loading