Add setting for selecting first option by default

[iansan5653]

Users often expect the first item in an autocomplete list to be inserted if they don't select anything and then hit Enter. For example, here's a video of this functionality in the GitHub emoji picker:

Screen.Recording.2022-07-15.at.12.33.17.PM.mov

---

This can be done with the current functionality by calling navigate(1) after start() or by setting aria-selected on the first item (to avoid setting the activedescendant and interrupting screen reader users). However, this has drawbacks. Users (particularly screen reader users) expect the first item to be selected when they press Down, regardless of what the default is (source).

A better solution is to style the first item using a different style to indicate that it will be inserted without actually selecting it (the following images are stolen from our a11y docs):

Upon the first down arrow press, the first item will now be selected:

---

That's what this change adds support for. This new feature is disabled by default and must be enabled by passing the defaultFirstOption setting. Then the consumer can style the default item by selecting for data-combobox-option-default (I chose to use a data-* attribute instead of a class for this because I didn't want to mess with the consumer's class list).

Note that there is no way to indicate this functionality using ARIA attributes, so it has to be announced explicitly using an aria-live message. A demo implementation of this is available from our own auto-complete-element. We could build that into the Combobox class, but I decided not to because we would have to be very opinionated about the message and implementation. Plus it would be difficult to internationalize.

[accessibility-bot]

👋 Hello and thanks for pinging us! An accessibility first responder will review this soon.

• 💻 On PRs for our review: please provide a review environment with steps to validate, screenshots (with alt text), or videos demonstrating functionality we should be checking. This will help speed up our review and feedback cycle.
• ⚠️ If this is urgent, please visit us in #accessibility on Slack and tag the first responder(s) listed in the channel topic.