In my opinion, "password matches" indicator (label followed up by the value) should be placed after the "confirm password" field, not before.

In addition to this (I don't know if this is possible) it would be great that when a user is typing into the "confirm password" field he/she could ear when password and "confirm password" field matches, as it happens for value changes of the "password strength" indicator.

Do you think it would be possible to implements these features? I have to say that the first one is really important for drupal accessibility, the second one would be really a great thing to have!

Files: 
CommentFileSizeAuthor
#66 move-password-match-and-strength-1811240-66.patch4.54 KBmgifford
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 66,480 pass(es).
[ View ]
#61 PasswordsAndScreensavers.png437.06 KBmgifford
#60 move-password-match-and-strength-1811240-59.patch4.68 KBmgifford
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch move-password-match-and-strength-1811240-59.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#58 move-password-match-and-strength-1811240-58.patch4.75 KBmgifford
PASSED: [[SimpleTest]]: [MySQL] 59,856 pass(es).
[ View ]
#57 move-password-match-and-strength-1811240-56.patch4.46 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] 59,465 pass(es), 1 fail(s), and 0 exception(s).
[ View ]
#52 move-password-match-and-strength-1811240-52.patch4.46 KBjmuzz
PASSED: [[SimpleTest]]: [MySQL] 59,831 pass(es).
[ View ]
#43 Password_secure_edit_text.png93.89 KBmgifford
#43 Confirm_password_secure_edit_text.png100.12 KBmgifford
#43 Fair.png129.65 KBmgifford
#43 Yes_not.png70.93 KBmgifford
#40 passwd.jpg56.41 KBdcrocks
#35 move-password-match-and-strength-1811240-35.patch2.96 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-35.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#32 move-password-match-and-strength-1811240-32.patch2.96 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-32.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#29 move-password-match-and-strength-1811240-29.patch2.92 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-29.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#27 move-password-match-and-strength-1811240-27.patch2.9 KBmgifford
PASSED: [[SimpleTest]]: [MySQL] 56,954 pass(es).
[ View ]
#22 move-password-match-and-strength-1811240-22b.patch2.91 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-22b.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#19 move-password-match-and-strength-1811240-19.patch6.64 KBmgifford
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-19.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#16 move-password-match-and-strength-1811240-16.patch2.81 KBmgifford
PASSED: [[SimpleTest]]: [MySQL] 48,653 pass(es).
[ View ]
#16 PasswordStrengthAria.png194.13 KBmgifford
#10 move-password-match-and-strength-1811240-10.patch2.94 KBDevin Carlson
FAILED: [[SimpleTest]]: [MySQL] 50,757 pass(es), 1 fail(s), and 0 exception(s).
[ View ]
#8 Password_order.png189.95 KBmgifford
#7 move-password-match-and-strength-1811240-6.patch1.96 KBDevin Carlson
PASSED: [[SimpleTest]]: [MySQL] 48,220 pass(es).
[ View ]
#4 PasswordConfirmation.png155.88 KBmgifford

Comments

Category:bug» feature

Recategorizing as a feature, as indicated by the OP.

Title:Improve "password matches" accessibilityImprove "password matches" and "password strength" accessibility

Also, since #1811228: Improve password strength indicator accessibility is dealing with the same exact widget on the same form, let's merge the two.

Just wanted to confirm that the order of the elements does not follow how they are visually presented. It would be more consistent for sure to switch the order so that the confirmation (and strength for that matter) is displayed after the password form rather than before it.

With the "confirm password" field, are you looking for a more assertive ARIA? Do you have other examples we could look at to see where this is done better?

StatusFileSize
new155.88 KB

Attaching screenshot.

Hi mgifford,

with "confirm password" I am referring to the field where you can enter the chosen password again (for confirmation).

Also, I would like to remember that (differently from what happens with the "password strength" indicator) the "password matches" indicator value is shown before the label (and both them are shown before the "confirm password" field).

Issue tags:+a11ySprint

This should just be an order of operations thing. Someone needs to write the patch though.

Status:Active» Needs review
StatusFileSize
new1.96 KB
PASSED: [[SimpleTest]]: [MySQL] 48,220 pass(es).
[ View ]

A patch to change the markup order from adding the password strength indicator and passwords confirm text above the field to below the field.

Some margins had to be removed because the original placement of the text (above the fields) required some padding to move the text inline with the actual fields.

StatusFileSize
new189.95 KB

We should have more cross browser testing, but from the looks of this patch we're very close to RTBC.

Category:feature» task
Status:Needs review» Needs work

@Devin Carlson: ok, the "confirm password" indicator is placed after the "confirm password" field. Very good.

Since
http://drupal.org/node/1811228
has been closed as a duplicate of this issue, this patch still needs to address a problem from that issue:
the password strength indicator value should be placed after the "password strength" label, not before.

And, finally, just a wish: could we emulate the password strength indicator value behavior for the password match indicator value, so that screen readers will read the new value on change?

Btw, since this is only refactoring, I am turning this issue into a task, so that feature freeze won't block it...

Status:Needs work» Needs review
StatusFileSize
new2.94 KB
FAILED: [[SimpleTest]]: [MySQL] 50,757 pass(es), 1 fail(s), and 0 exception(s).
[ View ]

Updated patch that addresses the issues described in #9.

Changes:

  • Moved password-confirm specific variables to the top of the passwordCheckMatch function as is done with the passwordCheck function.
  • Added similar <div> and <span> wrappers to the password confirm title and text as are added to the password strength title and text.
  • Added aria-live="assertive" to the password confirm text.
  • Changed the order that password strength text vs. title is printed to make the title come before the text.

slightly related: #432962: Add option to disable password strength checking
which found related: #1882474: Password strength indicator display broken in install process

might need a reroll (if it does and someone new wants to try, here is a reroll doc: http://drupal.org/patch/reroll)

Interesting - I'm not sure without checking how this is affecting the work myself and @dags have been doing on #432962: Add option to disable password strength checking but FYI we've split the password strength indicator and the password matches functionality into two functions now, they were part of the same thing before. Will have a look when I get a mo (i.e. when not replying to emails I get at 3.50am ;)

Status:Needs review» Needs work

The last submitted patch, move-password-match-and-strength-1811240-10.patch, failed testing.

Issue tags:+Needs tests

Tagging

Status:Needs work» Needs review
StatusFileSize
new194.13 KB
new2.81 KB
PASSED: [[SimpleTest]]: [MySQL] 48,653 pass(es).
[ View ]

Adding a new patch, but want to ask that the same aria tool be added to the Passwords match so that the user is alerted when no=yes -> <span class="error">no</span>

Hi again. I've just posted an updated patch for #432962-70: Add option to disable password strength checking which seems to be on the same code you're working on.

Did mention previously - not sure best approach, I guess depends on which one gets committed first? I don't think there's much of an issue, just that code is moving around so thought I'd give a heads up.

If this is not an issue for you then fine, thought better out than in ;)

Thanks Steve. Really appreciate knowing that. I'm mostly working on just pushing ahead the patch. I'm not a JS guy. Couldn't even add the "password matches" piece with my level of JS knowledge.

Not sure that it would speed up either of the issues to try to merge them. I'm always happy for suggestions and will keep an eye on the disable password strength checking code.

StatusFileSize
new6.64 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-19.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Since #432962-98: Add option to disable password strength checking is now RTBC, I'm just re-rolling #16 to accommodate. If that patch gets in, we should be good.

Status:Needs review» Needs work
Issue tags:+Needs tests, +accessibility, +a11ySprint

The last submitted patch, move-password-match-and-strength-1811240-19.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new2.91 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-22b.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Let's try that again.

Status:Needs review» Needs work

Testing on Windows/FF/NVDA.

  1. I "password strength" indicator is still shown before the "password" field;
  2. The "password match" indicator doesn't appear at all

So to get this issue fixed, I think we need to edit the patch to that it:

  1. Moves the password strength indicator after the "password" field;
  2. (maybe) uses the new drupalAnnounce() method for ARIA live regions;
  3. creates an ARIA live region for the "password match" indicator.

Status:Needs work» Needs review
Issue tags:-Needs tests, -accessibility, -a11ySprint

Status:Needs review» Needs work
Issue tags:+Needs tests, +accessibility, +a11ySprint

The last submitted patch, move-password-match-and-strength-1811240-22b.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new2.9 KB
PASSED: [[SimpleTest]]: [MySQL] 56,954 pass(es).
[ View ]

Just a re-roll.

I do think the password strength indicator is showing up after the DOM properly.. Not sure.. The aria-live is there I think.

However, haven't looked at drupalAnnounce(). But the password match indicator just doesn't seem to appear.

StatusFileSize
new2.92 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-29.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Don't think this is right either, but it's now using Drupal.announce() in this patch.

Status:Needs review» Needs work
Issue tags:+Needs tests, +accessibility, +a11ySprint

The last submitted patch, move-password-match-and-strength-1811240-29.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new2.96 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-32.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

re-roll as user.css moved to css/user.module.css

Status:Needs review» Needs work
Issue tags:+Needs tests, +accessibility, +a11ySprint

The last submitted patch, move-password-match-and-strength-1811240-32.patch, failed testing.

Status:Needs work» Needs review
StatusFileSize
new2.96 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch move-password-match-and-strength-1811240-35.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

re-roll

Issue tags:+TwinCities

StatusFileSize
new56.41 KB

Installed patch in #35 on a D8 cloned from git. The appearance is pretty bad(OS X and FF 24.0). It changes dramatically and tends to look better as the page is narrowed.
install page

Status:Needs review» Needs work

Patch #1839318: Replace drupal.base.css library with normalize.css for all themes went in and there appears to be some overlap with this one. Might explain my results. Needs a reroll.

It's not clear to me. Is this patch still needed, does the problem still exist?

StatusFileSize
new70.93 KB
new129.65 KB
new100.12 KB
new93.89 KB

Yes @dcrocks, this is definitely still a problem.

When I tried the last patch it was definitely broken, but at the moment this functionality is broken in Core.

So firstly, with VoiceOver in Safari, in navigating down the http://sadaf3d61e4fa7e9.s3.simplytest.me/user/1#overlay=user/1/edit everything seems to work well until you hit the Password field. At that point it doesn't speak, but VoiceOver does display what it should be saying in VoiceOver. Not sure why.

Password secure edit text

The same thing happens when you go to confirm Confirmation field. It should announce that you are on that input form, but it doesn't. The text from VoiceOver looks like it does, but it was silent (unlike every other field on that page).

Confirm password secure edit text

VoiceOver does announce when there is a Fair or Good password.

Fair

But doesn't say anything if it doesn't match.

Yes not

Let me know if further confirmation is required.

The last submitted patch, 35: move-password-match-and-strength-1811240-35.patch, failed testing.

Issue summary:View changes
Status:Needs work» Needs review
StatusFileSize
new2.96 KB
PASSED: [[SimpleTest]]: [MySQL] 59,284 pass(es).
[ View ]

Reroll

This patch move-password-match-and-strength-1811240-45.patch is not working.
Instead of Password strength, it is showing undefined and Passwords match is also not displaying

Ok, it should get set back to needs work. Also useful to produce a screenshot, but not a big deal on that.

Status:Needs review» Needs work

setting it to needs work

Status:Needs work» Needs review
StatusFileSize
new4.43 KB
FAILED: [[SimpleTest]]: [MySQL] 59,755 pass(es), 2 fail(s), and 1 exception(s).
[ View ]

I agree with replacing the aria-live tags with Drupal.announce calls because the text in the tags themselves isn't the best way to say the information being presented. The problem is that Drupal.announce doesn't output the text it's given because its purpose is to explain changes that won't necessally be represented by text on the page. Also, the announce calls should happen every time the widget changes its info, so just putting them in the page load isn't sufficient.

Here's a version of the patch that fixes the problem described in #47 as well as announcing the changes as they happen in the widget.

StatusFileSize
new4.46 KB
PASSED: [[SimpleTest]]: [MySQL] 59,831 pass(es).
[ View ]

Re-added 'assertive' argument to announce calls and added a missing translation call.

The last submitted patch, 51: move-password-match-and-strength-1811240-51.patch, failed testing.

The confirmation boxes didn't seem to line up in my test. Also I do think the confirmation should all be in one line. Even if only for formatting purposes.

StatusFileSize
new4.46 KB
FAILED: [[SimpleTest]]: [MySQL] 59,465 pass(es), 1 fail(s), and 0 exception(s).
[ View ]

didn't attach it in #56 apparently.

StatusFileSize
new4.75 KB
PASSED: [[SimpleTest]]: [MySQL] 59,856 pass(es).
[ View ]

More CSS alignment.

Apparently that div was needed. I gotta get my local install up again.

StatusFileSize
new4.68 KB
FAILED: [[SimpleTest]]: [PHP 5.4 MySQL] Unable to apply patch move-password-match-and-strength-1811240-59.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

StatusFileSize
new437.06 KB

Here's a screenshot with text for VoiceOver's feedback. It seems to work well.

The last submitted patch, 57: move-password-match-and-strength-1811240-56.patch, failed testing.

Status:Needs review» Needs work

The last submitted patch, 60: move-password-match-and-strength-1811240-59.patch, failed testing.

Issue tags:+Needs reroll

Status:Needs work» Needs review
StatusFileSize
new4.54 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 66,480 pass(es).
[ View ]

Hope the bot likes this.

Issue tags:-Needs reroll