@gitlab/ui 95.2.0 → 95.3.0

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# [95.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.2.1...v95.3.0) (2024-10-08)
+
+
+### Bug Fixes
+
+* **GlPagination:** add aria-disabled attribute to disabled li items ([af70cb2](https://gitlab.com/gitlab-org/gitlab-ui/commit/af70cb201867b7341a1d0e75a3c9b5304ecd8f0e))
+
+
+### Features
+
+* **DesignTokens:** add action selected design tokens ([ac6c84b](https://gitlab.com/gitlab-org/gitlab-ui/commit/ac6c84b888fec629bee78e0d4725c9dc64ecee9b))
+* **GlKeysetPagination:** use tertiary category for buttons ([573fd1a](https://gitlab.com/gitlab-org/gitlab-ui/commit/573fd1ae8b26593f56f347a16de36f1d4f3e53e5))
+* **GlPaginatedList:** use design tokens in GlPaginatedList ([656b9fd](https://gitlab.com/gitlab-org/gitlab-ui/commit/656b9fd185d9d1aac667d0e4c2a2d0df77e8c80b))
+* **GlPagination:** use design tokens in GlPagination ([26f4592](https://gitlab.com/gitlab-org/gitlab-ui/commit/26f4592b95c88dd42b352a4b33a8642235d6a5f8))
+
+## [95.2.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.2.0...v95.2.1) (2024-10-08)
+
+
+### Bug Fixes
+
+* **GlDatepicker:** adds tests ([21a6964](https://gitlab.com/gitlab-org/gitlab-ui/commit/21a69648b077fc93f614a89bcf1432717f2e8945))
+* **GlDatepicker:** Bind correct this ([392a6cd](https://gitlab.com/gitlab-org/gitlab-ui/commit/392a6cd192d443e6ca2be6e5cccb409894492126))
+* **GlDatepicker:** Fix accessibility violations ([c753967](https://gitlab.com/gitlab-org/gitlab-ui/commit/c753967ea5a0dc113182f051500983881d579c6e))
+* **GlDatepicker:** format with prettier ([0af6cff](https://gitlab.com/gitlab-org/gitlab-ui/commit/0af6cfff35a997925ee830ce2a0e44b52ea1bac0))
+* **GlDatepicker:** Use translate function for aria-label ([ae13b84](https://gitlab.com/gitlab-org/gitlab-ui/commit/ae13b8412a40ecedf2fbc52247f9ed7a6962b4db))
+
 # [95.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.1.1...v95.2.0) (2024-10-07)
 
 

package/dist/components/base/datepicker/datepicker.js

@@ -5,6 +5,7 @@ import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button';
 import GlFormInput from '../form/form_input/form_input';
 import GlIcon from '../icon/icon';
+import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -40,6 +41,24 @@ const highlightPastDates = pikaday => {
     }
   });
 };
+const addAccessibleLabels = element => {
+  // Pikaday sets `role="heading"`, which requires a corresponding
+  // `aria-level`. Ensure we have one.
+  const titleEl = element.querySelector('.pika-title[role="heading"]');
+  if (titleEl) {
+    titleEl.setAttribute('aria-level', 3);
+  }
+
+  // Add aria-label to month & year select dropdowns
+  const monthEl = element.querySelector('select.pika-select-month');
+  if (monthEl) {
+    monthEl.setAttribute('aria-label', translate('GlDatepicker.monthLabel', 'Month'));
+  }
+  const yearEl = element.querySelector('select.pika-select-year');
+  if (yearEl) {
+    yearEl.setAttribute('aria-label', translate('GlDatepicker.yearLabel', 'Year'));
+  }
+};
 var script = {
   name: 'GlDatepicker',
   components: {
@@ -251,6 +270,7 @@ var script = {
   },
   mounted() {
     const $parentEl = this.$parent.$el;
+    const openedEvent = this.opened.bind(this);
     const drawEvent = this.draw.bind(this);
     const pikadayConfig = {
       field: this.$el.querySelector('input[type="text"]'),
@@ -272,7 +292,10 @@ var script = {
       toString: date => defaultDateFormatter(date),
       onSelect: this.selected.bind(this),
       onClose: this.closed.bind(this),
-      onOpen: this.opened.bind(this),
+      onOpen: () => {
+        addAccessibleLabels(this.$el);
+        openedEvent();
+      },
       onDraw: pikaday => {
         highlightPastDates(pikaday);
         drawEvent();

package/dist/components/base/keyset_pagination/keyset_pagination.js

@@ -117,7 +117,7 @@ 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('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1):_vm._e()};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.navigationLabel}},[_c('gl-button-group',_vm._g(_vm._b({staticClass:"gl-keyset-pagination"},'gl-button-group',_vm.$attrs,false),_vm.$listeners),[_c('gl-button',{attrs:{"href":_vm.prevButtonLink,"disabled":_vm.disabled || !_vm.hasPreviousPage,"data-testid":"prevButton","category":"tertiary"},on:{"click":function($event){return _vm.$emit('prev', _vm.startCursor)}}},[_vm._t("previous-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v("\n          "+_vm._s(_vm.prevText)+"\n        ")],1)]})],2),_vm._v(" "),_c('gl-button',{attrs:{"href":_vm.nextButtonLink,"disabled":_vm.disabled || !_vm.hasNextPage,"data-testid":"nextButton","category":"tertiary"},on:{"click":function($event){return _vm.$emit('next', _vm.endCursor)}}},[_vm._t("next-button-content",function(){return [_c('div',{staticClass:"gl-align-center gl-flex"},[_vm._v("\n          "+_vm._s(_vm.nextText)+"\n          "),_c('gl-icon',{attrs:{"name":"chevron-right"}})],1)]})],2)],1)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/paginated_list/paginated_list.js

@@ -145,7 +145,7 @@ 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 _c('div',[_c('div',{staticClass:"row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"},[_vm._t("header"),_vm._v(" "),(_vm.filterable)?_c('gl-search-box-by-type',{on:{"input":_vm.query}}):_vm._e()],2),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),_c('ul',{staticClass:"list-group list-group-flush list-unstyled"},_vm._l((_vm.paginatedList),function(listItem){return _c('li',{key:listItem[_vm.itemKey],staticClass:"list-group-item"},[_vm._t("default",function(){return [_vm._v(_vm._s(listItem.id))]},{"listItem":listItem,"query":_vm.queryStr})],2)}),0),_vm._v(" "),(!_vm.emptyList)?_c('gl-pagination',_vm._b({staticClass:"d-flex justify-content-center prepend-top-default",attrs:{"per-page":_vm.pageInfo.perPage,"value":_vm.pageInfo.page,"total-items":_vm.pageInfo.total},on:{"input":_vm.change}},'gl-pagination',_vm.$attrs,false)):_vm._e(),_vm._v(" "),(_vm.emptyList)?_c('div',{staticClass:"bs-callout bs-callout-warning mt-3 empty-message",class:{ 'empty-message': _vm.zeroTotal, 'empty-search': _vm.zeroSearchResults }},[_vm._v(_vm._s(_vm.zeroTotal ? _vm.emptyMessage : _vm.emptySearchMessage))]):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-flex-row-reverse gl-justify-between sm:gl-flex"},[_vm._t("header"),_vm._v(" "),(_vm.filterable)?_c('gl-search-box-by-type',{on:{"input":_vm.query}}):_vm._e()],2),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),_c('ul',{staticClass:"gl-m-0 gl-grid gl-list-none gl-grid-cols-1 gl-divide-x-0 gl-divide-y gl-divide-solid gl-divide-default gl-p-0"},_vm._l((_vm.paginatedList),function(listItem){return _c('li',{key:listItem[_vm.itemKey],staticClass:"gl-px-5 gl-py-4"},[_vm._t("default",function(){return [_vm._v(_vm._s(listItem.id))]},{"listItem":listItem,"query":_vm.queryStr})],2)}),0),_vm._v(" "),(!_vm.emptyList)?_c('gl-pagination',_vm._b({attrs:{"align":"center","per-page":_vm.pageInfo.perPage,"value":_vm.pageInfo.page,"total-items":_vm.pageInfo.total},on:{"input":_vm.change}},'gl-pagination',_vm.$attrs,false)):_vm._e(),_vm._v(" "),(_vm.emptyList)?_c('div',{staticClass:"bs-callout bs-callout-warning mt-3 empty-message",class:{ 'empty-message': _vm.zeroTotal, 'empty-search': _vm.zeroSearchResults }},[_vm._v(_vm._s(_vm.zeroTotal ? _vm.emptyMessage : _vm.emptySearchMessage))]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -109,6 +109,14 @@ var script = {
       required: false,
       default: '…'
     },
+    /**
+     * aria-label for the nav
+     */
+    labelNav: {
+      type: String,
+      required: false,
+      default: translate('GlPagination.nav', 'Pagination')
+    },
     /**
      * aria-label for the first page item
      */
@@ -194,13 +202,13 @@ var script = {
     wrapperClasses() {
       const classes = [];
       if (this.align === alignOptions.center) {
-        classes.push('justify-content-center');
+        classes.push('gl-justify-center');
       }
       if (this.align === alignOptions.right) {
-        classes.push('justify-content-end');
+        classes.push('gl-justify-end');
       }
       if (this.isFillAlign) {
-        classes.push('text-center');
+        classes.push('gl-text-center');
       }
       return classes;
     },
@@ -365,16 +373,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('nav',{staticClass:"gl-pagination text-nowrap",attrs:{"aria-label":"Pagination"}},[_c('ul',{staticClass:"pagination",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination",attrs:{"aria-label":_vm.labelNav}},[_c('ul',{class:_vm.wrapperClasses},[_c('li',{class:{
         disabled: _vm.prevPageIsDisabled,
-        'flex-fill': _vm.isFillAlign,
-      },attrs:{"data-testid":"page-item","aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-flex",attrs:{"data-testid":"page-link","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:{
+        'gl-flex-auto': _vm.isFillAlign,
+      },attrs:{"aria-disabled":_vm.prevPageIsDisabled,"aria-hidden":_vm.prevPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-prev","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',{staticClass:"gl-hidden sm:gl-block"},[_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,class:{
         disabled: item.disabled,
-        'flex-fill': _vm.isFillAlign,
-      },attrs:{"data-testid":"page-item"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"data-testid":"page-link","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:{
+        'gl-flex-auto': _vm.isFillAlign,
+      },attrs:{"data-testid":"gl-pagination-li"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-item","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',{class:{
         disabled: _vm.nextPageIsDisabled,
-        'flex-fill': _vm.isFillAlign,
-      },attrs:{"data-testid":"page-item","aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-flex",attrs:{"data-testid":"page-link","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()};
+        'gl-flex-auto': _vm.isFillAlign,
+      },attrs:{"aria-disabled":_vm.nextPageIsDisabled,"aria-hidden":_vm.nextPageIsDisabled,"data-testid":"gl-pagination-li"}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-pagination-item",attrs:{"data-testid":"gl-pagination-next","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',{staticClass:"gl-hidden sm:gl-block"},[_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 */