When the date popup widget is used, underneath each date and time textfield is text like "E.g., 08/09/2011" to show people what format to use when they are entering a date.

This description is unnecessary when the calendar popup (for dates) or the wvega timepicker (for times) are being used, since the popup widget will automatically fill things in using the correct format. So, this patch hides the description in those cases (for users with JavaScript turned on).

I also removed the associated TODO in the code, since I'm pretty sure it was referring to something along these lines.

CommentFileSizeAuthor
#27 date_popup_elements_description-1244458-27.patch5.47 KBJuterpillar
#23 date_popup_elements_description-1244458-23.patch5.59 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch date_popup_elements_description-1244458-23.patch. Unable to apply patch. See the log in the details link for more information. View
#21 date_popup_elements_description-1244458-21.patch5.45 KBvasike
PASSED: [[SimpleTest]]: [MySQL] 5,238 pass(es). View
#20 date_elements_description-1244458-20.patch1.34 KBvasike
PASSED: [[SimpleTest]]: [MySQL] 5,238 pass(es). View
#19 date-1244458.patch795 bytescatch
PASSED: [[SimpleTest]]: [MySQL] 5,238 pass(es). View
#14 Date-Format.png13.78 KBTsubo
js-hide-date-time-format-descriptions.patch1.86 KBDavid_Rothstein
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch js-hide-date-time-format-descriptions.patch. Unable to apply patch. See the log in the details link for more information. View
Members fund testing for the Drupal project. Drupal Association Learn more

Comments

David_Rothstein’s picture

I should mention that we need to think carefully about the accessibility implications here. I don't know how accessible these datepicker and timepicker plugins actually are; for example, when I tried it myself using the keyboard, I have to admit I couldn't figure out how to use the datepicker (the timepicker was easy, though). I also don't know what the situation is for screen readers.

In the case that these aren't very accessible, that means some users will have to resort to manual entry (even if they have JavaScript enabled and the popups are available), so in that case this description is useful and we might not want to do this patch after all.

KarenS’s picture

Status: Needs review » Needs work

I've been thinking about other alternatives for these descriptions. I think we should put the description into a theme so it can be overridden. That would make it possible to hide it or show it site-wide and to alter the exact text used. I also was looking at the Hint module, so offering an option to show the description as a hint would be a nice option (in that case it would just display a formatted date inside the date box that disappears if you click on it rather than displaying the description below the date). If we pass enough information to the theme someone could decide to hide the description in some places and show it in others (when it is in a Views exposed filter vs when it is on a node form, for instance). We could also make these kinds of options available as settings.

As you say, we also have to think about accessibility. The calendar widget is the jQuery UI default calendar picker so I'm a bit surprised it is a problem. I wonder if there are settings we can add to the popup that would make it work better when using a keyboard?

KarenS’s picture

From the datepicker demo page:

You can use keyboard shortcuts to drive the datepicker:

    page up/down - previous/next month
    ctrl+page up/down - previous/next year
    ctrl+home - current month or open when closed
    ctrl+left/right - previous/next day
    ctrl+up/down - previous/next week
    enter - accept the selected date
    ctrl+end - close and erase the date
    escape - close the datepicker without selection

It works once you know what it is using. It would be nice to have a way to show how that works. I wonder about changing the description to a 'help' link just to the right of the textfield that pops up a window that shows the expected format for the date and also describes the keyboard shortcuts?

KarenS’s picture

The more I think about it the more I like the idea of a help link (it could be a help icon) just to the right of any textfields -- the date and time fields used by date_popup and the textfield used by date_text. It takes up less screen real estate (which is part of the problem with the current descriptions), but allows us to provide as much information as necessary to use the element. So the date popup would describe the expected format and show the keyboard shortcuts, the time textfield could do the same (adjusting the explanation based on which timepicker option is being used), and the plain text field would pop up just the expected format (since there are no keyboard shortcuts). I assume a description popup is still accessible and could be made to work either with or without javascript.

What do you think about that idea? Would you be willing to implement it?

KarenS’s picture

Title: Hide the date and time format descriptions when an appropriate JavaScript-based popup is being used » Better handling for the date format descriptions

A better title.

KarenS’s picture

Marking #1065438: More control over format examples in description as a duplicate. It has some other ideas and points out another reason to fix this -- we are man-handling the description field and making it hard for anyone to override it. Switching to a help icon would allow us to leave #description alone.

Everett Zufelt’s picture

I am happy to take a look at a demo using a few different screen-reader / browser combinations if you provide me a demo URL and a task to complete.

As a general rule date pickers are poorly accessible, particularly to screen-reader users. I am not surprised that jQuery date picker is hard to use from the keyboard, it is a complex UI component with complicated (too complicated) keyboard interaction.

David_Rothstein’s picture

Thanks Everett! I was going to try to set something up for you today, but the online dev environment I usually use for that isn't working, so I'll try again tomorrow.

Karen, the help icons mostly seem like a good idea to me, although I wonder if it's going to encourage more people to click on them than need to? Right now, the only thing there is to click on is the textfield, and when I click on it, it pops up the calendar/timepicker at which point I know what to do. If I see the help icon beforehand, I might be tempted to click on it instead and then get lost in the details....

