Estoy tratando de agregar aria expandida a un botón que se usa para crear un menú desplegable. El problema es que aria-expanded debe ser verdadero para expandir las opciones desplegables. Este componente también se utiliza como botón normal. No sé si este es un buen enfoque. Porque en un botón normal tendré aria-expandida lo cual no es deseable. Así que tengo dos problemas.

¿Podría ser el problema tener onClick y onBlur ? ¿Quizás si uso solo onClick ?

Este es mi componente.

 const Button = ({ id, type, image, iconRight, label, href, to, bsStyle, secondary, inverse, small, expandable, block, disabled, loading, onClick, replace, defaultLabelText, className, style, children, ...props }) => { const [pressed, setPressed] = useState(false); const [boolValue, setBoolValue] = useState(false); useEffect(() => { setPressed(boolValue); }, [boolValue]); const handleToggle = (value) => { setBoolValue(value); }; const handleClick = (event) => { if (typeof onClick === "function") { onClick(event); } }; const handleFocus = (event) => { handleToggle(true); if (typeof props.onFocus === "function") { props.onFocus(event); } }; const handleBlur = (event) => { handleToggle(false); if (typeof props.onBlur === "function") { props.onBlur(event); } }; return ( <button {...(expandable && { "aria-expanded": `${pressed}`, "aria-controls": `${id}` })} type="button" onClick={handleClick} onFocus={expandable ? (event) => handleFocus(event) : undefined} onBlur={expandable ? (event) => handleBlur(event) : undefined} style={style} disabled={disabled}> <> {image && !iconRight && <Image src={image} />} {label && <I18n id={label} {...replace} defaultValue={defaultLabelText} />} {!label && defaultLabelText && <span>{defaultLabelText}</span>} {children} {image && iconRight && <Image iconRight src={image} />} </> </button> ); };