diff --git a/core/modules/views/js/ajax_view.js b/core/modules/views/js/ajax_view.js
index 783dfe6..2f4aae8 100644
--- a/core/modules/views/js/ajax_view.js
+++ b/core/modules/views/js/ajax_view.js
@@ -100,7 +100,7 @@
    * Attach the ajax behavior to each link.
    */
   Drupal.views.ajaxView.prototype.attachPagerAjax = function () {
-    this.$view.find('ul.pager > li > a, th.views-field a, .attachment .views-summary a')
+    this.$view.find('ul.pager__items > li > a, th.views-field a, .attachment .views-summary a')
       .each(jQuery.proxy(this.attachPagerLinkAjax, this));
   };
 
diff --git a/core/modules/views/templates/views-mini-pager.html.twig b/core/modules/views/templates/views-mini-pager.html.twig
index 5fd95dc..e17311a 100644
--- a/core/modules/views/templates/views-mini-pager.html.twig
+++ b/core/modules/views/templates/views-mini-pager.html.twig
@@ -11,7 +11,33 @@
  * @ingroup themeable
  */
 #}
-{% if items %}
-  <h2 class="visually-hidden">{{ 'Pages'|t }}</h2>
-  {{ items }}
+{% if items.previous or items.next %}
+  <nav class="pager" role="navigation" aria-labelledby="pagination-heading">
+    <h4 class="pager__heading visually-hidden">{{ 'Pagination'|t }}</h4>
+    <ul class="pager__items">
+      {% if items.previous %}
+        <li class="pager__item pager__item--previous">
+          <a href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes }}>
+            <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+            <span aria-hidden="true">{{ items.previous.text|default('‹‹'|t) }}</span>
+          </a>
+        </li>
+      {% endif %}
+      {% if items.current %}
+        <li class="pager__item is-active">
+          {% trans %}
+            Page {{ items.current }}
+          {% endtrans %}
+        </li>
+      {% endif %}
+      {% if items.next %}
+        <li class="pager__item pager__item--next">
+          <a href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes }}>
+            <span class="visually-hidden">{{ 'Next page'|t }}</span>
+            <span aria-hidden="true">{{ items.next.text|default('››'|t) }}</span>
+          </a>
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
 {% endif %}
