diff --git a/core/includes/pager.inc b/core/includes/pager.inc index 780ff6f..b3049c3 100644 --- a/core/includes/pager.inc +++ b/core/includes/pager.inc @@ -185,11 +185,11 @@ function template_preprocess_pager(&$variables) { // Fill in default link labels. $tags = &$variables['tags']; $tags += array( - t('« first'), - t('‹ previous'), - '', - t('next ›'), - t('last »'), + t('First page'), + t('Previous page'), + t('Current page'), + t('Next page'), + t('Last page'), ); // Calculate various markers within this pager piece: @@ -229,30 +229,26 @@ function template_preprocess_pager(&$variables) { if ($pager_page_array[$element] > 0) { $li_first = array( '#type' => 'link', - '#title' => $tags[0], + '#title' => '' . $tags[0] . '', '#href' => $current_path, '#options' => array( 'query' => pager_query_add_page($parameters, $element, 0), - 'attributes' => array( - 'title' => t('Go to first page'), - 'rel' => 'first', - ), // Below is ignored by default, supplied to support hook_link_alter // implementations. 'pager_context' => array( 'link_type' => 'first', 'element' => $element, ), + 'html' => TRUE, ), ); $li_previous = array( '#type' => 'link', - '#title' => $tags[1], + '#title' => '' . $tags[1] . '', '#href' => $current_path, '#options' => array( 'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1), 'attributes' => array( - 'title' => t('Go to previous page'), 'rel' => 'prev', ), // Below is ignored by default, supplied to support hook_link_alter @@ -261,6 +257,7 @@ function template_preprocess_pager(&$variables) { 'link_type' => 'previous', 'element' => $element, ), + 'html' => TRUE, ), ); } @@ -269,12 +266,11 @@ function template_preprocess_pager(&$variables) { if ($pager_page_array[$element] < ($pager_total[$element] - 1)) { $li_next = array( '#type' => 'link', - '#title' => $tags[3], + '#title' => '' . $tags[3] . '', '#href' => $current_path, '#options' => array( 'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1), 'attributes' => array( - 'title' => t('Go to next page'), 'rel' => 'next', ), // Below is ignored by default, supplied to support hook_link_alter @@ -283,24 +279,23 @@ function template_preprocess_pager(&$variables) { 'link_type' => 'next', 'element' => $element, ), + 'html' => TRUE, ), ); + $li_last = array( '#type' => 'link', - '#title' => $tags[4], + '#title' => '' . $tags[4] . '', '#href' => $current_path, '#options' => array( 'query' => pager_query_add_page($parameters, $element, $pager_total[$element] - 1), - 'attributes' => array( - 'title' => t('Go to last page'), - 'rel' => 'last', - ), // Below is ignored by default, supplied to support hook_link_alter // implementations. 'pager_context' => array( 'link_type' => 'last', 'element' => $element, ), + 'html' => TRUE, ), ); } @@ -308,13 +303,11 @@ function template_preprocess_pager(&$variables) { if ($pager_total[$element] > 1) { if ($li_first) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-first')), 'link' => $li_first, ); } if ($li_previous) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-previous')), 'link' => $li_previous, ); } @@ -324,7 +317,7 @@ function template_preprocess_pager(&$variables) { // Check whether there are further previous pages. if ($i > 1) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-ellipsis')), + '#wrapper_attributes' => array('role' => array('presentation')), '#markup' => '…', ); } @@ -332,16 +325,12 @@ function template_preprocess_pager(&$variables) { for (; $i <= $pager_last && $i <= $pager_max; $i++) { if ($i < $pager_current) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-item')), 'link' => array( '#type' => 'link', - '#title' => $i, + '#title' => '' . t('Page') . ' ' . $i, '#href' => $current_path, '#options' => array( 'query' => pager_query_add_page($parameters, $element, $i - 1), - 'attributes' => array( - 'title' => t('Go to page @number', array('@number' => $i)), - ), // Below is ignored by default, supplied to support hook_link_alter // implementations. 'pager_context' => array( @@ -349,28 +338,40 @@ function template_preprocess_pager(&$variables) { 'element' => $element, 'interval' => ($pager_current - $i), ), + 'html' => TRUE, ), ), ); } if ($i == $pager_current) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-current')), - '#markup' => $i, + 'link' => array( + '#type' => 'link', + '#title' => '' . $tags[2] . '' . $i, + '#href' => $current_path, + '#options' => array( + 'query' => pager_query_add_page($parameters, $element, $i - 1), + // Below is ignored by default, supplied to support hook_link_alter + // implementations. + 'pager_context' => array( + 'link_type' => 'item', + 'element' => $element, + 'interval' => ($pager_current - $i), + ), + 'html' => TRUE, + ), + ), + '#wrapper_attributes' => array('class' => array('is-active')), ); } if ($i > $pager_current) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-item')), 'link' => array( '#type' => 'link', - '#title' => $i, + '#title' => '' . t('Page') . ' ' . $i, '#href' => $current_path, '#options' => array( 'query' => pager_query_add_page($parameters, $element, $i - 1), - 'attributes' => array( - 'title' => t('Go to page @number', array('@number' => $i)), - ), // Below is ignored by default, supplied to support hook_link_alter // implementations. 'pager_context' => array( @@ -378,6 +379,7 @@ function template_preprocess_pager(&$variables) { 'element' => $element, 'interval' => ($i - $pager_current), ), + 'html' => TRUE, ), ), ); @@ -386,7 +388,7 @@ function template_preprocess_pager(&$variables) { // Check whether there are further next pages. if ($i < $pager_max) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-ellipsis')), + '#wrapper_attributes' => array('role' => array('presentation')), '#markup' => '…', ); } @@ -394,13 +396,11 @@ function template_preprocess_pager(&$variables) { // End generation. if ($li_next) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-next')), 'link' => $li_next, ); } if ($li_last) { $items[] = array( - '#wrapper_attributes' => array('class' => array('pager-last')), 'link' => $li_last, ); } @@ -408,7 +408,7 @@ function template_preprocess_pager(&$variables) { $variables['items'] = array( '#theme' => 'item_list__pager', '#items' => $items, - '#attributes' => array('class' => array('pager')), + '#attributes' => array('class' => array('pager__items')), ); } } diff --git a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php index 161d215..b27d4e0 100644 --- a/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php +++ b/core/modules/aggregator/src/Tests/AggregatorRenderingTest.php @@ -95,7 +95,7 @@ public function testFeedPage() { // Check for presence of an aggregator pager. $this->drupalGet('aggregator'); - $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager')); + $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Individual source page contains a pager.'); // Check for sources page title. @@ -110,7 +110,7 @@ public function testFeedPage() { // Check for the presence of a pager. $this->drupalGet('aggregator/sources/' . $feed->id()); - $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager')); + $elements = $this->xpath("//ul[@class=:class]", array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Individual source page contains a pager.'); } } diff --git a/core/modules/comment/src/Tests/CommentPagerTest.php b/core/modules/comment/src/Tests/CommentPagerTest.php index f712ce0..152db57 100644 --- a/core/modules/comment/src/Tests/CommentPagerTest.php +++ b/core/modules/comment/src/Tests/CommentPagerTest.php @@ -334,19 +334,19 @@ function testTwoPagers() { $this->assertRaw('Comment 1 on field comment'); $this->assertRaw('Comment 1 on field comment_2'); // Navigate to next page of field 1. - $this->clickLink('next ›'); + $this->clickLink('Next page'); // Check only one pager updated. $this->assertRaw('Comment 2 on field comment'); $this->assertRaw('Comment 1 on field comment_2'); // Return to page 1. $this->drupalGet('node/' . $node->id()); // Navigate to next page of field 2. - $this->clickLink('next ›', 1); + $this->clickLink('Next page', 1); // Check only one pager updated. $this->assertRaw('Comment 1 on field comment'); $this->assertRaw('Comment 2 on field comment_2'); // Navigate to next page of field 1. - $this->clickLink('next ›'); + $this->clickLink('Next page'); // Check only one pager updated. $this->assertRaw('Comment 2 on field comment'); $this->assertRaw('Comment 2 on field comment_2'); diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css index c8908b5..e6fba64 100644 --- a/core/modules/system/css/system.theme.css +++ b/core/modules/system/css/system.theme.css @@ -161,19 +161,37 @@ abbr.ajax-changed { /** * Markup generated by pager.html.twig. */ -.item-list .pager { +.pager__items { clear: both; text-align: center; } -.item-list .pager li { +.pager__items li { background-image: none; display: inline; list-style-type: none; padding: 0.5em; } -.pager-current { +.is_active { font-weight: bold; } +.pager__items a .icon { + background-image: none; +} +.pager__items .icon--go-first:before { + content: "\00AB\00A0 first"; +} +.pager__items .icon--go-previous:before { + content: "\003C\00A0 previous"; +} +.pager__items .icon--ellipsis:before { + content: "\2026"; +} +.pager__items .icon--go-next:after { + content: "next \00A0\003E"; +} +.pager__items .icon--go-last:after { + content: "last \00A0\00BB"; +} /** * Show buttons as links. diff --git a/core/modules/system/src/Tests/Pager/PagerTest.php b/core/modules/system/src/Tests/Pager/PagerTest.php index 845aa28..4833149 100644 --- a/core/modules/system/src/Tests/Pager/PagerTest.php +++ b/core/modules/system/src/Tests/Pager/PagerTest.php @@ -60,10 +60,12 @@ function testActiveClass() { $this->assertPagerItems($current_page); // Verify last page. - $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-last')); - preg_match('@page=(\d+)@', $elements[0]['href'], $matches); + $elements = $this->xpath('//li/a[contains(.,"Last page")]'); + $attributes = $elements[0]->attributes(); + $href = $attributes['href']; + preg_match('@page=(\d+)@', $href, $matches); $current_page = (int) $matches[1]; - $this->drupalGet($GLOBALS['base_root'] . $elements[0]['href'], array('external' => TRUE)); + $this->drupalGet('admin/reports/dblog', array('query' => array('page' => $current_page))); $this->assertPagerItems($current_page); } @@ -74,7 +76,7 @@ function testActiveClass() { * The current pager page the internal browser is on. */ protected function assertPagerItems($current_page) { - $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'pager')); + $elements = $this->xpath('//ul[@class=:class]/li', array(':class' => 'pager__items')); $this->assertTrue(!empty($elements), 'Pager found.'); // Make current page 1-based. @@ -97,14 +99,14 @@ protected function assertPagerItems($current_page) { // Make item/page index 1-based. $page++; if ($current_page == $page) { - $this->assertClass($element, 'pager-current', 'Item for current page has .pager-current class.'); - $this->assertFalse(isset($element->a), 'Item for current page has no link.'); + $this->assertClass($element, 'is-active', 'Item for current page has .is-active class.'); + $this->assertTrue(isset($element->a), 'Item for current page has link.'); } else { - $this->assertNoClass($element, 'pager-current', "Item for page $page has no .pager-current class."); - $this->assertClass($element, 'pager-item', "Item for page $page has .pager-item class."); + $this->assertNoClass($element, 'is-active', "Item for page $page has no .is-active class."); + //$this->assertClass($element, 'pager-item', "Item for page $page has .pager-item class."); $this->assertTrue($element->a, "Link to page $page found."); - $this->assertNoClass($element->a, 'active', "Link to page $page is not active."); + //$this->assertNoClass($element, 'is-active', "Link to page $page is not active."); } unset($elements[--$page]); } @@ -113,24 +115,20 @@ protected function assertPagerItems($current_page) { // Verify first/previous and next/last items and links. if (isset($first)) { - $this->assertClass($first, 'pager-first', 'Item for first page has .pager-first class.'); + $this->assertClass($first->a->i, 'icon--go-first', 'Item for first page has .icon--go-first class.'); $this->assertTrue($first->a, 'Link to first page found.'); - $this->assertNoClass($first->a, 'active', 'Link to first page is not active.'); } if (isset($previous)) { - $this->assertClass($previous, 'pager-previous', 'Item for first page has .pager-previous class.'); + $this->assertClass($previous->a->i, 'icon--go-previous', 'Item for first page has .icon--go-previous class.'); $this->assertTrue($previous->a, 'Link to previous page found.'); - $this->assertNoClass($previous->a, 'active', 'Link to previous page is not active.'); } if (isset($next)) { - $this->assertClass($next, 'pager-next', 'Item for next page has .pager-next class.'); + $this->assertClass($next->a->i, 'icon--go-next', 'Item for next page has .icon--go-next class.'); $this->assertTrue($next->a, 'Link to next page found.'); - $this->assertNoClass($next->a, 'active', 'Link to next page is not active.'); } if (isset($last)) { - $this->assertClass($last, 'pager-last', 'Item for last page has .pager-last class.'); + $this->assertClass($last->a->i, 'icon--go-last', 'Item for last page has .icon--go-last class.'); $this->assertTrue($last->a, 'Link to last page found.'); - $this->assertNoClass($last->a, 'active', 'Link to last page is not active.'); } } diff --git a/core/modules/system/templates/pager.html.twig b/core/modules/system/templates/pager.html.twig index 47b20a7..4cb2cb6 100644 --- a/core/modules/system/templates/pager.html.twig +++ b/core/modules/system/templates/pager.html.twig @@ -12,6 +12,8 @@ */ #} {% if items %} -