feat(date-picker): accessibility enhancements (#462)

* feat(date-picker): accessibility enhancements

* fix(date-picker): remove default value of identifier prop

* test(date-picker): update visual snapshot

packages/components/src/components/date-picker/date-picker.css

@@ -56,6 +56,12 @@ duet-date-picker .duet-date__toggle:active scale-icon-content-calendar {
   color: var(--scl-color-primary-active);
 }
 
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  duet-date-picker .duet-date__toggle scale-icon-content-calendar {
+    color: var(--scl-color-white);
+  }
+}
+
 .scale-date-picker {
   position: relative;
 }
@@ -191,6 +197,10 @@ duet-date-picker .duet-date__input:focus::placeholder {
   color: var(--scl-color-grey-20);
 }
 
+.scale-date-picker__popup-heading {
+  text-align: center;
+  padding-bottom: var(--scl-spacing-16);
+}
 /* Popover layout */
 
 duet-date-picker .duet-date__dialog-content {
@@ -303,3 +313,9 @@ duet-date-picker .duet-date__day:hover::before {
   background: transparent;
   color: var(--scl-color-white);
 }
+
+@media (max-width: 35.9375em) and (orientation: landscape) {
+  duet-date-picker .duet-date__dialog-content {
+    zoom: 70%;
+  }
+}

packages/components/src/components/date-picker/date-picker.tsx

@@ -56,10 +56,15 @@ export class DatePicker {
    */
   @Prop() name: string = 'date';
 
+  /**
+   * Name of the date picker input.
+   */
+  @Prop() popupTitle: string = 'Pick a date';
+
   /**
    * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
    */
-  @Prop() identifier: string = '';
+  @Prop() identifier: string;
 
   /**
    * Makes the date picker input component disabled. This prevents users from being able to
@@ -158,6 +163,8 @@ export class DatePicker {
    */
   @Event() scaleFocus: EventEmitter<DuetDatePickerFocusEvent>;
 
+  private helperTextId = `helper-message-${i}`;
+
   /**
    * Public methods API
    */
@@ -215,6 +222,30 @@ export class DatePicker {
     if (input) {
       input.addEventListener('keyup', this.handleKeyPress);
     }
+
+    if (input && this.helperText) {
+      input.setAttribute('aria-describedby', this.helperTextId);
+    }
+
+    if (input && this.status === 'error') {
+      input.setAttribute('aria-invalid', 'true');
+    }
+
+    const dialog = this.hostElement.querySelector('.duet-date__dialog-content');
+    if (dialog) {
+      const heading = document.createElement('h2');
+      heading.className = 'scale-date-picker__popup-heading';
+      heading.innerHTML = this.popupTitle;
+      dialog.insertBefore(heading, dialog.firstChild);
+    }
+
+    const today = this.hostElement.querySelector(
+      '.duet-date__day.is-today span.duet-date__vhidden'
+    );
+
+    if (today) {
+      today.innerHTML = `${today.innerHTML}, today`;
+    }
   }
 
   connectedCallback() {
@@ -236,11 +267,6 @@ export class DatePicker {
   }
 
   render() {
-    const ariaInvalidAttr =
-      this.status === 'error' ? { 'aria-invalid': true } : {};
-    const helperTextId = `helper-message-${i}`;
-    const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
-
     return (
       <div
         class={classNames(
@@ -282,13 +308,11 @@ export class DatePicker {
           value={this.value}
           // @ts-ignore
           ref={(element) => (this.duetInput = element)}
-          {...ariaInvalidAttr}
-          {...(this.helperText ? ariaDescribedByAttr : {})}
         ></duet-date-picker>
         {!!this.helperText && (
           <div
             class="date-picker__meta"
-            id={helperTextId}
+            id={this.helperTextId}
             aria-live="polite"
             aria-relevant="additions removals"
           >

packages/components/src/components/telekom/nav-icon/nav-icon.css

@@ -37,6 +37,12 @@ scale-nav-icon {
   color: var(--color);
 }
 
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .meta-navigation__item-link {
+    color: var(--scl-color-white);
+  }
+}
+
 .meta-navigation__item-link:hover {
   color: var(--color-hover);
 }

packages/storybook-vue/stories/3_components/date-picker/DatePicker.stories.mdx

@@ -121,7 +121,7 @@ export const Template = (args, { argTypes }) => ({
 export const RangeTemplate = (args, { argTypes }) => ({
   components: { ScaleDatePicker },
   template: `
-    <div style="height: 380px; display: inline-flex;">
+    <div style="height: 380px;">
         <scale-date-picker
             ref="start"
             identifier="start"

packages/storybook-vue/stories/3_components/date-picker/ScaleDatePicker.vue

@@ -16,6 +16,7 @@
     :helper-text="helperText"
     :status="status"
     :size="size"
+    :popup-title="popupTitle"
     @scaleChange="scaleChange"
     @scaleFocus="scaleFocus"
     @scaleBlur="scaleBlur"
@@ -44,6 +45,7 @@ export default {
     status: { type: String },
     disabled: { type: Boolean },
     size: { type: String },
+    popupTitle: { type: String },
   },
   methods: {
     scaleChange($event) {