Date picker is completely inaccessible

[steverep]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

The date picker is impossible to use with a screen reader and/or keyboard only. I can tell from the code it's supposed to be opening a picker dialog, but either that is never triggered or it cannot be navigated to by keyboard.

Looking at the app-datepicker demos, the picker can certainly be made more accessible, but those demos are still not very keyboard friendly. For example, the input field version is read only so you cannot enter manually, the years are just presented as a long list of buttons so you cannot jump to one easily, etc.

Similar to ha-combo-box, I would suggest switching to vaadin-date-picker-light which is far more accessible right out of the box. That solution would probably also close the other issues mentioned below.

Describe the behavior you expected

I expect to be able to easily select a date or enter one manually with keyboard only, and without an exorbitant amount of navigating inside the picker.

Steps to reproduce the issue

1. Create a date helper
2. Open in more info or put it on a dashboard card
3. Try to enter a date with only the keyboard

What version of Home Assistant Core has the issue?

2022.10.x

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Any

Which operating system are you using to run this browser?

Any

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

• #13582
• #13278
• #12329

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[steverep]

Still very much an issue

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[steverep]

Still an issue

[steverep]

Another good reason to remove app-datepicker is that it's slowing things down at least in CI. It includes nodemod, which then includes lit-ntml, which then includes @reallyland/esm. They all need building every time we run yarn install.

cc: @bramkragten

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[steverep]

Still relevant

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[alex3305]

I'd like to add to this that the time inputs currently don't show a highlight, which hinders accessibility and keyboard usage. Because there is no indication where my cursor is:

In the screenshot above my cursor is in the top left corner. An alternative background color: (this is with background: var(--mdc-text-field-fill-color);) or a border should be sufficient to make this bit keyboard accessible.

I know it's not perfect, but it would be a little step 😉