minor housekeeping

Signed-off-by: Maximilian Inckmann <[email protected]>

Author: maximiliani

packages/react-library/lib/components/stencil-generated/components.server.ts

@@ -42,7 +42,10 @@ export type CopyButtonEvents = NonNullable<unknown>;
 
 export const CopyButton: StencilReactComponent<CopyButtonElement, CopyButtonEvents> = /*@__PURE__*/ createComponent<CopyButtonElement, CopyButtonEvents>({
   tagName: 'copy-button',
-  properties: { value: 'value' },
+  properties: {
+    value: 'value',
+    label: 'label',
+  },
   hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
   serializeShadowRoot,
 });
@@ -79,7 +82,10 @@ export type PidActionsEvents = NonNullable<unknown>;
 
 export const PidActions: StencilReactComponent<PidActionsElement, PidActionsEvents> = /*@__PURE__*/ createComponent<PidActionsElement, PidActionsEvents>({
   tagName: 'pid-actions',
-  properties: { actions: 'actions' },
+  properties: {
+    actions: 'actions',
+    actionsId: 'actions-id',
+  },
   hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
   serializeShadowRoot,
 });

packages/stencil-library/src/components.d.ts

@@ -19,12 +19,18 @@ export namespace Components {
         "text": string;
     }
     interface CopyButton {
-        /**
-          * The value to copy to the clipboard.
-          * @type {string}
-          * @public
-         */
-        "value": string;
+      /**
+       * Optional custom label for the button. If not provided, a default label will be used.
+       * @type {string}
+       * @public
+       */
+      label?: string;
+      /**
+       * The value to copy to the clipboard.
+       * @type {string}
+       * @public
+       */
+      value: string;
     }
     interface JsonViewer {
         /**
@@ -71,21 +77,25 @@ export namespace Components {
        * @type {string}
        * @public
        */
-      locale: string;
+      "locale": string;
       /**
-       * Whether to show the flag of the region.
+ 'locale'Whether to show the flag of the region.
        * @type {boolean}
        * @public
        * @default true
        */
-      showFlag: boolean;
+      "showFlag": boolean;
     }
