feat: add disabled to accordion, details and links too

public-ui · Jan 30, 2024 · 7f03db9 · 7f03db9
1 parent c832f83
commit 7f03db9
Show file tree

Hide file tree

Showing 29 changed files with 296 additions and 134 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -52,12 +52,13 @@
 	],
 	"scripts": {
 		"build": "npm run build:light",
+		"build:deps": "pnpm --filter @public-ui/components^... build",
 		"build:light": "npm run clear && mkdir doc && cross-env NODE_ENV=production stencil build --docs --prod && node scripts/hashing.js && node scripts/autogen.doc.js && node scripts/vaadin.js && npm run format -- -w",
 		"clear": "rimraf dist doc loader www ../adapters/angular/v11/src ../adapters/angular/v12/src ../adapters/angular/v13/src ../adapters/angular/v14/src ../adapters/angular/v15/src ../adapters/angular/v16/src ../adapters/angular/v17/src ../adapters/hydrate/dist ../adapters/react/src ../adapters/solid/src ../adapters/vaadin/*.java ../adapters/vue/src",
 		"depcheck": "depcheck --ignore-bin-package --skip-missing --ignores=@types/*,@public-ui/*,@stencil/*,eslint-*,postcss-windicss,tslib,workbox-build",
 		"format": "prettier --check src",
 		"lighthouse": "lighthouse --chrome-flags=\"--headless\" --output-path lighthouse.report.html --preset=desktop --quiet",
-		"lint": "eslint src && tsc --noemit",
+		"lint": "tsc --noemit && eslint src",
 		"unused": "ts-prune src -e",
 		"start": "cross-env NODE_ENV=development stencil build --dev --serve --watch --no-open",
 		"dev": "cross-env NODE_ENV=development stencil build --prod --watch",

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -21,6 +21,10 @@ export namespace Components {
         "_tooltipAlign"?: TooltipAlignPropType;
     }
     interface KolAccordion {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -407,6 +411,10 @@ export namespace Components {
         "_on"?: KoliBriCardEventCallbacks;
     }
     interface KolDetails {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -1643,6 +1651,10 @@ export namespace Components {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -1698,6 +1710,10 @@ export namespace Components {
           * Defines the custom class attribute if _variant="custom" is set.
          */
         "_customClass"?: CustomClassPropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -1771,6 +1787,10 @@ export namespace Components {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -2810,6 +2830,10 @@ declare namespace LocalJSX {
         "_tooltipAlign"?: TooltipAlignPropType;
     }
     interface KolAccordion {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -3194,6 +3218,10 @@ declare namespace LocalJSX {
         "_on"?: KoliBriCardEventCallbacks;
     }
     interface KolDetails {
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
@@ -4420,6 +4448,10 @@ declare namespace LocalJSX {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -4475,6 +4507,10 @@ declare namespace LocalJSX {
           * Defines the custom class attribute if _variant="custom" is set.
          */
         "_customClass"?: CustomClassPropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -4548,6 +4584,10 @@ declare namespace LocalJSX {
           * Defines the value for the aria-current attribute.
          */
         "_ariaCurrentValue"?: AriaCurrentValuePropType;
+        /**
+          * Makes the element not focusable and ignore all events.
+         */
+        "_disabled"?: boolean;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */

diff --git a/packages/components/src/components/accordion/component.tsx b/packages/components/src/components/accordion/component.tsx
@@ -1,13 +1,15 @@
 // https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml
 
 import type { JSX } from '@stencil/core';
-import { featureHint, propagateFocus, setState, validateLabel, validateOpen } from '@public-ui/schema';
+import { featureHint, propagateFocus, setState, validateDisabled, validateLabel, validateOpen } from '@public-ui/schema';
 import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { watchHeadingLevel } from '../heading/validation';
 
 import type { AccordionAPI, AccordionStates, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '@public-ui/schema';
+import type { DisabledPropType } from '@public-ui/schema';
+import { preventDefault } from '../../utils/events';
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
 
 - onClick auf der KolAccordion anwenden
@@ -40,6 +42,7 @@ export class KolAccordion implements AccordionAPI {
 				<div
 					class={{
 						accordion: true,
+						disabled: this.state._disabled === true,
 						open: this.state._open === true,
 					}}
 				>
@@ -50,6 +53,7 @@ export class KolAccordion implements AccordionAPI {
 							slot="expert"
 							_ariaControls={this.nonce}
 							_ariaExpanded={this.state._open}
+							_disabled={this.state._disabled}
 							_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}
 							_label={this.state._label}
 							_on={{ onClick: this.onClick }}
@@ -67,6 +71,11 @@ export class KolAccordion implements AccordionAPI {
 		);
 	}
 
+	/**
+	 * Makes the element not focusable and ignore all events.
+	 */
+	@Prop() public _disabled?: boolean = false;
+
 	/**
 	 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
 	 */
@@ -93,6 +102,11 @@ export class KolAccordion implements AccordionAPI {
 		_level: 1,
 	};
 
+	@Watch('_disabled')
+	public validateDisabled(value?: DisabledPropType): void {
+		validateDisabled(this, value);
+	}
+
 	@Watch('_label')
 	public validateLabel(value?: LabelPropType): void {
 		validateLabel(this, value, {
@@ -118,12 +132,22 @@ export class KolAccordion implements AccordionAPI {
 	}
 
 	public componentWillLoad(): void {
+		this.validateDisabled(this._disabled);
 		this.validateLabel(this._label);
 		this.validateLevel(this._level);
 		this.validateOn(this._on);
 		this.validateOpen(this._open);
 	}
 
+	public componentDidRender() {
+		if (this.host && this.host.shadowRoot) {
+			Array.from(this.host.shadowRoot.querySelectorAll('[aria-disabled="true"]')).forEach((el) => {
+				el.removeEventListener('click', preventDefault);
+				el.addEventListener('click', preventDefault);
+			});
+		}
+	}
+
 	private onClick = (event: Event) => {
 		this._open = !this._open;
 

diff --git a/packages/components/src/components/accordion/readme.md b/packages/components/src/components/accordion/readme.md
@@ -109,12 +109,13 @@ Standardansicht gelegt.
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                                        | Type                                                                                 | Default     |
-| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
-| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                             | `undefined` |
-| `_level`              | `_level`  | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
-| `_on`                 | --        | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
-| `_open`               | `_open`   | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean \| undefined`                                                               | `false`     |
+| Property              | Attribute   | Description                                                                                                        | Type                                                                                 | Default     |
+| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | ----------- |
+| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \| undefined`                                                               | `false`     |
+| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                             | `undefined` |
+| `_level`              | `_level`    | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.                  | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined`                                       | `1`         |
+| `_on`                 | --          | Gibt die EventCallback-Funktionen an.                                                                              | `undefined \| { onClick?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
+| `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean \| undefined`                                                               | `false`     |
 
 ## Slots
 

diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
@@ -16,7 +16,6 @@ import type {
 	TooltipAlignPropType,
 } from '@public-ui/schema';
 import {
-	a11yHintDisabled,
 	mapBoolean2String,
 	mapStringOrBoolean2String,
 	propagateFocus,
@@ -40,7 +39,7 @@ import {
 	validateTooltipAlign,
 	watchString,
 } from '@public-ui/schema';
-import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
@@ -103,6 +102,7 @@ export class KolButtonWc implements ButtonAPI {
 					aria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}
 					class={{
 						button: true,
+						disabled: this.state._disabled === true,
 						[this.state._variant as string]: this.state._variant !== 'custom',
 						[this.state._customClass as string]:
 							this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
@@ -283,9 +283,6 @@ export class KolButtonWc implements ButtonAPI {
 	@Watch('_disabled')
 	public validateDisabled(value?: DisabledPropType): void {
 		validateDisabled(this, value);
-		if (value === true) {
-			a11yHintDisabled();
-		}
 	}
 
 	@Watch('_hideLabel')

diff --git a/packages/components/src/components/details/component.tsx b/packages/components/src/components/details/component.tsx
@@ -6,6 +6,10 @@ import { tryToDispatchKoliBriEvent } from '../../utils/events';
 import DetailsAnimationController from './DetailsAnimationController';
 
 import type { JSX } from '@stencil/core';
+import type { DisabledPropType } from '@public-ui/schema';
+import { validateDisabled } from '@public-ui/schema';
+import { preventDefault } from '../../utils/events';
+
 /**
  * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.
  */
@@ -31,12 +35,17 @@ export class KolDetails implements DetailsAPI {
 		return (
 			<Host>
 				<details
+					class={{
+						disabled: this.state._disabled === true,
+					}}
 					ref={(el) => {
 						this.detailsElement = el as HTMLDetailsElement;
+						el?.removeEventListener('toggle', preventDefault);
+						el?.addEventListener('toggle', preventDefault);
 					}}
 					onToggle={this.handleToggle}
 				>
-					<summary ref={this.catchRef}>
+					<summary aria-disabled={this.state._disabled ? 'true' : undefined} tabIndex={this.state._disabled ? -1 : undefined} ref={this.catchRef}>
 						<kol-icon _label="" _icons="codicon codicon-chevron-right" class={`icon ${this.state._open ? 'is-open' : ''}`} />
 						<span>{this.state._label}</span>
 					</summary>
@@ -50,6 +59,11 @@ export class KolDetails implements DetailsAPI {
 		);
 	}
 
+	/**
+	 * Makes the element not focusable and ignore all events.
+	 */
+	@Prop() public _disabled?: boolean = false;
+
 	/**
 	 * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
 	 */
@@ -71,6 +85,11 @@ export class KolDetails implements DetailsAPI {
 		_on: {},
 	};
 
+	@Watch('_disabled')
+	public validateDisabled(value?: DisabledPropType): void {
+		validateDisabled(this, value);
+	}
+
 	@Watch('_label')
 	public validateLabel(value?: LabelPropType): void {
 		validateLabel(this, value, {
@@ -91,11 +110,21 @@ export class KolDetails implements DetailsAPI {
 	}
 
 	public componentWillLoad(): void {
+		this.validateDisabled(this._disabled);
 		this.validateLabel(this._label);
 		this.validateOn(this._on);
 		this.validateOpen(this._open);
 	}
 
+	public componentDidRender() {
+		if (this.host && this.host.shadowRoot) {
+			Array.from(this.host.shadowRoot.querySelectorAll('[aria-disabled="true"]')).forEach((el) => {
+				el.removeEventListener('click', preventDefault);
+				el.addEventListener('click', preventDefault);
+			});
+		}
+	}
+
 	public componentDidLoad() {
 		if (this.detailsElement && this.summaryElement && this.contentElement) {
 			const animationController = new DetailsAnimationController(this.detailsElement, this.summaryElement, this.contentElement);
@@ -108,6 +137,10 @@ export class KolDetails implements DetailsAPI {
 	private toggleTimeout?: ReturnType<typeof setTimeout>;
 
 	private handleToggle = (event: Event) => {
+		if (this.state._disabled === true) {
+			preventDefault(event);
+			return;
+		}
 		clearTimeout(this.toggleTimeout);
 		this.toggleTimeout = setTimeout(() => {
 			const open = Boolean(this.detailsElement?.open);

diff --git a/packages/components/src/components/details/readme.md b/packages/components/src/components/details/readme.md
@@ -90,11 +90,12 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 
 ## Properties
 
-| Property              | Attribute | Description                                                                                                        | Type                                                                                  | Default     |
-| --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- |
-| `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                              | `undefined` |
-| `_on`                 | --        | Defines the callback functions for details.                                                                        | `undefined \| { onToggle?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
-| `_open`               | `_open`   | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean \| undefined`                                                                | `false`     |
+| Property              | Attribute   | Description                                                                                                        | Type                                                                                  | Default     |
+| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------- |
+| `_disabled`           | `_disabled` | Makes the element not focusable and ignore all events.                                                             | `boolean \| undefined`                                                                | `false`     |
+| `_label` _(required)_ | `_label`    | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                              | `undefined` |
+| `_on`                 | --          | Defines the callback functions for details.                                                                        | `undefined \| { onToggle?: EventValueOrEventCallback<Event, boolean> \| undefined; }` | `undefined` |
+| `_open`               | `_open`     | If set (to true) opens/expands the element, closes if not set (or set to false).                                   | `boolean \| undefined`                                                                | `false`     |
 
 ## Slots
 

diff --git a/packages/components/src/components/link-button/component.tsx b/packages/components/src/components/link-button/component.tsx
@@ -43,6 +43,7 @@ export class KolLinkButton implements LinkButtonProps {
 					}}
 					_accessKey={this._accessKey}
 					_ariaCurrentValue={this._ariaCurrentValue}
+					_disabled={this._disabled}
 					_download={this._download}
 					_hideLabel={this._hideLabel}
 					_href={this._href}
@@ -75,6 +76,11 @@ export class KolLinkButton implements LinkButtonProps {
 	 */
 	@Prop() public _customClass?: CustomClassPropType;
 
+	/**
+	 * Makes the element not focusable and ignore all events.
+	 */
+	@Prop() public _disabled?: boolean = false;
+
 	/**
 	 * Tells the browser that the link contains a file. Optionally sets the filename.
 	 */