The javascript that updates the date display when editing a date format seems to make navigating through the string tricky.

Steps to reproduce

Go to
Regional and language > Formats
Click Edit beside any of the date formats (e.g. admin/config/regional/date-time/formats/long/edit)
Tab or mouse click into the Format string field
SHIFT+right arrow to select text

On the right arrow keypress I can see the javascript progress throbber appearing and the selection highlighting disappears making it difficult to tell how much text has been selected.

Also when trying to right arrow through the string to place the cursor somewhere in the middle of the existing string, the cursor seems to get stuck in places. It doesn't seem to like spaces or punctuation and it can take 4-5 key presses to get past them.

Again the throbber appears on each left/right keypress.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

the_g_bomb’s picture

Component: locale.module » system.module

Apologies wrong component, I think.
Can the keyup event be made less sensitive so that it only triggers on valid keypresses that would change the text?
From line 2638 of system.admin.inc which is where I think this field is defined.

    '#ajax' => array(
      'callback' => 'system_date_time_lookup',
      'event' => 'keyup',
      'progress' => array('type' => 'throbber', 'message' => NULL),
    ),
the_g_bomb’s picture

Issue tags: +Accessibility, +keyboard focus

Adding tags for accessibility

mgifford’s picture

Issue tags: +JavaScript

Thanks for posting this. I don't know enough JS to determine if we can make the keypresses less sensitive.

mikedance’s picture

Attached is my first drupal patch to address this issue, can you please test and get back to me with any feedback.

I have modelled the functionality after the machine name [edit] pattern.

nod_’s picture

Status: Active » Needs work

JS doesn't follow coding standards and more importantly I don't understand why we'd need a jQuery plugin to do that?

mikedance’s picture

Attached is a simplified implementation removing the jquery plugin, and methods functions to use anonymous functions instead.

nod_’s picture

That looks real complicated. Can be simplified to:

$('#edit-date-format-refresh').once('DateFormatFormBase')
  .on('click', function (event) {
    // the event name should be without dots, they probably don't do what you expect.
    $('input[name="date_format_pattern"]').trigger('system-dateformatformbase-click');
  });

Reading the thread, it looks like the only thing needed in this patch is to change the keyup to keypress in the #ajax settings. We shouldn't need any JS and that JS is most likely insufficient for proper handling of the ajax stuff.

mradcliffe’s picture

I used simplytest.me to test the patch in Chrome.

Screenshots:

Typing in the format was less frustrating, but with no immediate feedback. I think this is OK if the autocomplete experience will frustrate users.
Typing in a format is easy, but no immediate visual feedback.

It was intuitive for me to click on View Example and see the format. If I were to bikeshed this issue, I might complain about the margins on the format string, but I am also not a designer.
Clicking view example shows the format

I used the keyboard to tab to View Example and then spacebar to activate. I do not know the behavior in a screen reader.
After using tab, then spacebar

mikedance’s picture

Attached is the latest patch with the concise jquery syntax.

I created a new branch from the 8.x and changed the #ajax event to keypress, and it wasn't working at all, if you've got any other suggestions im happy to try them out.

mgifford’s picture

Issue tags: +Needs reroll
mradcliffe’s picture

Status: Needs work » Needs review
FileSize
6.73 KB

Basic re-roll attached. May be a good time to look at the calls to the service container.

Status: Needs review » Needs work

The last submitted patch, 11: drupal8-date-formats-ajax-1904912-11.patch, failed testing.

mradcliffe’s picture

Status: Needs work » Needs review
FileSize
6.75 KB

Forgot to update 8.x. Fetched and rebased.

mgifford’s picture

Issue summary: View changes

Thanks @mradcliffe - your solution does work.

I do wonder though if we could get something more graceful.

Again it would be good of the throbber appeared on everything but the left/right arrows for instance. Though this likely isn't as easy to implement.

More possible however is using focusout() to trigger the action when that form element looses focus. That way there really would be no need for the [View example] link. Just leaving that element would have the same effect as clicking he View example link. I think that would be even better than the present option for usability.

I think that is the type of effect people want. I was actually expecting the [View example] link show something like the PHP manual link.

mgifford’s picture

Issue summary: View changes
nod_’s picture

Status: Needs review » Needs work
Issue tags: -Needs reroll

The patternFieldSuffix method looks really dodgy to me. I'm pretty sure we don't use those kind of strings anywhere in drupal core. Also it's not translatable.

    $output = <<<EOF
<small id="edit-date-format-refresh">
  <span class="admin-link">
    <button type="button" class="link">
      View Example
    </button>
  </span>
</small>
<small id="edit-date-format-suffix">
  {$input}
</small>
EOF;

I don't like the JS indentation, separating a function call over several line isn't great. If putting things in a line is a problem with the anon function, create a named function to reference in the call.

nod_’s picture

Status: Needs work » Closed (duplicate)

Let's fix that in #2429443: Date format form is unusable, we got rid of the Ajax thing altogether.