@gitlab/ui 95.2.0 → 95.2.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [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/package.json

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

package/src/components/base/datepicker/datepicker.vue

@@ -7,6 +7,7 @@ import { areDatesEqual } from '../../../utils/datetime_utility';
 import GlButton from '../button/button.vue';
 import GlFormInput from '../form/form_input/form_input.vue';
 import GlIcon from '../icon/icon.vue';
+import { translate } from '../../../utils/i18n';
 
 export const pad = (val, len = 2) => `0${val}`.slice(-len);
 
@@ -39,6 +40,26 @@ 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'));
+  }
+};
+
 export default {
   name: 'GlDatepicker',
   components: {
@@ -257,6 +278,7 @@ export default {
   },
   mounted() {
     const $parentEl = this.$parent.$el;
+    const openedEvent = this.opened.bind(this);
     const drawEvent = this.draw.bind(this);
 
     const pikadayConfig = {
@@ -280,7 +302,10 @@ export default {
       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/translations.js

@@ -14,6 +14,8 @@ export default {
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',
   'GlBroadcastMessage.closeButtonTitle': 'Dismiss',
   'GlCollapsibleListbox.srOnlyResultsLabel': null,
+  'GlDatepicker.monthLabel': 'Month',
+  'GlDatepicker.yearLabel': 'Year',
   'GlDuoChat.chatCancelLabel': 'Cancel',
   'GlDuoChat.chatCloseLabel': 'Close the Code Explanation',
   'GlDuoChat.chatDefaultPredefinedPromptsChangePassword': 'How do I change my password in GitLab?',