Reputation: 9
I have multi select component in which i need to access all options with keyboard keys but i am using custom menu list which consist of select all check box, clear all link ,apply cancel button...i am able to access only options list with keyboard.i need achieve accessibility for menulist component .
`
import React, { useState } from "react";
import "./styles.css";
import { alphabet } from "./data.js";
import { default as ReactSelect, components } from "react-select";
const Option = (props) => {
return (
<div
ref={props.innerRef}
{...props.innerProps}
tabIndex="0"
role="option"
aria-selected={props.isSelected}
>
<input
type="checkbox"
checked={props.isSelected}
onChange={() => props.selectOption(props.data)}
aria-label={`Select ${props.data.label}`}
/>{" "}
<label>{props.data.label}</label>
</div>
);
};
const MenuList = (props) => {
const { children, selectProps } = props;
const { handleApply, handleCancel } = selectProps;
const handleSelectAll = (event) => {
event.preventDefault();
const allOptions = props.options.map((option) => option.value);
selectProps.onChange(allOptions);
};
const handleClearAll = (event) => {
event.preventDefault();
selectProps.onChange([]);
};
return (
<components.MenuList {...props}>
<div
style={{
display: "flex",
justifyContent: "space-between",
borderBottom: "1px solid gray",
padding: "5px"
}}
>
<div>
<input
type="checkbox"
onChange={handleSelectAll}
aria-label="Select all items"
tabIndex="0"
/>{" "}
<label>Select All</label>
</div>
<a
href="#"
onClick={handleClearAll}
tabIndex="0"
aria-label="Clear all selected items"
>
Clear All
</a>
</div>
{children}
<div
style={{
display: "flex",
justifyContent: "space-between",
padding: "5px"
}}
>
<button
onClick={handleApply}
tabIndex="0"
aria-label="Apply changes"
>
Apply
</button>
<button
onClick={handleCancel}
tabIndex="0"
aria-label="Cancel changes"
>
Cancel
</button>
</div>
</components.MenuList>
);
};
function App() {
const [state, setState] = useState({ optionSelected: [] });
const handleChange = (selected) => {
setState({
optionSelected: selected
});
};
const handleApply = () => {
alert("Applied: " + JSON.stringify(state.optionSelected));
};
const handleCancel = () => {
alert("Cancelled");
};
return (
<div>
<h3>MultiSelect Dropdown with Checkbox</h3>
<ReactSelect
options={alphabet}
isMulti
closeMenuOnSelect={false}
hideSelectedOptions={false}
components={{
Option,
MenuList: (props) => (
<MenuList
{...props}
selectProps={{ ...props.selectProps, handleApply, handleCancel }}
/>
)
}}
onChange={handleChange}
value={state.optionSelected}
/>
</div>
);
}
`
export default App;
what i am expecting is i need access all things in multi select by following order select all , clear all,options list ,next buttons
Upvotes: 0
Views: 59