By lauriii on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
9.1.x
Introduced in version: 
9.1.0-alpha1
Issue links: 
https://www.drupal.org/node/3067523
Description: 

Some js- prefixed classes in the password confirm widget have been replaced with a data-drupal-selector attribute.

New data-drupal-selector selector Old CSS class (if replaced)
password-strength-indicator js-password-strength__indicator
password-strength-text js-password-strength__text
password-confirm-message js-password-confirm-message
password-match-status-text (see below)

Regarding data-drupal-selector="password-match-status-text"
Drupal.theme.passwordConfirmMessage now has to return a element with a data-drupal-selector="password-match-status-text" attribute. This new was added to allow the password match status text to be styled differently from the preceding text defining its role (currently "Passwords match:")

Before:

  Drupal.theme.passwordConfirmMessage = passwordSettings => {
    const confirmTextWrapper =
      '<span></span>';
    return `<div aria-live="polite" aria-atomic="true" class="password-confirm-message js-password-confirm-message" data-drupal-selector="password-confirm-message">${passwordSettings.confirmTitle} ${confirmTextWrapper}</div>`;
  };

After:

  Drupal.theme.passwordConfirmMessage = passwordSettings => {
    const confirmTextWrapper =
      '<span data-drupal-selector="password-match-status-text"></span>';
    return `<div aria-live="polite" aria-atomic="true" class="password-confirm-message js-password-confirm-message" data-drupal-selector="password-confirm-message">${passwordSettings.confirmTitle} ${confirmTextWrapper}</div>`;
  };
Impacts: 
Module developers
Themers