After review

albozek · albozek · commit e6058a68fd18 · 2025-10-21T15:39:47.000+02:00
diff --git a/src/bundle/Resources/public/ts/components/chip.ts b/src/bundle/Resources/public/ts/components/chip.ts
@@ -1,27 +1,35 @@
 import { Base } from '../partials';
 
+interface ChipConfig {
+    onClose?: (event: Event) => void;
+}
+
 export default class Chip extends Base {
     private closeButton: HTMLButtonElement | null;
-    private onClose: (event: Event) => void;
+    private onClose?: (event: Event) => void;
 
-    constructor(container: HTMLDivElement, onClose: (event: Event) => void) {
+    constructor(container: HTMLDivElement, config: ChipConfig = {}) {
         super(container);
 
         this.closeButton = this._container.querySelector('.ids-chip__close');
-        this.onClose = onClose;
-        this.init();
+        this.onClose = config.onClose;
     }
 
-    public init(): void {
-        if (this.closeButton) {
-            this.closeButton.addEventListener('click', this.handleClose.bind(this));
+    private handleClose(event: MouseEvent): void {
+        event.stopPropagation();
+        if (this.onClose) {
+            this.onClose(event);
         }
+    }
 
-        super.init();
+    private initCloseButton(closeButton: HTMLButtonElement): void {
+        closeButton.addEventListener('click', this.handleClose.bind(this));
     }
 
-    private handleClose(event: Event): void {
-        event.stopPropagation();
-        this.onClose(event);
+    public init(): void {
+        if (this.closeButton) {
+            this.initCloseButton(this.closeButton);
+        }
+        super.init();
     }
 }
diff --git a/src/bundle/Resources/translations/ibexa_design_system_twig.en.xliff b/src/bundle/Resources/translations/ibexa_design_system_twig.en.xliff
@@ -6,6 +6,11 @@
       <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
     </header>
     <body>
+      <trans-unit id="0984281415afe479062f03d95efc14912bc27175" resname="ibexa.chip.close-btn.label">
+        <source>Remove</source>
+        <target state="new">Remove</target>
+        <note>key: ibexa.chip.close-btn.label</note>
+      </trans-unit>
       <trans-unit id="61c7070a29f932eb0b1a343509d049aa52c92c09" resname="ibexa.clear-btn.label">
         <source>Clear</source>
         <target state="new">Clear</target>
diff --git a/src/bundle/Resources/views/themes/standard/design_system/components/chip.html.twig b/src/bundle/Resources/views/themes/standard/design_system/components/chip.html.twig
@@ -1,3 +1,5 @@
+{% trans_default_domain 'ibexa_design_system_twig' %}
+
 {% set chip_classes =
     html_classes(
         'ids-chip',
@@ -8,19 +10,20 @@
         attributes.render('class') ?? ''
     )
 %}
+{% set close_msg = 'ibexa.chip.close-btn.label'|trans|desc('Remove') %}
 
-<div tabIndex={{ disabled ? -1 : 0 }} class="{{ chip_classes }}" {{ attributes }}>
+<div tabIndex={{ disabled ? -1 : 0 }} class="{{ chip_classes }}" aria-disabled="{{ disabled ? 'true' : 'false' }}" {{ attributes }}>
     <div class="ids-chip__content">
         {{ block('content') }}
     </div>
-    {% if isClosable %}
+    {% if is_closable %}
         <twig:ibexa:button
             type="tertiary-alt"
             size="small"
             icon="discard"
             class="ids-chip__close ids-chip-clear-btn"
             disabled="{{ disabled }}"
-            aria-label="Remove"
+            aria-label="close_msg"
         />
     {% endif %}
 </div>
diff --git a/src/lib/Twig/Components/Chip.php b/src/lib/Twig/Components/Chip.php
@@ -10,16 +10,18 @@
 
 use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
 use Symfony\UX\TwigComponent\Attribute\PreMount;
 
 #[AsTwigComponent('ibexa:chip')]
 final class Chip
 {
     public bool $error = false;
 
-    public bool $isClosable = true;
+    #[ExposeInTemplate('is_closable')]
+    public bool $is_closable = true;
 
-    public bool $disabled = true;
+    public bool $disabled = false;
 
     /**
      * @param array<string, mixed> $props