I'll also try to run this by Noyz and see what he thinks. Not sure if we'll have time to work on implementing something more complicated here, though (I think it's not a huge priority for us to remove the description; and the current one at least does have the advantage that it's good for accessibility since it allows people to understand what text to type directly into the box if they need to).

KarenS’s picture

If we don't do the help icon we still have the problem that we've made the description un-alterable. Putting it into a theme would at least make it possible to change the text (or remove it).

Yes, if you click on the datepicker it pops up the calendar and you 'know what to do' if you use a mouse. If you need a keyboard you are clueless about how to make it work. Although I suppose you can still type directly into the textfield in that case.

[Edit] I tried to see what exactly happens if you try to manipulate it entirely with a keyboard, no mouse. In that case when you get to the date you can type it into the box and no calendar pops up (so you don't need instructions on how it works). The same for the timepicker, you type directly into the box and nothing pops up that needs to be explained. It will be nice to confirm what happens with a screen reader, but it does look like it's accessible with a keyboard. If it's also OK in a screen reader, then maybe the only change we need to make is to theme the description so it can be overridden.

David_Rothstein’s picture

Everett: I hacked together a demo site for you here: http://twomice.org/d7test/

Username and password are both "test". I'll leave it up for a little while, at least.

When you log in with that account, you should be able to create article content (you'll have permission to add a title and date field only). Try out the experience of adding a date to the article while creating it.

I guess we're looking for feedback on the process of using the JavaScript datepicker and timepicker themselves (though that's mainly for the authors of those libraries), but also, in the case where the datepicker and timepicker are hard to use, how easy it is to figure out how to bypass those and enter a date+time without using those popup widgets.

Thanks!

Everett Zufelt’s picture

David, I'll take a look tomorrow. Thanks.

Everett Zufelt’s picture

I took a quick look at the widget using JAWS 12 / FF 5. When I tab into the date field nothing happens. This means that the date picker isn't accessible to me, but it also means that it doesn't appear to interfere w/ me entering a date.

In order to find the format of the date I needed to pass the field and read the description. Which, IMO, makes the description pretty important. Unfortunately, at this time, the description of a form field is not programmatically associated with the field, so there is no way for this information to be automatically voiced by a screen-reader. This is important as some screen-reader users tab through a form (from one field to the next), while others navigate the form / page line by line. Those navigating line by line will find the description, those tabbing through the form fields will not.

See related: #405360: Use aria-describedby to link form elements with form element descriptions

Tsubo’s picture

FileSize
13.78 KB

There's an even larger usability issue here. The date "Format" description underneath the date widget actually show the 'converted' date not the actual format. i.e if my date format is d/m/y it actually says "Format: 04/02/2012" which is practically useless depending on the day... since it does not allow me to determine if the day or month comes first.

See attached image for clarity.

The date Format description should show the unconverted format. i.e dd/mm/yyyy etc.

grantlucas’s picture

Chiming in here to see if there's been any progress on this issue.

@Tsubo makes a good point that showing the converted date can be pretty unclear depending on the format. I would make much more sense to show the unconverted format.

KarenS’s picture

It's easy to say things like 'show the unconverted format', but I don't know how we can do that. We have format strings that look like 'm/d/Y g:i a'. You want to create a way to convert that into something like 'MM/DD/YYYY HH:MM AM' for every possible format string? Keep in mind that the format strings have lots of options and also can have lots of escaped non-date content in them, like punctuation and other text prepending or postpending some of the elements. I don't think this is reasonably possible to do. The best we can do is display a known date using the format string. And that comes down to figuring out what known date will work best.

Tsubo’s picture

Any hard coded date where the day is greater than the 12th so it can't possibly confused with the month will do.

27/01/2012

or

01/27/2012

etc

Tsubo’s picture

Any movement on this? Some good ideas from KarenS..... but looks as if I'll have to go with David's patch and then specify the correct format in the help text instead, unless a suitable solution is agreed.

catch’s picture

Status: Needs work » Needs review
FileSize
795 bytes
PASSED: [[SimpleTest]]: [MySQL] 5,238 pass(es). View

I ran into this issue - the description does indeed look odd and there's not a nice way to remove it since it's added in process.

Attaching a patch that adds the example date as a placeholder attribute instead.

vasike’s picture

FileSize
1.34 KB
PASSED: [[SimpleTest]]: [MySQL] 5,238 pass(es). View

#19 is an elegant solution, but the time element description is not changed.
patch updated.

vasike’s picture

FileSize
5.45 KB
PASSED: [[SimpleTest]]: [MySQL] 5,238 pass(es). View

here is a new patch that add a display settings both for date instance fields or views date filters for date popup type.

vasike’s picture

Issue summary: View changes

fixed small typo

mgifford’s picture

Issue summary: View changes
Status: Needs review » Needs work
Issue tags: +Needs reroll
mgifford’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
5.59 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch date_popup_elements_description-1244458-23.patch. Unable to apply patch. See the log in the details link for more information. View

re-roll...

Status: Needs review » Needs work

The last submitted patch, 23: date_popup_elements_description-1244458-23.patch, failed testing.

biarr’s picture

I applied patch manually and it works as expected. Thanks!

Juterpillar’s picture