@openproject/primer-view-components 0.64.0 → 0.64.1-rc.77c089483

package/app/components/primer/open_project/border_box/collapsible_header.css

@@ -1 +1 @@
-.CollapsibleHeader{align-items:center;cursor:pointer;display:flex}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer,.Box:has(.CollapsibleHeader--collapsed) .Box-row{display:none}
+.CollapsibleHeader{align-items:center;cursor:pointer;display:flex}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer,.Box:has(.CollapsibleHeader--collapsed) .Box-row{display:none}.CollapsibleHeader--triggerArea{width:100%}

package/app/components/primer/open_project/border_box/collapsible_header.css.json

@@ -5,6 +5,7 @@
     ".Box:has(.CollapsibleHeader--collapsed)",
     ".Box:has(.CollapsibleHeader--collapsed) .Box-body",
     ".Box:has(.CollapsibleHeader--collapsed) .Box-footer",
-    ".Box:has(.CollapsibleHeader--collapsed) .Box-row"
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-row",
+    ".CollapsibleHeader--triggerArea"
   ]
 }

package/app/components/primer/open_project/collapsible.d.ts

@@ -1,8 +1,10 @@
 export declare abstract class CollapsibleElement extends HTMLElement {
     arrowDown: Element;
     arrowUp: Element;
+    triggerElement: HTMLElement;
     collapsibleElements: HTMLElement[];
     collapsed: boolean;
+    toggleViaKeyboard(event: KeyboardEvent): void;
     toggle(): void;
     attributeChangedCallback(name: string): void;
     hideAll(): void;

package/app/components/primer/open_project/collapsible.js

@@ -11,6 +11,12 @@ export class CollapsibleElement extends HTMLElement {
         super(...arguments);
         this.collapsed = false;
     }
+    toggleViaKeyboard(event) {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
     toggle() {
         this.collapsed = !this.collapsed;
     }
@@ -28,6 +34,7 @@ export class CollapsibleElement extends HTMLElement {
         // For whatever reason, setting `hidden` directly does not work on the SVGs
         this.arrowDown?.removeAttribute('hidden');
         this.arrowUp?.setAttribute('hidden', '');
+        this.triggerElement.setAttribute('aria-expanded', 'false');
         for (const el of this.collapsibleElements) {
             el.hidden = true;
         }
@@ -36,6 +43,7 @@ export class CollapsibleElement extends HTMLElement {
     expandAll() {
         this.arrowUp?.removeAttribute('hidden');
         this.arrowDown?.setAttribute('hidden', '');
+        this.triggerElement.setAttribute('aria-expanded', 'true');
         for (const el of this.collapsibleElements) {
             el.hidden = false;
         }
@@ -48,6 +56,9 @@ __decorate([
 __decorate([
     target
 ], CollapsibleElement.prototype, "arrowUp", void 0);
+__decorate([
+    target
+], CollapsibleElement.prototype, "triggerElement", void 0);
 __decorate([
     targets
 ], CollapsibleElement.prototype, "collapsibleElements", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.64.0",
+  "version": "0.64.1-rc.77c089483",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/classes.json

@@ -243,6 +243,9 @@
   "CollapsibleHeader": [
     "Primer::OpenProject::BorderBox::CollapsibleHeader"
   ],
+  "CollapsibleHeader--triggerArea": [
+    "Primer::OpenProject::BorderBox::CollapsibleHeader"
+  ],
   "CollapsibleSection--triggerArea": [
     "Primer::OpenProject::CollapsibleSection"
   ],