Shaik aslam
Shaik aslam

Reputation: 9

Unable to achieve accessibility in custom multi select by using react-select library

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

Answers (0)

Related Questions