Issue #2805205 by andrewmacpherson, michielnugter, lauriekap, BarisW, pk188, Ehud, arunkumark, SteffenR, Lendude, droplet, alexpott, xiwar: Provide screen-reader feedback when filtering by block name

core/modules/block/block.libraries.yml

@@ -16,4 +16,6 @@ drupal.block.admin:
   dependencies:
     - core/jquery
     - core/drupal
+    - core/drupal.announce
+    - core/drupal.debounce
     - core/drupal.dialog.ajax

core/modules/block/js/block.admin.es6.js

@@ -3,7 +3,7 @@
  * Block admin behaviors.
  */
 
-(function ($, Drupal) {
+(function ($, Drupal, debounce) {
   /**
    * Filters the block list by a text input search string.
    *
@@ -53,6 +53,13 @@
         // Filter if the length of the query is at least 2 characters.
         if (query.length >= 2) {
           $filter_rows.each(toggleBlockEntry);
+          Drupal.announce(
+            Drupal.formatPlural(
+              $table.find('tr:visible').length - 1,
+              '1 block is available in the modified list.',
+              '@count blocks are available in the modified list.'
+            )
+          );
         }
         else {
           $filter_rows.each(function (index) {
@@ -63,7 +70,7 @@
 
       if ($table.length) {
         $filter_rows = $table.find('div.block-filter-text-source');
-        $input.on('keyup', filterBlockList);
+        $input.on('keyup', debounce(filterBlockList, 200));
       }
     },
   };
@@ -90,4 +97,4 @@
       }
     },
   };
-}(jQuery, Drupal));
+}(jQuery, Drupal, Drupal.debounce));

core/modules/block/js/block.admin.js

@@ -5,7 +5,7 @@
 * @preserve
 **/
 
-(function ($, Drupal) {
+(function ($, Drupal, debounce) {
   Drupal.behaviors.blockFilterByText = {
     attach: function attach(context, settings) {
       var $input = $('input.block-filter-text').once('block-filter-text');
@@ -24,6 +24,7 @@
 
         if (query.length >= 2) {
           $filter_rows.each(toggleBlockEntry);
+          Drupal.announce(Drupal.formatPlural($table.find('tr:visible').length - 1, '1 block is available in the modified list.', '@count blocks are available in the modified list.'));
         } else {
           $filter_rows.each(function (index) {
             $(this).parent().parent().show();
@@ -33,7 +34,7 @@
 
       if ($table.length) {
         $filter_rows = $table.find('div.block-filter-text-source');
-        $input.on('keyup', filterBlockList);
+        $input.on('keyup', debounce(filterBlockList, 200));
       }
     }
   };
@@ -51,4 +52,4 @@
       }
     }
   };
-})(jQuery, Drupal);
+})(jQuery, Drupal, Drupal.debounce);

core/modules/block/tests/src/FunctionalJavascript/BlockFilterTest.php

@@ -0,0 +1,93 @@
+<?php
+
+namespace Drupal\Tests\block\FunctionalJavascript;
+
+use Behat\Mink\Element\NodeElement;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests the JavaScript functionality of the block add filter.
+ *
+ * @group block
+ */
+class BlockFilterTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['user', 'block'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $admin_user = $this->drupalCreateUser([
+      'administer blocks',
+    ]);
+
+    $this->drupalLogin($admin_user);
+  }
+
+  /**
+   * Tests block filter.
+   */
+  public function testBlockFilter() {
+    $this->drupalGet('admin/structure/block');
+    $assertSession = $this->assertSession();
+    $session = $this->getSession();
+    $page = $session->getPage();
+
+    // Find the block filter field on the add-block dialog.
+    $page->find('css', '#edit-blocks-region-header-title')->click();
+    $filter = $assertSession->waitForElement('css', '.block-filter-text');
+
+    // Get all block rows, for assertions later.
+    $block_rows = $page->findAll('css', '.block-add-table tbody tr');
+
+    // Test block filter reduces the number of visible rows.
+    $filter->setValue('ad');
+    $session->wait(10000, 'jQuery("#drupal-live-announce").html().indexOf("blocks are available") > -1');
+    $visible_rows = $this->filterVisibleElements($block_rows);
+    if (count($block_rows) > 0) {
+      $this->assertNotEquals(count($block_rows), count($visible_rows));
+    }
+
+    // Test Drupal.announce() message when multiple matches are expected.
+    $expected_message = count($visible_rows) . ' blocks are available in the modified list.';
+    $assertSession->elementTextContains('css', '#drupal-live-announce', $expected_message);
+
+    // Test Drupal.announce() message when only one match is expected.
+    $filter->setValue('Powered by');
+    $session->wait(10000, 'jQuery("#drupal-live-announce").html().indexOf("block is available") > -1');
+    $visible_rows = $this->filterVisibleElements($block_rows);
+    $this->assertEquals(1, count($visible_rows));
+    $expected_message = '1 block is available in the modified list.';
+    $assertSession->elementTextContains('css', '#drupal-live-announce', $expected_message);
+
+    // Test Drupal.announce() message when no matches are expected.
+    $filter->setValue('Pan-Galactic Gargle Blaster');
+    $session->wait(10000, 'jQuery("#drupal-live-announce").html().indexOf("0 blocks are available") > -1');
+    $visible_rows = $this->filterVisibleElements($block_rows);
+    $this->assertEquals(0, count($visible_rows));
+    $expected_message = '0 blocks are available in the modified list.';
+    $assertSession->elementTextContains('css', '#drupal-live-announce', $expected_message);
+  }
+
+  /**
+   * Removes any non-visible elements from the passed array.
+   *
+   * @param NodeElement[] $elements
+   *   An array of node elements.
+   *
+   * @return NodeElement[]
+   */
+  protected function filterVisibleElements(array $elements) {
+    $elements = array_filter($elements, function(NodeElement $element) {
+      return $element->isVisible();
+    });
+    return $elements;
+  }
+
+}