@oiz/stzh-components 2.2.0-beta → 2.2.0

package/dist/collection/components/stzh-chip/stzh-chip.css

@@ -118,6 +118,17 @@
   display: inline-flex;
   border-radius: var(--border-radius);
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  :host {
+    --hover-color: Highlight;
+    --hover-border: 0.0625rem solid Highlight;
+    --hover-background-color: Canvas;
+    --hover-remove-color: Highlight;
+    --hover-remove-background-color: Canvas;
+    --hover-icon-color: Highlight;
+    --hover-counter-color: Highlight;
+  }
+}
 :host[size=small] {
   --height: 1.5rem;
   --border-radius: 0.75rem;
@@ -152,35 +163,59 @@
   --hover-icon-color: var(--stzh-color-error);
   --hover-counter-color: var(--stzh-color-error);
 }
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  :host[type=important] {
+    --hover-color: Highlight;
+    --hover-icon-color: Highlight;
+    --hover-counter-color: Highlight;
+  }
+}
 :host[active]:not([active=false]) {
   --color: var(--stzh-color-white);
   --border: 0.0625rem solid transparent;
   --remove-color: var(--stzh-color-white);
   --background-color: var(--stzh-color-primary, var(--stzh-color-zueriblue));
-  --counter-color: var(--stzh-color-white48);
   --icon-color: var(--stzh-color-white);
+  --counter-color: var(--stzh-color-white48);
   --hover-color: var(--stzh-color-white);
   --hover-border: 0.0625rem solid transparent;
   --hover-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
   --hover-remove-color: var(--stzh-color-white);
   --hover-remove-background-color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
-  --hover-counter-color: var(--stzh-color-white48);
   --hover-icon-color: var(--stzh-color-white);
+  --hover-counter-color: var(--stzh-color-white48);
+}
+@media (forced-colors: active), (-ms-high-contrast: active) {
+  :host[active]:not([active=false]) {
+    --color: SelectedItem;
+    --border: 0.0625rem solid SelectedItem;
+    --remove-color: SelectedItem;
+    --background-color: Canvas;
+    --icon-color: SelectedItem;
+    --counter-color: SelectedItem;
+    --hover-color: Highlight;
+    --hover-border: 0.0625rem solid Highlight;
+    --hover-background-color: Canvas;
+    --hover-remove-color: Highlight;
+    --hover-remove-background-color: Canvas;
+    --hover-icon-color: Highlight;
+    --hover-counter-color: Highlight;
+  }
 }
 :host[disabled]:not([disabled=false]) {
   --color: var(--stzh-color-grey25);
   --border: 0.0625rem solid var(--stzh-base-border-color);
   --remove-color: var(--stzh-color-grey13);
   --background-color: var(--stzh-color-white);
-  --counter-color: var(--stzh-color-grey25);
   --icon-color: var(--stzh-color-grey25);
+  --counter-color: var(--stzh-color-grey25);
   --hover-color: var(--stzh-color-grey25);
   --hover-border: 0.0625rem solid var(--stzh-base-border-color);
   --hover-background-color: var(--stzh-color-white);
   --hover-remove-color: var(--stzh-color-grey13);
   --hover-remove-background-color: transparent;
-  --hover-counter-color: var(--stzh-color-grey25);
   --hover-icon-color: var(--stzh-color-grey25);
+  --hover-counter-color: var(--stzh-color-grey25);
 }
 
 :host ::slotted(stzh-icon),
@@ -195,9 +230,21 @@
   /* Removeable */
   /* Disabled */
 }
