@dso-toolkit/core 43.0.0 → 44.0.0

package/dist/collection/components/viewer-grid/viewer-grid.js

@@ -4,6 +4,11 @@ import { ViewerGridFilterpanelButtons } from './viewer-grid-filterpanel-buttons'
 const TRANSITION_TIME = 200; // Keep in sync with dso-viewer-grid.variables.scss:$dso-viewer-grid-transition-time;
 export class ViewerGrid {
   constructor() {
+    this.sizeLabelMap = {
+      small: 'smal',
+      medium: 'middel',
+      large: 'breed',
+    };
     this.filterpanelOpen = false;
     this.overlayOpen = false;
     /**
@@ -14,10 +19,10 @@ export class ViewerGrid {
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {
-      this.mainSize = this.mainSize == "large" ? "medium" : "small";
+      this.mainSize = this.mainSize === 'large' ? 'medium' : 'small';
     };
     this.expandMain = () => {
-      this.mainSize = this.mainSize == "small" ? "medium" : "large";
+      this.mainSize = this.mainSize === 'small' ? 'medium' : 'large';
     };
     this.keyDownListener = (event) => {
       if (event.key != "Escape") {
@@ -104,6 +109,9 @@ export class ViewerGrid {
     return (h(Host, Object.assign({}, { [this.mainSize]: true }),
       h("div", { class: "dso-map-panel" },
         h("div", { class: "sizing-buttons" },
+          h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" },
+            "breedte tekstpaneel: ",
+            this.sizeLabelMap[this.mainSize]),
           h("button", { type: "button", class: "shrink", disabled: this.mainSize == "small", onClick: this.shrinkMain },
             h("dso-icon", { icon: "chevron-left" })),
           h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain },