feat: input-date: Disclose when date was reverted to previous #5164
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
| @@ -159,10 +161,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin( | |||
| this._inputId = getUniqueId(); | |||
| this._inputTextFocusMouseup = false; | |||
| this._inputTextFocusShowTooltip = true; // true by default so hover triggers tooltip | |||
| this._namespace = 'components.input-date'; | |||
There was a problem hiding this comment.
This uses this._namespace for the lang terms which had come up as being bad practice since it makes searching for lang terms more difficult.
Since I was adding more lang term usage I thought I'd clean this up, but let me know if I shouldn't actually do this or if it's too much noise.
margaree
changed the title
…ang terms on multiple lines, separate out tooltip logic
| await sendKeysElem(elem, 'press', 'Backspace'); | ||
| await sendKeys('press', 'Tab'); | ||
| await focusElem(elem); | ||
| await aTimeout(100); |
There was a problem hiding this comment.
Since the blur instructions and refocus instructions now use the same tooltip, we can no longer wait for the d2l-tooltip-show event in order to get the image. I tried a variety of things but the only reliable one I've found is aTimeout.
| @@ -349,15 +357,64 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin( | |||
| this._dropdown.close(); | |||
| } | |||
|
|
|||
| _getErrorTooltip() { | |||
There was a problem hiding this comment.
Could also probably combine this with _getRevertTooltip but I think we would likely sacrifice some readability by putting too many cases into that one function.
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
…/core into input-date-identify-revert
| await sendKeysElem(elem, 'press', 'Backspace'); | ||
| await sendKeys('press', 'Tab'); | ||
| await focusElem(elem); | ||
| await aTimeout(1000); |
There was a problem hiding this comment.
So the problem that seems to be happening here is that in the blurred state the tooltip is less wide because it has less wide content, but then when we re-focus the content is wider. Testing this, it always ends up going to the wider width. However, in the vdiffs sometimes the screenshot is taken before it's gotten wider, leading to flake.
I can do something like `await waitUntil(this.shadowRoot.querySelector('d2l-tooltip').shadowRoot.querySelector('...content div').clientWidth > 300, '...') but that feels bad. Are there alternatives I'm missing?
There was a problem hiding this comment.
Oh wow, that tooltip is just permanent eh. The only other thing I can think of would be to just put the input into the state you want initially by setting _showRevertTooltip = true, but that's equally a bit hacky.
|
🎉 This PR is included in version 3.74.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Jira ticket
Problem:
This happens when a date is required. If a user has a valid date in the required field and then makes it invalid (either removes it or formats it incorrectly) we revert to the previous valid date. We do not however tell the user that we did this, which is bad especially for screen reader users.
Solution Notes:
This adds a revert tooltip which shows up and is announced on blur when the revert happens.
When the user re-focuses, we still show the "[field name] was reverted" at the start of the keyboard intructions.
This message is no longer shown if the user then re-blurs the field (unless they make the date invalid again).