+.stzh-chip__vhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
 .stzh-chip__button {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
+  font-family: inherit;
   height: var(--height);
   display: flex;
   flex-direction: row;
@@ -235,6 +282,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: 0;

package/dist/collection/components/stzh-chip/stzh-chip.js

@@ -53,6 +53,7 @@ export class StzhChip {
     this.removeLabel = "";
     this.active = false;
     this.disabled = false;
+    this.a11yTabindex = undefined;
     this.a11yLabel = undefined;
     this.a11yDescribedby = "";
   }
@@ -64,8 +65,8 @@ export class StzhChip {
     return (h(Fragment, null, h("div", { class: "stzh-chip__icon-wrapper" }, this.icon ?
       h("stzh-icon", { class: "stzh-chip__icon", name: this.icon })
       :
-        h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null)), this.counter &&
-      h("div", { class: "stzh-chip__counter" }, this.counter)));
+        h("slot", { name: "icon" })), h("div", { class: "stzh-chip__label" }, this.label ? this.label : h("slot", null), h("span", { class: "stzh-chip__vhidden" }, "\u00A0(", this.counter, ")")), this.counter &&
+      h("div", { class: "stzh-chip__counter", "aria-hidden": "true" }, this.counter)));
   }
   render() {
     const classes = {
@@ -80,9 +81,9 @@ export class StzhChip {
     };
     return (h(Host, null, h("div", { class: classes }, this.removable &&
       h("button", { class: "stzh-chip__remove", onClick: this.onRemoveClick, disabled: this.disabled, "aria-label": this.removeLabel, type: "button" }, h("stzh-icon", { class: "stzh-chip__remove-icon", name: "close" })), this.href ?
-      h("a", { class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
+      h("a", { ref: (el) => (this.chip = el), class: "stzh-chip__button", href: this.disabled ? null : this.href, target: this.target, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner())
       :
-        h("button", { class: "stzh-chip__button", disabled: this.disabled, type: "button", "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
+        h("button", { ref: (el) => (this.chip = el), class: "stzh-chip__button", disabled: this.disabled, type: "button", tabindex: this.a11yTabindex, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner()))));
   }
   static get is() { return "stzh-chip"; }
   static get encapsulation() { return "scoped"; }
@@ -314,6 +315,23 @@ export class StzhChip {
         "reflect": true,
         "defaultValue": "false"
       },
+      "a11yTabindex": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabindex of link/button"
+        },
+        "attribute": "a11y-tabindex",
+        "reflect": false
+      },
       "a11yLabel": {
         "type": "string",
         "mutable": false,
@@ -343,7 +361,7 @@ export class StzhChip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Id for element which describes the button"
+          "text": "Id for element which describes the link/button"
         },
         "attribute": "a11y-describedby",
         "reflect": false,

package/dist/collection/components/stzh-chip-select/stzh-chip-select.css

@@ -152,6 +152,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -174,6 +175,7 @@
   align-items: center;
   flex-wrap: wrap;
   margin: calc(var(--stzh-space-small) / -2) calc(var(--stzh-space-xsmall) / -2);
+  border-radius: var(--stzh-button-border-radius);
 }
 @media screen and (max-width: 1023px) {
   .stzh-chip-select__chips {

package/dist/collection/components/stzh-chip-select/stzh-chip-select.js

@@ -9,20 +9,44 @@ export class StzhChipSelect {
   constructor() {
     this._data = [];
     this._dataDropdown = [];
-    this.chipClick = (data) => {
+    this.handleChipClick = (data) => {
       this.value = data.value;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
       });
     };
-    this.onDropdownChange = (event) => {
+    this.handleDropdownChange = (event) => {
       this.value = event.detail.value;
       this.stzhChange.emit({
         component: "stzh-chip-select",
         value: this.value
       });
     };
+    this.handleKeydown = (event) => {
+      let newIndex = null;
+      if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        const activeOptionIndex = this.getActiveOptionIndex();
+        if (activeOptionIndex > 0) {
+          newIndex = activeOptionIndex - 1;
+        }
+      }
+      else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const activeOptionIndex = this.getActiveOptionIndex();
+        if (activeOptionIndex < this._data.length - 1) {
+          newIndex = activeOptionIndex + 1;
+        }
+      }
+      if (newIndex !== null) {
+        this.value = this._data[newIndex].value;
+        this.stzhChange.emit({
+          component: "stzh-chip-select",
+          value: this.value
+        });
+      }
+    };
     this.localization = undefined;
     this.data = [];
     this.name = undefined;
@@ -72,8 +96,11 @@ export class StzhChipSelect {
     }
     this.invalid = this._error.length > 0;
   }
+  getActiveOptionIndex() {
+    return this._data.findIndex(data => this.value === data.value);
+  }
   async componentWillLoad() {
-    this.inputId = `stzh-chip-select-${chipSelectCounter++}`;
+    this.id = `stzh-chip-select-${chipSelectCounter++}`;
     this.dataWatcher(this.data);
     this.errorWatcher(this.error);
     if (!this.localization) {
@@ -93,7 +120,7 @@ export class StzhChipSelect {
       "stzh-chip-select--is-disabled": this.disabled,
       "stzh-chip-select--is-required": this.required
     };
-    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox" }, this._data.map((data) => (h("stzh-chip", { role: "option", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value ? "true" : null, a11yDescribedby: `${this.inputId}-description ${this.a11yDescribedby}`, onClick: () => this.chipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.onDropdownChange }))));
+    return (h(Host, null, h("div", { class: classes }, h("input", { type: "hidden", name: this.name, value: this.value }), h("div", { class: "stzh-chip-select__chips", role: "listbox", tabindex: "0", "aria-multiselectable": "false", "aria-activedescendant": `${this.id}-option-${this.getActiveOptionIndex()}`, "aria-describedby": `${this.id}-description ${this.a11yDescribedby}`, onKeyDown: this.handleKeydown }, this._data.map((data, i) => (h("stzh-chip", { role: "option", class: "stzh-chip-select__chip", label: data.label, counter: data.counter, icon: data.icon, type: data.type, variant: data.variant, size: data.size, disabled: this.disabled || data.disabled, active: this.value === data.value, "aria-selected": this.value === data.value, id: `${this.id}-option-${i}`, a11yTabindex: "-1", onClick: () => this.handleChipClick(data) })))), h(StzhInputDescription, { classPrefix: "stzh-chip-select", id: `${this.id}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }), h("stzh-dropdown", { class: "stzh-chip-select__dropdown", disabled: this.disabled, error: this._error, description: this.description, descriptionLong: this.descriptionLong, required: this.required, invalid: this.invalid, items: [this.value], label: this.label, options: this._dataDropdown, onStzhChange: this.handleDropdownChange }))));
   }
   static get is() { return "stzh-chip-select"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css

@@ -146,6 +146,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   background: transparent;
   border: none;
   padding: 0;

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.css

@@ -126,6 +126,17 @@
     padding-right: var(--stzh-space-xlarge);
   }
 }
+.stzh-datamessagelist-item__vhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+  width: 0.0625rem;
+  height: 0.0625rem;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
 .stzh-datamessagelist-item__content {
   display: flex;
   flex-direction: column;

package/dist/collection/components/stzh-datamessagelist-item/stzh-datamessagelist-item.js

@@ -74,7 +74,8 @@ export class StzhDatamessagelistItem {
       "stzh-datamessagelist-item": true,
       "stzh-datamessagelist-item--is-unread": this.unread
     };
-    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.heading)), this.description &&
+    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, onClick: this.itemClick }, this.unread &&
+      h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
       h("stzh-status", { class: "stzh-datamessagelist-item__status", label: this._loadingStatus.label, percent: this._loadingStatus.percent, type: this._loadingStatus.type, withLoadingbar: true }), this._tags && this._tags.length > 0 &&
@@ -101,7 +102,7 @@ export class StzhDatamessagelistItem {
         "mutable": false,
         "complexType": {
           "original": "StzhDatamessagelistItemLocalizedText",
-          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; }",
+          "resolved": "StzhLocaleComponent & { actionsPopoverLabel: string; unread: string; }",
           "references": {
             "StzhDatamessagelistItemLocalizedText": {
               "location": "import",

package/dist/collection/components/stzh-details/stzh-details.js

@@ -30,6 +30,9 @@ export class StzhDetails {
     this.open = false;
   }
   async openWatcher(newValue) {
+    if (!this.triggerElement) {
+      return;
+    }
     if (this.triggerElement.firstElementChild) {
       const isStzh = isStzhElement(this.triggerElement.firstElementChild);
       this.triggerElement.firstElementChild

package/dist/collection/components/stzh-dialog/stzh-dialog.css

@@ -234,6 +234,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: var(--stzh-space-xsmall);

package/dist/collection/components/stzh-dialog/stzh-dialog.js

@@ -123,7 +123,7 @@ export class StzhDialog {
     activeDialog = null;
   }
   async componentWillLoad() {
-    this.headingId = `stzh-dialog-label-${dialogCounter}`;
+    this.id = `stzh-dialog-${dialogCounter}`;
     dialogCounter++;
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "dialog");
@@ -166,8 +166,8 @@ export class StzhDialog {
         "stzh-dialog--has-heading": !!this.heading,
         "stzh-dialog--has-close-hidden": this.hideClose,
         [`stzh-dialog--size-${this.size}`]: !!this.size,
-      } }, h("div", { class: "stzh-dialog__backdrop" }), h("div", { class: "stzh-dialog__content" }, h("div", { class: "stzh-dialog__dialog", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-label": this.a11yLabel, "aria-labelledby": this.heading ? this.headingId : null, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, this.heading &&
-      h("stzh-heading", { id: this.headingId, class: "stzh-dialog__heading", level: "2", "with-border": true }, this.heading), h("div", { class: "stzh-dialog__dialog-content" }, h("slot", null)), h("div", { class: "stzh-dialog__actions" }, h("slot", { name: "actions" })), !this.hideClose &&
+      } }, h("div", { class: "stzh-dialog__backdrop" }), h("div", { class: "stzh-dialog__content" }, h("div", { class: "stzh-dialog__dialog", ref: (el) => (this.dialogElement = el), tabindex: "-1", role: this.a11yRole, "aria-label": this.a11yLabel, "aria-labelledby": this.heading ? `${this.id}-heading` : null, "aria-hidden": this.open ? "false" : "true", onClick: this.handleDialogClick }, this.heading &&
+      h("stzh-heading", { id: `${this.id}-heading`, class: "stzh-dialog__heading", level: "2", "with-border": true }, this.heading), h("div", { class: "stzh-dialog__dialog-content" }, h("slot", null)), h("div", { class: "stzh-dialog__actions" }, h("slot", { name: "actions" })), !this.hideClose &&
       h("button", { class: "stzh-dialog__close-button", onClick: this.handleCloseButtonClick, "aria-label": this.localization.close, type: "button" }, h("stzh-icon", { class: "stzh-dialog__close-icon", name: "close" })))))));
   }
   static get is() { return "stzh-dialog"; }

package/dist/collection/components/stzh-dropdown/stzh-dropdown.css

@@ -231,6 +231,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;
@@ -441,6 +442,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   text-decoration: none;
   outline: none;
   border: none;
@@ -587,6 +589,7 @@ stzh-dropdown[disabled]:not([disabled=false])[variant=plain] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: 0.0625rem solid transparent;
   background-color: var(--stzh-color-grey5);
   transition: all var(--stzh-base-transition-animation-speed);

package/dist/collection/components/stzh-ghettobox/stzh-ghettobox.css

@@ -275,6 +275,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: var(--stzh-space-xsmall);

package/dist/collection/components/stzh-header/stzh-header.stories.js

@@ -55,7 +55,7 @@ const Popover = () => (
 const Logo = () => (
   <img
     src="media/logo/stzh-default.svg"
-    alt="Logo Stadt Zürich"
+    alt="Logo City Zürich, go to homepage"
   ></img>
 );
 

package/dist/collection/components/stzh-icon/stzh-icon.js

@@ -10,7 +10,7 @@ export class StzhIcon {
   }
   render() {
     return (h(Host, null, this.name &&
-      h("svg", { class: "stzh-icon", role: this.a11yTitle ? 'img' : 'presentation', focusable: this.a11yTitle ? 'true' : 'false', "aria-labelledby": this.a11yTitle ? `${this.iconId}-title` : null }, this.a11yTitle &&
+      h("svg", { class: "stzh-icon", role: this.a11yTitle ? 'img' : 'presentation', "aria-hidden": this.a11yTitle ? null : 'true', focusable: this.a11yTitle ? 'true' : 'false', "aria-labelledby": this.a11yTitle ? `${this.iconId}-title` : null }, this.a11yTitle &&
         h("title", { id: `${this.iconId}-title` }, this.a11yTitle), h("use", { href: `#stzh-icon-${this.name}` }))));
   }
   static get is() { return "stzh-icon"; }

package/dist/collection/components/stzh-input/stzh-input.css

@@ -184,6 +184,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   padding: 0;
   border: none;
   background-color: transparent;

package/dist/collection/components/stzh-link/stzh-link.css

@@ -139,6 +139,7 @@
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
   line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
   letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
+  font-family: inherit;
   position: relative;
   display: flex;
   align-items: center;

package/dist/collection/components/stzh-menu-item/stzh-menu-item.css

@@ -125,6 +125,7 @@
 .stzh-menu-item {
   font-size: var(--stzh-font-micro-font-size);
   line-height: var(--stzh-font-micro-text-line-height);
+  font-family: inherit;
   display: flex;
   align-items: center;
   justify-content: stretch;

package/dist/collection/components/stzh-message/stzh-message.css

@@ -227,6 +227,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background: none;
   padding: var(--stzh-space-xsmall);

package/dist/collection/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.js

@@ -73,7 +73,7 @@ export class StzhMicrositeTeaserlist {
     const classes = {
       "stzh-microsite-teaserlist": true,
     };
-    return (h(Host, null, h("div", { class: classes }, h("stzh-chip-select", { class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-card-list", { layout: "subpages" }, this.filteredSlicedItems.map((item) => h("stzh-card", { href: item.link, hideHeaderBorder: true }, item.image &&
+    return (h(Host, null, h("div", { class: classes }, h("stzh-chip-select", { class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-card-list", { layout: "subpages" }, this.filteredSlicedItems.map((item) => h("stzh-card", { href: item.link, hideHeaderBorder: true, hideFooterBorder: true, withArrow: true }, item.image &&
       h("img", { slot: "image", src: item.image }), item.title &&
       h("stzh-clamp", { slot: "heading", lines: 2 }, item.title), item.description &&
       h("stzh-clamp", { slot: "content", lines: 3 }, item.description)))), this.showItems < this.filteredItems.length &&

package/dist/collection/components/stzh-olmap/stzh-olmap.js

@@ -92,7 +92,7 @@ export class StzhOlmap {
       </style>
 
       <div class="stzh-olmap__map stzh-olmap__map--print">
-        <img class="stzh-olmap__print-image" src="${img}" alt="">
+        <img class="stzh-olmap__print-image" src="${img}">
         ${this.element.querySelector(".ol-scale-line.ol-unselectable").outerHTML}
       </div>
     `;

package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.stories.js

@@ -30,7 +30,7 @@ const Template = (args) => (
 
 const TemplateWithLogo = (args) => (
   <stzh-pagebottom {...args}>
-    <img slot="logo" src="media/logo/stzh-company.svg" loading="lazy" alt="A company of the city of Zurich" />
+    <img slot="logo" src="media/logo/stzh-company.svg" loading="lazy" alt="A company of the city of Zurich, go to homepage" />
   </stzh-pagebottom>
 );
 

package/dist/collection/components/stzh-popover/stzh-popover.css

@@ -273,6 +273,7 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  font-family: inherit;
   border: none;
   background-color: transparent;
   padding: 0;
@@ -329,6 +330,7 @@
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
+    font-family: inherit;
     border: none;
     background-color: transparent;
     padding: 0;

package/dist/collection/components/stzh-popover/stzh-popover.js

@@ -214,6 +214,9 @@ export class StzhPopover {
     }
   }
   async openWatcher(newValue) {
+    if (!this.dialogElement) {
+      return;
+    }
     if (newValue) {
       if (this.toggledByMethod) {
         this.stzhOpen.emit({
@@ -277,7 +280,7 @@ export class StzhPopover {
     }
   }
   async componentWillLoad() {
-    this.labelId = `stzh-popover-label-${popoverCounter++}`;
+    this.id = `stzh-popover-${popoverCounter++}`;
     this.distanceWatcher(this.distance);
     if (!this.localization) {
       this.localization = await fetchTranslations(this.element, "popover");
@@ -304,6 +307,17 @@ export class StzhPopover {
   componentDidRender() {
     this.computePosition();
     this.open ? this.popoverShown() : this.popoverHidden();
+    const isStzh = isStzhElement(this.triggerElement.firstElementChild);
+    if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-describedby"))
+      || this.triggerElement.firstElementChild.getAttribute("aria-describedby")) {
+      this.triggerElement.firstElementChild
+        .setAttribute(isStzh ? "a11y-describedby" : "aria-describedby", `${this.id}-trigger-description`);
+    }
+    if ((isStzh && !this.triggerElement.firstElementChild.getAttribute("a11y-label"))
+      || this.triggerElement.firstElementChild.getAttribute("aria-label")) {
+      this.triggerElement.firstElementChild
+        .setAttribute(isStzh ? "a11y-label" : "aria-label", this.label);
+    }
   }
   componentDidUpdate() {
     this.trap.updateContainerElements(this.dialogElement);
@@ -347,8 +361,8 @@ export class StzhPopover {
       [`stzh-popover--placement-${this.computedPlacement}`]: !!this.computedPlacement,
       [`stzh-popover--${this.variant}`]: !!this.variant
     };
-    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? this.labelId : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
-      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))), h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: this.labelId, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))))))))));
+    return (h(Host, null, h("div", { class: classes, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { ref: (el) => (this.triggerElement = el), class: "stzh-popover__trigger" }, h("slot", null)), h("div", { class: "stzh-popover__vhidden", id: `${this.id}-trigger-description` }, this.localization.open), h("div", { ref: (el) => (this.contentWrapperElement = el), class: "stzh-popover__content-wrapper" }, h("div", { class: "stzh-popover__backdrop" }), h("div", { ref: (el) => (this.contentElement = el), class: "stzh-popover__content" }, h("div", { ref: (el) => (this.dialogElement = el), class: "stzh-popover__dialog", role: "dialog", tabindex: "-1", "aria-modal": "true", "aria-labelledby": this.label ? `${this.id}-label` : null, "aria-hidden": this.open ? "false" : "true", onKeyDown: this.handleKeydown }, this.variant === "tooltip" &&
+      h("div", { class: "stzh-popover__arrow", ref: (el) => (this.arrowElement = el), innerHTML: Arrow }), h("div", { class: "stzh-popover__content-inner" }, h("div", { class: "stzh-popover__content-slot" }, h("slot", { name: "content" }), h("div", { class: "stzh-popover__action-slot" }, h("slot", { name: "action" }))), h("div", { class: "stzh-popover__label-wrapper" }, h("h2", { id: `${this.id}-label`, class: "stzh-popover__label" }, this.label ? this.label : h("slot", { name: "label" })), h("button", { class: "stzh-popover__close", onClick: () => this.hide(), type: "button" }, h("stzh-icon", { name: "close", class: "stzh-popover__icon" }), h("span", { class: "stzh-popover__vhidden" }, this.localization.close))))))))));
   }
   static get is() { return "stzh-popover"; }
   static get encapsulation() { return "scoped"; }
@@ -499,7 +513,7 @@ export class StzhPopover {
         "mutable": false,
         "complexType": {
           "original": "StzhPopoverLocalizedText",
-          "resolved": "StzhLocaleComponent & { close: string; }",
+          "resolved": "StzhLocaleComponent & { open: string; close: string; }",
           "references": {
             "StzhPopoverLocalizedText": {
               "location": "import",