@oslokommune/punkt-elements 12.6.3 → 12.6.6

package/src/components/datepicker/index.ts

@@ -248,6 +248,10 @@ export class PktDatepicker extends PktInputElement {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRef.value?.blur()
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -293,6 +297,10 @@ export class PktDatepicker extends PktInputElement {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRef.value?.blur()
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -323,11 +331,12 @@ export class PktDatepicker extends PktInputElement {
         }}
         ${ref(this.inputRef)}
       />
-      <div class="pkt-input-prefix">Til</div>
+      <div class="pkt-input-prefix" id="${this.id}-to-label">Til</div>
       <input
         class=${classMap(this.inputClasses)}
         .type=${this.inputType}
         id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
         .value=${this._value[1] ?? ''}
         min=${this.min}
         max=${this.max}
@@ -340,6 +349,10 @@ export class PktDatepicker extends PktInputElement {
           if (e.key === ',' || e.key === 'Enter') {
             this.inputRefTo.value?.blur()
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         @input=${(e: Event) => {
           this.onInput()
@@ -420,6 +433,10 @@ export class PktDatepicker extends PktInputElement {
             e.preventDefault()
             this.addToSelected(e)
           }
+          if (e.key === 'Space' || e.key === ' ') {
+            e.preventDefault()
+            this.toggleCalendar(e)
+          }
         }}
         ?disabled=${this.disabled || (this.maxlength && this._value.length >= this.maxlength)}
         @change=${(e: Event) => {
@@ -441,7 +458,8 @@ export class PktDatepicker extends PktInputElement {
                 <pkt-tag
                   .id="${this.id + date + '-tag'}"
                   closeTag
-                  @onClose=${() => this.calRef.value?.handleDateSelect(this.fromISOToDate(date))}
+                  ariaLabel="${this.strings.calendar.deleteDate} ${this.fromISOtoLocal(date)}"
+                  @close=${() => this.calRef.value?.handleDateSelect(this.fromISOToDate(date))}
                   >${this.fromISOtoLocal(date)}</pkt-tag
                 >
               `,
@@ -461,6 +479,7 @@ export class PktDatepicker extends PktInputElement {
       ${ref(this.popupRef)}
     >
       <pkt-calendar
+        id="${this.id}-calendar"
         ?multiple=${this.multiple}
         ?range=${this.range}
         ?weeknumbers=${this.weeknumbers}
@@ -527,6 +546,7 @@ export class PktDatepicker extends PktInputElement {
                 : this.renderInput()}
             <button
               class="${classMap(this.buttonClasses)}"
+              type="button"
               @click=${this.toggleCalendar}
               ?disabled=${this.disabled}
               ${ref(this.btnRef)}
@@ -609,9 +629,5 @@ export class PktDatepicker extends PktInputElement {
   public async toggleCalendar(e: Event) {
     e.preventDefault()
     this.calendarOpen ? this.hideCalendar() : this.showCalendar()
-    await sleep(20)
-    if (this.isMobileSafari) {
-      this.calRef.value?.focusOnCurrentDate()
-    }
   }
 }