feat(cc-input-date): init component

[pdesoyres-cc]

Fixes #842

[github-actions]

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/cc-input-date/init/index.html.

This preview will be deleted once this PR is closed.

[florian-sanders-cc]

Well, this is impressive!

Huge gg for all the tests you have set up, really great work!

As always, the code is well documented, thanks a lot for this.

A few notes in addition to the few comments I've left:

• I think the experience with keyboard as it is 👍.

• Since we're dealing with an input that will always be used for dates, the stories should reflect the a11y requirements that come with it: the label must always specify the format: "The label (YYYY-MM-DD HH:MM:SS)" => it is a long format, and it will be even a longer label with required. We may use the "help text" for that info exceptionally but it's really not a good practice (and I should open an issue to change where the help text is displayed + make place the required text closer to its input). Actually we could use the help text to specify that we also accept ISO?

• I'm not sure I understand the custom width story, was it to warn devs about the fact that the component should have a minimum size?

• The simulation story seems to be missing a label and a value.

• TODO test with screen readers (I didn't have the time right now but I'll come back once I've tested)

Again big gg to you!

[florian-sanders-cc]

Ah yes, I need to come back to the DateShifter later because I'm not sure I understand everything. I may add a few more comments (probably not) next week (I'll do that on monday 😉)

[florian-sanders-cc]

Accessibility tests

Screen readers

• I've tested with Windows screen readers and it works fine 👍.
• I've tested with Talkback on Android: it's very difficult to use because it does not recognize the value is a date (it says 2023 million...). => There is nothing we can do about this.
• VoiceOver on iOS: works fine 👍.
• VoiceOver MacOS: works fine 👍.

One issue I found is that the underlayer value does not seem to be up-to-date with the input value. Since screen readers access the underlayer text, it reads 2023-10-18 09....

We should add an aria-hidden="true" attribute on the underlayer container. (should do the same for cc-input-text, I'll open an issue for this).

I think we should try to warn blind users that they can use up / down arrows once the date is valid.
When valueAsDate != null we could:

• add a message (maybe hidden, maybe not?): <p id="keyboard-hint">Use up or down arrow to modify parts of the date.</p> (this message is meh, we'll need to find something better),
• and reference the message with <input ... aria-describedby="... keyboard-hint-container" />.

Keyboard

As said before, I think the user experience with keyboard is good.

I tried to make it even better by selecting the part of the date being edited to highlight it and make left / right arrow keys go to the previous / next part of the date to edit. A demo is available here:
https://clever-components-preview.cellar-c2.services.clever-cloud.com/cc-input-date/test-selection-range-navigation/index.html?path=/story/%F0%9F%A7%AC-atoms-cc-input-date--default-story

To test it:

• tab into an input with a valid date,
• press the left / right arrow,
• use up / down arrow as with the previous version or edit the selected text directly.

This is a POC so contrasts of selected text is not great + I've only tested the default story.

Is it a good idea? I'm not sure, this is more a "What do you think?" test 🤔

[roberttran-cc]

I'll admit I did not expect this component to be this tricky. 🧠

The implementation is impressive, GG. Especially the test suite.

As the for the global architecture, regarding the fact that quite a lot of code is involved, I have the feeling there may or may not be some room for improvements: I'll leave that for more experienced devs. 👀

[Galimede]

What an impressive work, GG! 💪

[hsablonniere]

Impressive work @pdesoyres-cc 👏

Praise and kudos 👍

• The keyboard navigation is super slick
• The underline is subtle but I like it
  • I had something different in mind but this is better
• The quantity and quality of the unit tests is impressive, well done!
• The introduction of the e2e tests and the mouse/keyboard helpers is so nice!!

Concerns 🤔

Nothing really blocking, mostly suggestions, so we can discuss the details if you don't agree with me 😉

• The cc-input-date has a lot of indirections and a few features I'm not sure we need right now which makes it hard to review (and maybe to maintain)
• The date parser and formatter use a lot of classes and I think most of them can be replaced by functions and moved to the date-utils.js file.

EDIT: now that I see what you did with the DateDisplayer, some of my suggestions here aren't that simple. We'll discuss this together 😉

[github-actions]

🔎 The preview has been automatically deleted.