[select2] fix(a11y): add aria-multiselectable, aria-autocomplete

[bvandercar-vt]

Fixes #0000

Checklist

• Includes tests
• Update documentation

Changes proposed in this pull request:

Reviewers should focus on:

Screenshot

[adidahiya]

the aria-multiselectable docs say that we should use this with aria-selected.

I looked into this... at first glance, it seems like the simplest thing we can do to get that working is apply "aria-selected": selected === true here:

blueprint/packages/core/src/components/menu/menuItem.tsx

Lines 185 to 191 in d9d20dc

	{
	role: "menuitem",
	tabIndex: 0,
	...htmlProps,
	...(disabled ? DISABLED_PROPS : {}),
	className: anchorClasses,
	},

BUT -- that's not right because of some weirdness in the current MenuItem API around "selected" vs. "active" appearance. MenuItem's styling API sort of assumes single (not multi) selection. I will follow up on this problem later.

for the time being, we must push the aria-selected responsibility onto consumers. you should set aria-selected={this.isFilmSelected(film)} here:

blueprint/packages/docs-app/src/examples/select-examples/multiSelectExample.tsx

Lines 206 to 214 in d9d20dc

	<MenuItem
	selected={modifiers.active}
	icon={this.isFilmSelected(film) ? "tick" : "blank"}
	key={film.rank}
	label={film.year.toString()}
	onClick={handleClick}
	text={`${film.rank}. ${film.title}`}
	shouldDismissPopover={false}
	/>

[adidahiya]

this looks like a good addition... I think we should also set this in other places we use role="combox"... Select2 and Suggest2

[bvandercar-vt]

We already have that on Suggest2. On Select2, it didn't seem appropriate on the combobox since you can't type into that. I put it on the filter input though.

[bvandercar-vt]

aria-selected={this.isFilmSelected(film)}

done.