1806587 - Decide if pressing Backspace on the Calendar button should reset the date and datetime-local inputs

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, enhancement)

Description

[Anna Yeddi [:ayeddi]]

+++ This bug was initially created as a clone of Bug #1804669 +++

Found in

• 109.0a1 (2022-12-08)

Affected versions

• Firefox Nightly 109.0a1 (2022-12-08)

Affected platforms

• Ubuntu, Mac, Windows

**Steps to reproduce [Outdated - see Comment 8] **

1. Reach url: data:text/html,<input type='datetime-local'> or data:text/html,<input type='date'>
2. Reach the Calendar button using Tab keyboard navigation.
3. Hit the Backspace button while focused on the Calendar button.

**Expected result [Outdated - see Comment 8] **

• The selected date should be deleted (the input value to be reset)

Actual result

1. (originally) Hitting the Backspace key while on the Calendar button will cause it to disappear.
2. (after the bug 1804669 is fixed) Nothing happens

Regression range
This issue is not a regression. It is an enhancement for the Calendar button, yet, the field used to have a Reset button prior to the Bug 1676068.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

:ayeddi, if you think that's a regression, could you try to find a regression range using for example mozregression?

Comment 2

[Anna Yeddi [:ayeddi]]

It is not a regression, but a possible enhancement

Comment 3

[Anna Yeddi [:ayeddi]]

Another resolution proposed is to add a Clear button to the date picker dialog, which would require UI changes and UX approval

Comment 4

[Anna Yeddi [:ayeddi]]

While Delete was not cleaning out the field (i.e. it does not on Firefox 107.0.1), we could also add it alongside the Backspace option

Comment 5

[Anna Yeddi [:ayeddi]]

Attachment: Bug 1806587 - Clear date/time/datetime-local input with Ctrl/Cmd + Delete/Backspace. r=emilio,masayuki

A workaround to provide opportunity to clear the <input type=date> and <input type=datetime-local> while an on-screen button option is being discussed.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7c63bcd50728
Clear date/time/datetime-local input with Ctrl/Cmd + Delete/Backspace. r=emilio,masayuki

Comment 7

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/7c63bcd50728

Comment 8

[Anna Yeddi [:ayeddi]]

Description updated in the course of consulting with the Accessibility, Layout, and DOM teams:

Steps to reproduce

1. Reach url: data:text/html,Date: <input type='date' value='2023-02-23'>, Time: <input type='time' value='12:34'>, Datetime: <input type='datetime-local' value='2023-02-23T12:34'>
2. Reach any part of any of these input fields using Tab keyboard navigation.
3. Hit the Delete key.
4. Hit the Backspace or Delete key while holding a modifier key: cmd on macOS or ctrl on others (Windows, Linux).
   [Added] Note: This behavior is not expected to apply for Calendar button.

Expected result

1. Delete clears out the editable part of the field that is currently focused
2. Ctrl/Cmd+Backspace/Delete clears out the entire focused input field (the input value is reset)

Actual result

1. Nothing happens

Comment 9

[Anna Yeddi [:ayeddi]]

Comment on attachment 9314139 [details]
Bug 1806587 - Clear date/time/datetime-local input with Ctrl/Cmd + Delete/Backspace. r=emilio,masayuki

Beta/Release Uplift Approval Request

• User impact if declined: The datepicker accessibility enhancement removed a button to clear the date/datetime-local input field and there were several users requesting to restore this functionality. While an on-screen button on a datepicker panel or similar solution is being discussed with the UX team (tracked in bug 1811187), this patch provides a discoverable keyboard shortcut to clear the entire field, if a user wants to.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: ## Description updated in the course of consulting with the Accessibility, Layout, and DOM teams:

Steps to reproduce

1. Reach url: data:text/html,Date: <input type='date' value='2023-02-23'>, Time: <input type='time' value='12:34'>, Datetime: <input type='datetime-local' value='2023-02-23T12:34'>
2. Reach any part of any of these input fields using Tab keyboard navigation.
3. Hit the Delete key.
4. Hit the Backspace or Delete key while holding a modifier key: cmd on macOS or ctrl on others (Windows, Linux).

Expected result

1. Delete clears out the editable part of the field that is currently focused
2. Ctrl/Cmd+Backspace/Delete clears out the entire focused input field (the input value is reset)

Actual result

1. Nothing happens

• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): The change has low risk, because no UI is changed and only an additional keyboard shortcuts are added which would enhance an existent behavior and would not cause removal or change of existent patterns. The patch includes automatic tests as well and the change was discussed and r+ed by the DOM/keyboard shortcuts team as well to ensure no overlapping functions are affected.
• String changes made/needed: none
• Is Android affected?: No

Comment 10

[Pascal Chevrel:pascalc]

Comment on attachment 9314139 [details]
Bug 1806587 - Clear date/time/datetime-local input with Ctrl/Cmd + Delete/Backspace. r=emilio,masayuki

Approved for our last 110 beta, thanks.

Comment 11

[Pascal Chevrel:pascalc]

https://hg.mozilla.org/releases/mozilla-beta/rev/6ac043aa603b

Comment 12

[Rares Doghi, Desktop QA]

This issue is verified as fixed in our latest Beta 110.0b9 (64-bit) as well as our latest Nightly Build 111.0a1 (2023-02-01), However Its mentioned in the description that If a user reaches the Calendar button using tab and then Hits Backspace or Delete.. it should erase all fields.

Ctrl Delete and Ctrl Backspace does in fact erase all fields but only if the user is focused on one of them. Simple Backspace or Delete will only erase the field that the user is focused on which works great, but focusing the Calendar button and then hitting Delete or Backspace does nothing.
@Anna is this intended behavior ?

Comment 13

[Anna Yeddi [:ayeddi]]

(In reply to Rares Doghi from comment #12)

This issue is verified as fixed in our latest Beta 110.0b9 (64-bit) as well as our latest Nightly Build 111.0a1 (2023-02-01), However Its mentioned in the description that If a user reaches the Calendar button using tab and then Hits Backspace or Delete.. it should erase all fields.

Ctrl Delete and Ctrl Backspace does in fact erase all fields but only if the user is focused on one of them. Simple Backspace or Delete will only erase the field that the user is focused on which works great, but focusing the Calendar button and then hitting Delete or Backspace does nothing.
@Anna is this intended behavior ?

@Rares, thank you for clarifying it! The Calendar button shortcut was omitted because it would be hard to discover and it is also kind of far for a user to navigate there if they can clear the field via one of elements before.

Apologies for failing to mention it in the updated description earlier - I added a note in the comment #8:

[Added] Note: This behavior is not expected to apply for Calendar button.

Comment 14

[Rares Doghi, Desktop QA]

Updating the remaining flags, Thank you for clearing that up! This issue is verified as fixed in our latest Beta and Nightly builds.

Comment 15

[Anna Yeddi [:ayeddi]]

[Tracking Requested - why for this release]:
Refer to comment #9

Proposed release note in New:

Date, time, and datetime-local input fields can now be cleared with Cmd+Backspace and Cmd+Delete shortcut on Mac and Ctrl+Backspace and Ctrl+Delete on Windows and Linux

Comment 16

[Pascal Chevrel:pascalc]

Note added to our beta release notes (https://www.mozilla.org/en-US/firefox/110.0beta/releasenotes/) as well as our Final release notes document.