-    interface PidActions {
+  'showFlag'e PidActions {
         /**
           * Array of actions to display
           * @default []
          */
         "actions": FoldableAction[];
+      /**
+       * Optional ID for the actions container for ARIA references
+       */
+      'actionsId'?: string;
     }
     /**
      * Component for creating collapsible/expandable content sections
@@ -132,72 +142,72 @@ export namespace Components {
        * @type {number}
        * @default 10
        */
-      "amo'amountOfItems'mber;
+      'amountOfItems': number;
       /**
        * The current level of subcomponents. Defaults to 0. (optional)
        * @type {number}
        * @default 0
        */
-      "cur'currentLevelOfSubcomponents'mber;
+      'currentLevelOfSubcomponents': number;
       /**
        * Determines the default time to live (TTL) for entries in the IndexedDB. Defaults to 24 hours. Units are in milliseconds. (optional)
        * @type {number}
        * @default 24 * 60 * 60 * 1000
        */
-      "def'defaultTTL'mber;
+      'defaultTTL': number;
       /**
        * Determines whether components should be emphasized towards their surrounding by border and shadow. If set to true, border and shadows will be shown around the component. It not set, the component won't be surrounded by border and shadow. (optional)
        * @type {boolean}
        * @default true
        */
-      "emp'emphasizeComponent'olean;
+      'emphasizeComponent': boolean;
       /**
        * Initial height of the component (e.g. '300px', '50vh'). If not set, defaults to 300px.
        * @type {string}
        */
-      "hei'height'tring;
+      'height'?: string;
       /**
        * Determines whether subcomponents should generally be shown or not. If set to true, the component won't show any subcomponents. If not set, the component will show subcomponents if the current level of subcomponents is not the total level of subcomponents or greater. (optional)
        * @type {boolean}
        */
-      "hid'hideSubcomponents'olean;
+      'hideSubcomponents': boolean;
       /**
        * The total number of levels of subcomponents to show. Defaults to 1. (optional)
        * @type {number}
        * @default 1
        */
-      "lev'levelOfSubcomponents'mber;
+      'levelOfSubcomponents': number;
       /**
        * Determines whether the component is open or not by default. (optional)
        * @type {boolean}
        */
-      "ope'openByDefault'olean;
+      'openByDefault': boolean;
       /**
        * A stringified JSON object containing settings for this component. The resulting object is passed to every subcomponent, so that every component has the same settings. Values and the according type are defined by the components themselves. (optional)  Schema: ```typescript {  type: string,  values: {   name: string,   value: any  }[] }[] ```
        * @type {string}
        * @default '[]'
        */
-      "set'settings'ring;
+      'settings': string;
       /**
        * Determines whether on the top level the copy button is shown. If set to true, the copy button is shown also on the top level. It not set, the copy button is only shown for sub-components. (optional)
        * @type {boolean}
        * @default true
        */
-      "sho'showTopLevelCopy'olean;
+      'showTopLevelCopy': boolean;
       /**
        * Updates the component sizing and styling based on the expanded state This method is now handled by the pid-collapsible component
        */
-      "upd'updateComponentSizing' => Promise<void>;
+      'updateComponentSizing': () => Promise<void>;
       /**
        * The value to parse, evaluate and render.
        * @type {string}
        */
-      "val'value'ring;
+      'value': string;
       /**
        * Initial width of the component (e.g. '500px', '50%'). If not set, defaults to 500px on large screens, 400px on medium screens, and 300px on small screens.
        * @type {string}
        */
-      "wid'width'tring;
+      'width'?: string;
     }
 
   interface PidDataTable {
@@ -456,6 +466,12 @@ declare namespace LocalJSX {
     }
     interface CopyButton {
         /**
+         * Optional custom label for the button. If not provided, a default label will be used.
+         * @type {string}
+         * @public
+         */
+        'label'?: string;
+      /**
           * The value to copy to the clipboard.
           * @type {string}
           * @public
@@ -514,6 +530,10 @@ declare namespace LocalJSX {
           * @default []
          */
         "actions"?: FoldableAction[];
+      /**
+       * Optional ID for the actions container for ARIA references
+       */
+      'actionsId'?: string;
     }
     /**
      * Component for creating collapsible/expandable content sections

packages/stencil-library/src/components/copy-button/copy-button.tsx

@@ -9,13 +9,22 @@ export class CopyButton {
    * Internal state to track if copy was successful
    */
   @State() copied: boolean = false;
+
   /**
    * The value to copy to the clipboard.
    * @type {string}
    * @public
    */
   @Prop() value!: string;
 
+  /**
+   * Optional custom label for the button.
+   * If not provided, a default label will be used.
+   * @type {string}
+   * @public
+   */
+  @Prop() label?: string;
+
   /**
    * Copies the given value to the clipboard and updates the state to show success message.
    */
@@ -24,18 +33,14 @@ export class CopyButton {
     event.stopPropagation();
     event.preventDefault();
 
-    console.log('Copying value:', this.value);
-
     try {
       // Try the Async Clipboard API first
       if ('clipboard' in navigator) {
         try {
           await navigator.clipboard.writeText(this.value);
-          console.debug('Copied to clipboard using Async Clipboard API:', this.value);
           this.showSuccess();
           return;
         } catch (err) {
-          console.error('Async Clipboard API failed, falling back to execCommand:', err);
           // Fall through to execCommand fallback
         }
       }
@@ -44,7 +49,10 @@ export class CopyButton {
       const textArea = document.createElement('textarea');
       textArea.value = this.value;
 
-      // Add to DOM with Tailwind classes for positioning
+      // Add accessibility attributes and Tailwind classes for positioning
+      textArea.setAttribute('aria-hidden', 'true');
+      textArea.setAttribute('tabindex', '-1');
+      textArea.setAttribute('readonly', 'readonly');
       textArea.className = 'fixed top-0 left-0 opacity-0 pointer-events-none z-[9999] w-[10em] h-[10em]';
 
       document.body.appendChild(textArea);
@@ -57,7 +65,6 @@ export class CopyButton {
 
         try {
           const success = document.execCommand('copy');
-          console.log(`execCommand copy was ${success ? 'successful' : 'unsuccessful'}.`);
           if (success) {
             this.showSuccess();
           } else {
@@ -71,20 +78,19 @@ export class CopyButton {
               textArea.setSelectionRange(0, textArea.value.length); // For mobile devices
 
               const secondAttempt = document.execCommand('copy');
-              console.log(`Second attempt execCommand copy was ${secondAttempt ? 'successful' : 'unsuccessful'}.`);
               if (secondAttempt) {
                 this.showSuccess();
               }
             }
           }
         } catch (err) {
-          console.error('Failed to copy text with execCommand:', err);
+          // Error handling is silent to not disrupt user experience
         } finally {
           document.body.removeChild(textArea);
         }
       }, 200); // Increased timeout for better reliability
     } catch (err) {
-      console.error('Failed to copy text:', err);
+      // Error handling is silent to not disrupt user experience
     }
   };
 
@@ -100,16 +106,43 @@ export class CopyButton {
     }, 1500);
   }
 
