ha-form-multi_select accessibility improvements

[karwosts]

Proposed change

The current multi_select control (combobox variant) for ha-form is very poorly accessible:

• it is not possible to interact at all with the keyboard, it doesn't appear to be selectable
• if you could open it, is is not possible to change the selection of any of the items with the keyboard
• screen reader don't understand any of the structure of the menu.

I have attempted to rewrite this part to improve this. I initially tried fixing it with the existing components (I think it's material 2?), but I wasn't successful in getting something to work. I then spent a little time trying it with the newer material 3 components, and I think I got something satisfactory:

• I was able to open the form with the keyboard and navigate the item list
• Pressing space or enter checks/unchecks items
• NVDA seems to correctly announce the items in the list and announces if they are checked.

I am fairly new with dealing with complex usage of material components, or anything accessibility related, so a lot of this was just guessing and trial and error, so I may have done some things incorrectly.

Sample screenshot:

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes Accessibility issues for blind people when creating an automation by selecting days of the week #20993
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

Summary by CodeRabbit

• New Features

  • Improved event handling for opening and closing events in the button menu component.
  • Enhanced keyboard interaction and item toggling in the multi-select form component.

• Refactor

  • Replaced ha-svg-icon with ha-icon-button for better icon handling.
  • Updated from ha-check-list-item to ha-menu-item for options rendering in multi-select forms.

[steverep]

I'm pretty busy today and tomorrow, but I'll review sometime this weekend.

[steverep]

I've been dealing with some data loss because of a Docker update, but I'll get to this soon.

[github-actions]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days.
Thank you for your contributions.

[silamon]

Looking good on the material 3 part. Sooner or later we may want to move the keydown listener to the button menu component so this gets accesible wherever the component is used.

[bramkragten]

Why do we re-fire these, are they originally fired un-composed? And why do we disable bubbling, should we also fire them un-composed then instead if disabling bubbling?

[karwosts]

Why do we re-fire these, are they originally fired un-composed?

It's been a while, but I think I recall that was the issue.

And why do we disable bubbling, should we also fire them un-composed then instead if disabling bubbling?

I am not so knowledgeable about this. I mostly got it working via guessing/trial & error. Can try something else if you have a better suggestion.

[bramkragten]

I'm surprised they fire un-composed, but ok 🤷‍♂️ I suggest we do the same then.

    fireEvent(this, "closing", undefined, { composed: false });

[karwosts]

seems to work, updated