braid-design-system
Version:
Themeable design system for the SEEK Group
48 lines (47 loc) • 1.43 kB
JavaScript
;
const getItemId = (id, index) => `${id}-item-${index}`;
const createAccessibilityProps = ({
id,
highlightedIndex,
isOpen
}) => {
const menuId = `${id}-menu`;
const assistiveDescriptionId = `${id}-aria-description`;
return {
inputProps: {
id,
role: "combobox",
"aria-haspopup": "listbox",
"aria-owns": isOpen ? menuId : void 0,
// backwards compatibility for screenreaders implementing ARIA 1.0
"aria-controls": menuId,
"aria-expanded": isOpen,
"aria-autocomplete": "list",
"aria-activedescendant": typeof highlightedIndex === "number" ? getItemId(id, highlightedIndex) : void 0,
"aria-describedby": assistiveDescriptionId,
autoComplete: "off",
// https://stackoverflow.com/questions/47775041/disable-autofill-in-chrome-63/47822599
spellCheck: false
},
assistiveDescriptionProps: {
id: assistiveDescriptionId
},
menuProps: {
id: menuId,
role: "listbox"
},
getItemProps: ({
index,
label,
description,
groupHeading
}) => ({
id: getItemId(id, index),
role: "option",
"aria-selected": index === highlightedIndex,
"aria-label": `${label}${description ? ` - ${description}` : ""}${groupHeading ? ` (${groupHeading})` : ""}`
})
};
};
exports.createAccessibilityProps = createAccessibilityProps;
exports.getItemId = getItemId;