diff --git a/core/modules/block/block.libraries.yml b/core/modules/block/block.libraries.yml index 967a682..9b5877f 100644 --- a/core/modules/block/block.libraries.yml +++ b/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 diff --git a/core/modules/block/js/block.admin.js b/core/modules/block/js/block.admin.js index 9f99b7f..56506a9 100644 --- a/core/modules/block/js/block.admin.js +++ b/core/modules/block/js/block.admin.js @@ -3,7 +3,7 @@ * Block admin behaviors. */ -(function ($, Drupal) { +(function ($, Drupal, debounce) { 'use strict'; @@ -56,6 +56,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) { @@ -66,7 +73,7 @@ if ($table.length) { $filter_rows = $table.find('div.block-filter-text-source'); - $input.on('keyup', filterBlockList); + $input.on('keyup', debounce(filterBlockList, 200)); } } }; @@ -94,4 +101,4 @@ } }; -}(jQuery, Drupal)); +}(jQuery, Drupal, Drupal.debounce)); diff --git a/core/modules/block/tests/src/FunctionalJavascript/BlockFilterTest.php b/core/modules/block/tests/src/FunctionalJavascript/BlockFilterTest.php new file mode 100644 index 0000000..e48095e --- /dev/null +++ b/core/modules/block/tests/src/FunctionalJavascript/BlockFilterTest.php @@ -0,0 +1,95 @@ +drupalCreateUser([ + 'administer blocks', + ]); + + $this->drupalLogin($admin_user); + } + + /** + * Tests block filtering screen reader updates. + */ + public function testBlockFilter() { + // Find the module filter field. + $this->drupalGet('admin/structure/block'); + $assertSession = $this->assertSession(); + $assertSession->statusCodeEquals(200); + $session = $this->getSession(); + $page = $session->getPage(); + + $page->find('css', '#edit-blocks-region-header-title')->click(); + + $assertSession->assertWaitOnAjaxRequest(); + + $filter = $page->find('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(1000, 'jQuery("#drupal-live-announce").html().indexOf("blocks are available") > -1'); + + $visible_rows = $this->filterVisibleElements($block_rows); + self::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 only one match is expected. + // Using a very specific block name, we expect only one row. + $filter->setValue('Drupal'); + $session->wait(1000, 'jQuery("#drupal-live-announce").html().indexOf("block is available") > -1'); + $visible_rows = $this->filterVisibleElements($block_rows); + self::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(1000, 'jQuery("#drupal-live-announce").html().indexOf("0 blocks are available") > -1'); + $visible_rows = $this->filterVisibleElements($block_rows); + self::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 array $elements + * @return array + */ + protected function filterVisibleElements($elements) { + $elements = array_filter($elements, function($element) { + return $element->isVisible(); + }); + return $elements; + } + +}