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

feat: Improve Accessibility of Checkbox States #604

Closed
wants to merge 1 commit into from
Closed

feat: Improve Accessibility of Checkbox States #604

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 12 additions & 17 deletions src/components/Dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const Dropdown = ({
setIsOpen(!isOpen);
};

// Handle blur event, focus moving away from open dropdown
// Handle blur event, focus moving away from open dropdown
const handleBlur = () => {
setTimeout(() => {
if (
Expand All @@ -55,14 +55,14 @@ export const Dropdown = ({
}, 0);
};

// Handle option selection
// Handle option selection
const handleOptionClick = (option: DropdownOption) => {
if (variant === "dropdown") {
setSelected(option.value);
setIsOpen(false);
}

// With a radio variant, multiple options can be selected
// With a radio variant, multiple options can be selected
if (variant === "radio" && Array.isArray(selected)) {
const newSelected = selected.includes(option.value)
? selected.filter((value) => value !== option.value)
Expand Down Expand Up @@ -102,15 +102,20 @@ export const Dropdown = ({
}
}, [isOpen]);

// Determine if an option is selected
// Determine if an option is selected
const isSelected = (option: DropdownOption) => {
if (variant === "dropdown") {
return selected === option.value || selected === option.id;
}
return selected.includes(option.value);
};
// Render the collapsed dropdown button
const checkmarkSVG = (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="m 16.371092,6.6210937 c 0.513245,0.5203285 0.507123,1.3583198 -0.01367,1.8710938 L 9.8535158,14.896484 c -0.5147559,0.506589 -1.3407128,0.506589 -1.8554687,0 L 3.6425783,10.607422 C 3.1217848,10.094649 3.1156616,9.2566574 3.6289063,8.7363283 4.1416797,8.2155349 4.9796709,8.2094117 5.5,8.7226563 L 8.9257813,12.097656 14.5,6.6074219 c 0.519236,-0.5121001 1.35949,-0.5058647 1.871092,0.013672 z M 10,20 C 15.5228,20 20,15.5228 20,10 20,4.47715 15.5228,0 10,0 4.47715,0 0,4.47715 0,10 0,15.5228 4.47715,20 10,20 Z" fill="currentColor" />
</svg>
);

// Render the collapsed dropdown button
const renderCollapsedDropdown = () => (
<button
className={styles.selected}
Expand All @@ -132,23 +137,13 @@ export const Dropdown = ({
</div>
</button>
);

// Render the expanded dropdown options
const renderExpandedDropdown = () => (
<ul className={styles.options} role="listbox" tabIndex={-1}>
{options.map((option, index) => (
<li
key={option.value}
className={styles.option}
role="option"
aria-selected={isSelected(option)}
>
<li key={option.value} className={styles.option} role="option" aria-selected={isSelected(option)}>
<div className={styles.icon}>
<Icon
kind={
isSelected(option) ? "option-selected" : "option-unselected"
}
/>
{isSelected(option) ? checkmarkSVG : <Icon kind="option-unselected" />}
</div>
<button
onClick={() => handleOptionClick(option)}
Expand Down