Problem/Motivation
- a content type
- with a date time field
- with "Select" chosen as the widget on "Manage form display"
The UX of the select elements is not great.
If no default datetime is given, a row of blank select boxes is presented:
Proposed resolution
Supply pseudo values like "-Year-" etc. instead of having each box blank when no default is given:
This can be accomplished using the FAPI '#empty_option' attribute.
Remaining tasks
None.
User interface changes
The select widget for datetime entry will now have empty options, which will be user facing text to serve as labels for the various selects.
API changes
None.
Data model changes
None.
Disruption
None. We are not introducing new strings, so this should be eligible for 8.1.x under https://www.drupal.org/core/d8-allowed-changes per
- non-disruptive bug fixes, where the bug is under the "Incorrect or misleading user interface text" category
Comment | File | Size | Author |
---|---|---|---|
#23 | 2561993-23.patch | 3.91 KB | jhedstrom |
#23 | 2561993-23-TEST-ONLY.patch | 3.39 KB | jhedstrom |
Comments
Comment #2
jonathanshawComment #3
emma.mariaComment #4
jonathanshawScreenshots attached, "needs screenshot" tag removed
Comment #5
jonathanshawComment #6
joelpittetThis actually looks more like a usability bug than a feature reqest. We may be able to get this in a 8.0.1 bug fix I think.
Comment #7
emma.mariaThe screenshots posted so far are for the Seven theme.
Bartik looks like this...
Which component should this be filed under? It's not theme specific.
Comment #8
yoroy CreditAttribution: yoroy as a volunteer commentedMaybe Field UI is the right component for this.
Actually providing the option to have select lists for this may be the acual bug because this doesn't seem useful to me at all. But I'm sure we can come up with a use case where this is what you want.
What about removing the option to not have a default value for these? Another option is to have "Year", "Month", "Day", etc. as the first values in each list and show those as selected when no default date is specified.
Comment #9
jonathanshawSometimes you know any default will be wrong. And a default that is wrong can be more confusing and more mental work for the user than a blank canvas.
+1
-Label- is the pattern in other places.
Comment #10
yoroy CreditAttribution: yoroy as a volunteer commentedDon't think I agree that a blank canvas is clearer than a prefilled date. They’d be equally "wrong", but with a default date you can at least recognize the pattern.
Adding values of -Year-, -Month- on top of each list seems like the quickest reasonable fix indeed.
Comment #11
swentel CreditAttribution: swentel commentedComment #12
mpdonadioThis could be a dup of #1918994: Improve Datetime and Daterange Widget accessibility.
Comment #13
jonathanshaw@mpdonadio, good point.
I've removed the reference to spacing and focused on the labelling issue which seems to overlap less with the other issue.
Comment #14
mpdonadioChanging to 8.1.x since we will be adding strings, so this can't be in a patch update.
I think adding -Year-, -Month-, etc is a good solution here (IS should be adjusted). Likely also need to adjust the validation on these, and add some test coverage to make sure the validation doesn't break in the future.
Comment #15
yoroy CreditAttribution: yoroy as a volunteer commentedComment #16
jonathanshawChanged the "before" screenshot to be a like-for-like comparison with the "after" screenshot
Comment #18
jhedstromHere's a fix that uses the
#empty_option
property forSelect
elements to address this issue. It doesn't add the-
as suggested, but here's what it looks like just using the element title:The IS seems up-to-date.
I'm not sure if we need to write a test for this, unless we just want to verify that the
#empty_option
is properly used for each date part?Comment #20
jhedstromThe fail is unrelated.
Comment #21
mpdonadioMoving back to NR b/c #2724871: Random failure in \Drupal\migrate_drupal_ui\Tests\d7\MigrateUpgrade7Test.
I think I like this approach. That class is really weird, though. It's hard to read that w/o noting all of the quirks.
Core is pretty inconsistent about '- Foo -' vs 'Foo' for #empty_option; there may be more uses with the hyphen. Personally, I think the UX is better here without (since they are all in a row). @yoroy, what do you think?
Not seeing coverage for #empty_option anywhere else, but it couldn't hurt to add to DateTimeFieldTest::testDatelistWidget() if the xpath isn't that difficult.
Comment #22
yoroy CreditAttribution: yoroy as a volunteer commentedI think the pattern is to have the added hyphens, but I'm fine with leaving them out here. The labels are already wider than most of the acutal values, so I prefer compactness over consistency here.
Comment #23
jhedstromThis adds a test for the labels. I also added a new method to the AssertContentTrait for finding select options via their text rather than their value.
Comment #25
mpdonadioPlayed with this applied. Nice simple approach that leverages the FAPI for what it is meant for. We are not introducing new strings, so this should be eligible for 8.1.x under https://www.drupal.org/core/d8-allowed-changes per
- non-disruptive bug fixes, where the bug is under the "Incorrect or misleading user interface text" category
Setting RTBC, assuming this will also pass under 8.1.x.
Comment #26
mpdonadioComment #27
alexpottNice bug fix. Committed 7d3ab5a and pushed to 8.1.x and 8.2.x. Thanks!