diff --git a/core/modules/views/views.theme.inc b/core/modules/views/views.theme.inc
index ebef6f8..ac6999f 100644
--- a/core/modules/views/views.theme.inc
+++ b/core/modules/views/views.theme.inc
@@ -1027,87 +1027,31 @@ function template_preprocess_views_mini_pager(&$variables) {
   $element = $variables['element'];
   $parameters = $variables['parameters'];
 
-  // Fill in default link labels.
-  $tags += array(
-    1 => t('‹‹'),
-    3 => t('››'),
-  );
-
   // Current is the page we are currently paged to.
-  $pager_current = $pager_page_array[$element] + 1;
+  $variables['items']['current'] = $pager_page_array[$element] + 1;
 
-  $li_previous = array();
   if ($pager_total[$element] > 1 && $pager_page_array[$element] > 0) {
-    $li_previous = array(
-      '#type' => 'link',
-      '#title' => $tags[1],
-      '#url' => Url::fromRoute('<current>'),
-      '#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
-        // implementations.
-        'pager_context' => array(
-          'link_type' => 'previous',
-          'element' => $element,
-          'interval' => -1,
-        ),
-      ),
+    $options = array(
+      'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] - 1),
     );
+    $variables['items']['previous']['href'] = \Drupal::url('<current>', [], $options);
+    if (isset($tags[1])) {
+      $variables['items']['previous']['text'] = $tags[1];
+    }
+    $variables['items']['previous']['attributes'] = new Attribute();
   }
 
   $li_next = array();
   if ($pager_page_array[$element] < ($pager_total[$element] - 1)) {
-    $li_next = array(
-      '#type' => 'link',
-      '#title' => $tags[3],
-      '#url' => Url::fromRoute('<current>'),
-      '#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
-        // implementations.
-        'pager_context' => array(
-          'link_type' => 'next',
-          'element' => $element,
-          'interval' => 1,
-        ),
-      ),
+    $options = array(
+      'query' => pager_query_add_page($parameters, $element, $pager_page_array[$element] + 1),
     );
+    $variables['items']['next']['href'] = \Drupal::url('<current>', [], $options);
+    if (isset($tags[3])) {
+      $variables['items']['next']['text'] = $tags[3];
+    }
+    $variables['items']['next']['attributes'] = new Attribute();
   }
-
-  // Don't show the pager if there is neither a next page nor a previous page
-  // link, which means that we are on the first page and there is no next page
-  // available/wanted.
-  if (empty($li_next) && empty($li_previous)) {
-    return;
-  }
-
-  $items = array();
-  $items[] = array(
-    '#wrapper_attributes' => array('class' => array('pager-previous')),
-  ) + $li_previous;
-
-  $items[] = array(
-    '#wrapper_attributes' => array('class' => array('pager-current')),
-    '#markup' => t('Page @current', array('@current' => $pager_current)),
-  );
-
-  $items[] = array(
-    '#wrapper_attributes' => array('class' => array('pager-next')),
-  ) + $li_next;
-
-  $variables['items'] = array(
-    '#theme' => 'item_list__pager',
-    '#items' => $items,
-    '#attributes' => array('class' => array('pager')),
-  );
 }
 
 /**
diff --git a/core/modules/views_ui/src/Tests/PreviewTest.php b/core/modules/views_ui/src/Tests/PreviewTest.php
index 191e4b4..4b6aca2 100644
--- a/core/modules/views_ui/src/Tests/PreviewTest.php
+++ b/core/modules/views_ui/src/Tests/PreviewTest.php
@@ -165,40 +165,36 @@ public function testPreviewWithPagersUI() {
     $this->getPreviewAJAX('test_mini_pager', 'default', 3);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[@class = "pager"]/li');
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
     $this->assertTrue(!empty($elements), 'Mini pager found.');
 
     // Verify elements and links to pages.
-    // We expect to find 3 elements: previous and current pages, with no link,
-    // and next page with a link.
-    $this->assertClass($elements[0], 'pager-previous', 'Element for previous page has .pager-previous class.');
-    $this->assertFalse(isset($elements[0]->a), 'Element for previous page has no link.');
-
-    $this->assertClass($elements[1], 'pager-current', 'Element for current page has .pager-current class.');
-    $this->assertFalse(isset($elements[1]->a), 'Element for current page has no link.');
+    // We expect to find current pages element with no link, next page element
+    // with a link, and not to find previous page element.
+    $this->assertClass($elements[0], 'is-active', 'Element for current page has .is-active class.');
 
-    $this->assertClass($elements[2], 'pager-next', "Element for next page has .pager-next class.");
-    $this->assertTrue($elements[2]->a, "Link to next page found.");
+    $this->assertClass($elements[1], 'pager__item--next', 'Element for next page has .pager__item--next class.');
+    $this->assertTrue($elements[1]->a, 'Link to next page found.');
 
     // Navigate to next page.
-    $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager-next'));
+    $elements = $this->xpath('//li[contains(@class, :class)]/a', array(':class' => 'pager__item--next'));
     $this->clickPreviewLinkAJAX($elements[0]['href'], 3);
 
     // Test that the pager is present and rendered.
-    $elements = $this->xpath('//ul[@class = "pager"]/li');
+    $elements = $this->xpath('//ul[contains(@class, :class)]/li', array(':class' => 'pager__items'));
     $this->assertTrue(!empty($elements), 'Mini pager found.');
 
     // Verify elements and links to pages.
     // We expect to find 3 elements: previous page with a link, current
     // page with no link, and next page with a link.
-    $this->assertClass($elements[0], 'pager-previous', 'Element for previous page has .pager-previous class.');
-    $this->assertTrue($elements[0]->a, "Link to previous page found.");
+    $this->assertClass($elements[0], 'pager__item--previous', 'Element for previous page has .pager__item--previous class.');
+    $this->assertTrue($elements[0]->a, 'Link to previous page found.');
 
-    $this->assertClass($elements[1], 'pager-current', 'Element for current page has .pager-current class.');
+    $this->assertClass($elements[1], 'is-active', 'Element for current page has .is-active class.');
     $this->assertFalse(isset($elements[1]->a), 'Element for current page has no link.');
 
-    $this->assertClass($elements[2], 'pager-next', "Element for next page has .pager-next class.");
-    $this->assertTrue($elements[2]->a, "Link to next page found.");
+    $this->assertClass($elements[2], 'pager__item--next', 'Element for next page has .pager__item--next class.');
+    $this->assertTrue($elements[2]->a, 'Link to next page found.');
   }
 
   /**