@gitlab/ui 48.1.1 → 48.1.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [48.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.1.1...v48.1.2) (2022-10-21)
+
+
+### Bug Fixes
+
+* **GlPagination:** Fix GlPagination accessibility ([a802cf6](https://gitlab.com/gitlab-org/gitlab-ui/commit/a802cf6752e9d29c28b0059f94f63592d10ed86d))
+
 ## [48.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v48.1.0...v48.1.1) (2022-10-21)
 
 

package/dist/components/base/pagination/pagination.js

@@ -413,16 +413,16 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses,attrs:{"role":"navigation","aria-label":"Pagination"}},[_c('li',{staticClass:"page-item",class:{
-      disabled: _vm.prevPageIsDisabled,
-      'flex-fill': _vm.isFillAlign,
-    },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
-      disabled: item.disabled,
-      'flex-fill': _vm.isFillAlign,
-    }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
-      disabled: _vm.nextPageIsDisabled,
-      'flex-fill': _vm.isFillAlign,
-    },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{attrs:{"aria-label":"Pagination"}},[(_vm.isVisible)?_c('ul',{staticClass:"pagination gl-pagination text-nowrap",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
+        disabled: _vm.prevPageIsDisabled,
+        'flex-fill': _vm.isFillAlign,
+      },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+        disabled: item.disabled,
+        'flex-fill': _vm.isFillAlign,
+      }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
+        disabled: _vm.nextPageIsDisabled,
+        'flex-fill': _vm.isFillAlign,
+      },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "48.1.1",
+  "version": "48.1.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/pagination/pagination.vue

@@ -375,102 +375,98 @@ export default {
 </script>
 
 <template>
-  <ul
-    v-if="isVisible"
-    role="navigation"
-    class="pagination gl-pagination text-nowrap"
-    :class="wrapperClasses"
-    aria-label="Pagination"
-  >
-    <li
-      class="page-item"
-      :class="{
-        disabled: prevPageIsDisabled,
-        'flex-fill': isFillAlign,
-      }"
-      :aria-hidden="prevPageIsDisabled"
-    >
-      <component
-        :is="prevPageIsDisabled ? 'span' : 'a'"
-        class="gl-link page-link prev-page-item gl-display-flex"
-        :aria-label="prevPageAriaLabel"
-        :href="prevPageHref"
-        @click="handlePrevious($event, value - 1)"
+  <nav aria-label="Pagination">
+    <ul v-if="isVisible" class="pagination gl-pagination text-nowrap" :class="wrapperClasses">
+      <li
+        class="page-item"
+        :class="{
+          disabled: prevPageIsDisabled,
+          'flex-fill': isFillAlign,
+        }"
+        :aria-hidden="prevPageIsDisabled"
       >
-        <!--
-          @slot Content for the "previous" button. Overrides the "prevText" prop.
+        <component
+          :is="prevPageIsDisabled ? 'span' : 'a'"
+          class="gl-link page-link prev-page-item gl-display-flex"
+          :aria-label="prevPageAriaLabel"
+          :href="prevPageHref"
+          @click="handlePrevious($event, value - 1)"
+        >
+          <!--
+            @slot Content for the "previous" button. Overrides the "prevText" prop.
+            @binding {boolean} active
+            @binding {boolean} disabled
+            @binding {number} number
+            -->
+          <slot name="previous" v-bind="{ page: value - 1, disabled: prevPageIsDisabled }">
+            <gl-icon name="chevron-left" />
+            <span>{{ prevText }}</span>
+          </slot>
+        </component>
+      </li>
+      <li
+        v-for="item in visibleItems"
+        :key="item.key"
+        class="page-item"
+        :class="{
+          disabled: item.disabled,
+          'flex-fill': isFillAlign,
+        }"
+      >
+        <component
+          :is="item.component"
+          size="md"
+          :aria-disabled="item.disabled"
+          class="page-link"
+          v-bind="item.attrs"
+          v-on="item.listeners"
+        >
+          <!--
+          Content for page number buttons.
+          @slot page-number
           @binding {boolean} active
           @binding {boolean} disabled
           @binding {number} number
           -->
-        <slot name="previous" v-bind="{ page: value - 1, disabled: prevPageIsDisabled }">
-          <gl-icon name="chevron-left" />
-          <span>{{ prevText }}</span>
-        </slot>
-      </component>
-    </li>
-    <li
-      v-for="item in visibleItems"
-      :key="item.key"
-      class="page-item"
-      :class="{
-        disabled: item.disabled,
-        'flex-fill': isFillAlign,
-      }"
-    >
-      <component
-        :is="item.component"
-        size="md"
-        :aria-disabled="item.disabled"
-        class="page-link"
-        v-bind="item.attrs"
-        v-on="item.listeners"
-      >
-        <!--
-        Content for page number buttons.
-        @slot page-number
-        @binding {boolean} active
-        @binding {boolean} disabled
-        @binding {number} number
-        -->
-        <!--
-        Content for the left ellipsis. Overrides the "ellipsisText" prop.
-        @slot ellipsis-left
-        -->
-        <!--
-        Content for the right ellipsis. Overrides the "ellipsisText" prop.
-        @slot ellipsis-right
-        -->
-        <slot :name="item.slot" v-bind="item.slotData">{{ item.content }}</slot>
-      </component>
-    </li>
+          <!--
+          Content for the left ellipsis. Overrides the "ellipsisText" prop.
+          @slot ellipsis-left
+          -->
+          <!--
+          Content for the right ellipsis. Overrides the "ellipsisText" prop.
+          @slot ellipsis-right
+          -->
+          <slot :name="item.slot" v-bind="item.slotData">{{ item.content }}</slot>
+        </component>
+      </li>
 
-    <li
-      class="page-item"
-      :class="{
-        disabled: nextPageIsDisabled,
-        'flex-fill': isFillAlign,
-      }"
-      :aria-hidden="nextPageIsDisabled"
-    >
-      <component
-        :is="nextPageIsDisabled ? 'span' : 'a'"
-        class="gl-link page-link next-page-item gl-display-flex"
-        :aria-label="nextPageAriaLabel"
-        :href="nextPageHref"
-        @click="handleNext($event, value + 1)"
+      <li
+        class="page-item"
+        :class="{
+          disabled: nextPageIsDisabled,
+          'flex-fill': isFillAlign,
+        }"
+        :aria-hidden="nextPageIsDisabled"
       >
-        <!--
-          @slot Content for the "next" button. Overrides the "nextText" prop.
-          @binding {boolean} active
-          @binding {boolean} disabled
-          @binding {number} number
-          -->
-        <slot name="next" v-bind="{ page: value + 1, disabled: nextPageIsDisabled }">
-          <span>{{ nextText }}</span>
-          <gl-icon name="chevron-right" />
-        </slot>
-      </component>
-    </li>
-  </ul>
+        <component
+          :is="nextPageIsDisabled ? 'span' : 'a'"
+          class="gl-link page-link next-page-item gl-display-flex"
+          :aria-label="nextPageAriaLabel"
+          :href="nextPageHref"
+          @click="handleNext($event, value + 1)"
+        >
+          <!--
+            @slot Content for the "next" button. Overrides the "nextText" prop.
+            @binding {boolean} active
+            @binding {boolean} disabled
+            @binding {number} number
+            -->
+          <slot name="next" v-bind="{ page: value + 1, disabled: nextPageIsDisabled }">
+            <span>{{ nextText }}</span>
+            <gl-icon name="chevron-right" />
+          </slot>
+        </component>
+      </li>
+    </ul>
+  </nav>
 </template>