+  /**
+   * Get the appropriate aria-label based on component state and props
+   */
+  private getAriaLabel(): string {
+    const baseLabel = this.label || 'content';
+    return this.copied ? `${baseLabel} copied to clipboard` : `Copy ${baseLabel} to clipboard`;
+  }
+
   render() {
+    // Determine button text based on state
+    const buttonText = this.copied ? '✓ Copied!' : 'Copy';
+
+    // Get appropriate aria-label
+    const ariaLabel = this.getAriaLabel();
+
     return (
       <Host class={'inline-block align-baseline text-xs'}>
+        {/* Hidden live region for screen readers */}
+        {this.copied && (
+          <span class="sr-only" aria-live="assertive">
+            Content copied to clipboard
+          </span>
+        )}
+
         <button
-          class={`${this.copied ? 'bg-green-200' : 'bg-white hover:bg-blue-200'} border border-slate-500 text-slate-800 font-medium font-mono rounded-md px-2 py-0.5 hover:text-slate-900 flex-none max-h-min items-center z-30 relative`}
+          class={`${this.copied ? 'bg-green-200' : 'bg-white hover:bg-blue-200'}
+            border border-slate-500 text-slate-800 font-medium font-mono
+            rounded-md px-2 py-0.5 hover:text-slate-900 flex-none max-h-min
+            items-center z-30 relative
+            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+            transition-colors duration-200`}
           onClick={e => this.copyValue(e)}
-          aria-label={this.copied ? 'Copied to clipboard' : 'Copy to clipboard'}
+          aria-label={ariaLabel}
+          title={ariaLabel}
           type="button"
         >
-          {this.copied ? '✓ Copied!' : 'Copy'}
+          {buttonText}
         </button>
       </Host>
     );

packages/stencil-library/src/components/copy-button/readme.md

@@ -5,9 +5,10 @@
 
 ## Properties
 
-| Property             | Attribute | Description                         | Type     | Default     |
-| -------------------- | --------- | ----------------------------------- | -------- | ----------- |
-| `value` _(required)_ | `value`   | The value to copy to the clipboard. | `string` | `undefined` |
+| Property             | Attribute | Description                                                                          | Type     | Default     |
+|----------------------|-----------|--------------------------------------------------------------------------------------|----------|-------------|
+| `label`              | `label`   | Optional custom label for the button. If not provided, a default label will be used. | `string` | `undefined` |
+| `value` _(required)_ | `value`   | The value to copy to the clipboard.                                                  | `string` | `undefined` |
 
 
 ## Dependencies