Issue #3259480: Make countdown message screen reader compatible

js/maxlength.js

@@ -92,6 +92,9 @@
     let counter = $('#' + obj.attr('id') + '-' + options.css);
     let limit = parseInt(obj.attr('data-maxlength'));
 
+    // Set the aria-describedby attribute to associate obj with the counter.
+    obj.attr('aria-describedby', counter.attr('id'));
+
     if (count === undefined) {
       count = ml.strip_tags(obj.val()).length;
     }
@@ -105,6 +108,21 @@
       counter.removeClass(options.cssWarning);
     }
 
+    // Announce important character count milestones to assist screen reader users.
+    switch (available) {
+      case 10:
+        Drupal.announce(Drupal.t('Only 10 characters left'));
+        break;
+      case 0:
+        Drupal.announce(Drupal.t('You have 0 characters left'));
+        break;
+      default:
+        if (available < 0) {
+          Drupal.announce(Drupal.t('You have exceeded the limit by @available characters', {'@available': Math.abs(available)}));
+        }
+        break;
+    }
+
     if (available < 0) {
       counter.addClass(options.cssExceeded);
       // Trim text.

tests/src/FunctionalJavascript/MaxLengthJavascriptTest.php

@@ -148,4 +148,57 @@ class MaxLengthJavascriptTest extends WebDriverTestBase {
     $this->assertTrue($this->getSession()->getPage()->findField('Link text')->getValue() === 'Strin');
   }
 
+  /**
+   * Tests the aria-describedby attribute setting by the maxlength.js script.
+   *
+   * This test method sets up a text field with a maxlength attribute,
+   * navigates to a form containing this field, and checks whether the
+   * aria-describedby attribute is correctly set by the maxlength.js script.
+   *
+   * @see \Drupal\maxlength\maxlength.js
+   */
+  public function testAriaDescribedbyAttribute() {
+    // Set up a field as in your other tests.
+    FieldStorageConfig::create([
+      'type' => 'string',
+      'entity_type' => 'entity_test',
+      'field_name' => 'foo',
+    ])->save();
+    FieldConfig::create([
+      'entity_type' => 'entity_test',
+      'bundle' => 'entity_test',
+      'field_name' => 'foo',
+      'label' => 'Foo',
+      'description' => 'Description of a text field',
+    ])->save();
+    $widget = [
+      'type' => 'string_textfield',
+      'third_party_settings' => [
+        'maxlength' => [
+          'maxlength_js' => 200,
+        ],
+      ],
+    ];
+    EntityFormDisplay::load('entity_test.entity_test.default')
+      ->setComponent('foo', $widget)
+      ->save();
+
+    $entity = EntityTest::create(['type' => 'entity_test', 'name' => 'Test']);
+    $entity->save();
+
+    // Log in and navigate to the entity edit form.
+    $this->drupalLogin($this->drupalCreateUser(['administer entity_test content']));
+    $this->drupalGet($entity->toUrl('edit-form'));
+
+    // Wait for the Maxlength script to do its thing.
+    $this->assertSession()->waitForElement('css', 'div.counter');
+
+    // Check the aria-describedby attribute on the field.
+    $field = $this->assertSession()->elementExists('css', '#edit-foo-0-value');
+    $this->assertTrue($field->hasAttribute('aria-describedby'), 'The aria-describedby attribute is set.');
+    $counter_id = $field->getAttribute('aria-describedby');
+    $counter = $this->assertSession()->elementExists('css', '#' . $counter_id);
+    $this->assertNotEmpty($counter, 'The described counter element exists.');
+  }
+
 }