Added ShortKey Prop to Elements with AccessKey (#6957)

public-ui · Nov 14, 2024 · 223ee80 · 223ee80
2 parents 2a5064b + 371e250
commit 223ee80
Show file tree

Hide file tree

Showing 165 changed files with 1,374 additions and 234 deletions.
diff --git a/packages/components/src/components/@deprecated/input/controller.ts b/packages/components/src/components/@deprecated/input/controller.ts
@@ -1,12 +1,14 @@
 import type { Generic } from 'adopted-style-sheets';
 
 import type {
+	AccessKeyPropType,
 	AdjustHeightPropType,
 	ButtonProps,
 	HideErrorPropType,
 	InputTypeOnDefault,
 	LabelWithExpertSlotPropType,
 	MsgPropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	TooltipAlignPropType,
@@ -18,6 +20,7 @@ import {
 	objectObjectHandler,
 	parseJson,
 	setState,
+	validateAccessKey,
 	validateAdjustHeight,
 	validateHideError,
 	validateHideLabel,
@@ -27,13 +30,15 @@ import {
 	validateTooltipAlign,
 	watchBoolean,
 	watchString,
+	validateShortKey,
 } from '../../../schema';
 
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../../utils/events';
 import { ControlledInputController } from '../../input-adapter-leanup/controller';
 
 import type { Props as AdapterProps } from '../../input-adapter-leanup/types';
 import type { Props, Watches } from './types';
+import { validateAccessAndShortKey } from '../../../schema/validators/access-and-short-key';
 
 type ValueChangeListener = (value: StencilUnknown) => void;
 
@@ -47,8 +52,9 @@ export class InputController extends ControlledInputController implements Watche
 		this.component = component;
 	}
 
-	public validateAccessKey(value?: string): void {
-		watchString(this.component, '_accessKey', value);
+	public validateAccessKey(value?: AccessKeyPropType): void {
+		validateAccessKey(this.component, value);
+		validateAccessAndShortKey(value, this.component._shortKey);
 	}
 
 	public validateAdjustHeight(value?: AdjustHeightPropType): void {
@@ -127,6 +133,11 @@ export class InputController extends ControlledInputController implements Watche
 		}
 	}
 
+	public validateShortKey(value?: ShortKeyPropType): void {
+		validateShortKey(this.component, value);
+		validateAccessAndShortKey(this.component._accessKey, value);
+	}
+
 	public validateSmartButton(value?: ButtonProps | string): void {
 		objectObjectHandler(value, () => {
 			try {
@@ -155,9 +166,11 @@ export class InputController extends ControlledInputController implements Watche
 		this.validateHint(this.component._hint);
 		this.validateId(this.component._id);
 		this.validateLabel(this.component._label);
+		this.validateShortKey(this.component._shortKey);
 		this.validateSmartButton(this.component._smartButton);
 		this.validateOn(this.component._on);
 		this.validateTabIndex(this.component._tabIndex);
+		validateAccessAndShortKey(this.component._accessKey, this.component._shortKey);
 	}
 
 	protected onBlur(event: Event): void {

diff --git a/packages/components/src/components/@deprecated/input/types.ts b/packages/components/src/components/@deprecated/input/types.ts
@@ -1,9 +1,9 @@
-import type { ButtonProps, InputTypeOnDefault, MsgPropType, PropLabelWithExpertSlot, Stringified } from '../../../schema';
+import type { AccessKeyPropType, ButtonProps, InputTypeOnDefault, MsgPropType, PropLabelWithExpertSlot, ShortKeyPropType, Stringified } from '../../../schema';
 import type { Generic } from 'adopted-style-sheets';
 
 type RequiredProps = NonNullable<unknown>;
 type OptionalProps = PropLabelWithExpertSlot & {
-	accessKey: string;
+	accessKey: AccessKeyPropType;
 	adjustHeight: boolean;
 	disabled: boolean;
 	error: string;
@@ -13,6 +13,7 @@ type OptionalProps = PropLabelWithExpertSlot & {
 	id: string;
 	msg: MsgPropType;
 	on: InputTypeOnDefault;
+	shortKey: ShortKeyPropType;
 	smartButton: Stringified<ButtonProps>;
 	syncValueBySelector: string;
 	tabIndex: number;

diff --git a/packages/components/src/components/button-link/shadow.tsx b/packages/components/src/components/button-link/shadow.tsx
@@ -10,6 +10,7 @@ import type {
 	IdPropType,
 	LabelWithExpertSlotPropType,
 	NamePropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
@@ -72,6 +73,7 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 					_name={this._name}
 					_on={this._on}
 					_role="link"
+					_shortKey={this._shortKey}
 					_syncValueBySelector={this._syncValueBySelector}
 					_tabIndex={this._tabIndex}
 					_tooltipAlign={this._tooltipAlign}
@@ -154,6 +156,11 @@ export class KolButtonLink implements ButtonLinkProps, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal

diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
@@ -12,6 +12,7 @@ import type {
 	FocusableElement,
 	IconsPropType,
 	LabelWithExpertSlotPropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
@@ -37,6 +38,7 @@ import {
 	validateHideLabel,
 	validateIcons,
 	validateLabelWithExpertSlot,
+	validateShortKey,
 	validateTabIndex,
 	validateTooltipAlign,
 	watchString,
@@ -49,6 +51,7 @@ import { nonce } from '../../utils/dev.utils';
 import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
 import { KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';
+import { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key';
 
 /**
  * @internal
@@ -134,7 +137,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 				>
 					<KolSpanWcTag
 						class="button-inner"
-						_accessKey={this.state._accessKey}
+						_badgeText={this.state._accessKey || this.state._shortKey}
 						_icons={this.state._icons}
 						_hideLabel={this.state._hideLabel}
 						_label={hasExpertSlot ? '' : this.state._label}
@@ -149,7 +152,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 					 */
 					aria-hidden="true"
 					hidden={hasExpertSlot || !this.state._hideLabel}
-					_accessKey={this._accessKey}
+					_badgeText={this.state._accessKey || this.state._shortKey}
 					_align={this.state._tooltipAlign}
 					_label={typeof this.state._label === 'string' ? this.state._label : ''}
 				></KolTooltipWcTag>
@@ -236,6 +239,11 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -282,6 +290,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 	@Watch('_accessKey')
 	public validateAccessKey(value?: AccessKeyPropType): void {
 		validateAccessKey(this, value);
+		validateAccessAndShortKey(value, this._shortKey);
 	}
 
 	@Watch('_ariaControls')
@@ -351,6 +360,12 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 		validateAlternativeButtonLinkRole(this, value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		validateShortKey(this, value);
+		validateAccessAndShortKey(this._accessKey, value);
+	}
+
 	@Watch('_syncValueBySelector')
 	public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
 		this.controller.validateSyncValueBySelector(value);
@@ -397,11 +412,13 @@ export class KolButtonWc implements ButtonAPI, FocusableElement {
 		this.validateName(this._name);
 		this.validateOn(this._on);
 		this.validateRole(this._role);
+		this.validateShortKey(this._shortKey);
 		this.validateSyncValueBySelector(this._syncValueBySelector);
 		this.validateTabIndex(this._tabIndex);
 		this.validateTooltipAlign(this._tooltipAlign);
 		this.validateType(this._type);
 		this.validateValue(this._value);
 		this.validateVariant(this._variant);
+		validateAccessAndShortKey(this._accessKey, this._shortKey);
 	}
 }
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
@@ -10,6 +10,7 @@ import type {
 	FocusableElement,
 	IconsPropType,
 	LabelWithExpertSlotPropType,
+	ShortKeyPropType,
 	StencilUnknown,
 	Stringified,
 	SyncValueBySelectorPropType,
@@ -78,6 +79,7 @@ export class KolButton implements ButtonProps, FocusableElement {
 					_name={this._name}
 					_on={this._on}
 					_role={this._role}
+					_shortKey={this._shortKey}
 					_syncValueBySelector={this._syncValueBySelector}
 					_tabIndex={this._tabIndex}
 					_tooltipAlign={this._tooltipAlign}
@@ -163,6 +165,11 @@ export class KolButton implements ButtonProps, FocusableElement {
 	 */
 	@Prop() public _role?: AlternativeButtonLinkRolePropType;
 
+	/**
+	 * Defines the elements short key.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal

diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
@@ -8,21 +8,22 @@ import type {
 	LabelWithExpertSlotPropType,
 	MsgPropType,
 	NamePropType,
+	ShortKeyPropType,
 	Stringified,
 	SuggestionsPropType,
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 	W3CInputValue,
 } from '../../schema';
-import { showExpertSlot } from '../../schema';
+import { buildBadgeTextString, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { ComboboxController } from './controller';
 import { KolIconTag, KolInputTag } from '../../core/component-names';
-import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
+import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
 import { getRenderStates } from '../input/controller';
 import { translate } from '../../i18n';
 import clsx from 'clsx';
@@ -166,6 +167,7 @@ export class KolCombobox implements ComboboxAPI {
 						_label={this.state._label}
 						_msg={this.state._msg}
 						_required={this.state._required}
+						_shortKey={this.state._shortKey}
 						_tooltipAlign={this._tooltipAlign}
 						_touched={this.state._touched}
 						onClick={() => this.refInput?.focus()}
@@ -174,11 +176,11 @@ export class KolCombobox implements ComboboxAPI {
 						<span slot="label">
 							{hasExpertSlot ? (
 								<slot name="expert"></slot>
-							) : typeof this.state._accessKey === 'string' ? (
+							) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 								<>
-									<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}
+									<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 									<span class="access-key-hint" aria-hidden="true">
-										{this.state._accessKey}
+										{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}
 									</span>
 								</>
 							) : (
@@ -445,6 +447,11 @@ export class KolCombobox implements ComboboxAPI {
 	 */
 	@Prop() public _required?: boolean = false;
 
+	/**
+	 * Adds a visual short key hint to the component.
+	 */
+	@Prop() public _shortKey?: ShortKeyPropType;
+
 	/**
 	 * Selector for synchronizing the value with another input element.
 	 * @internal
@@ -560,6 +567,11 @@ export class KolCombobox implements ComboboxAPI {
 		this.controller.validateOn(value);
 	}
 
+	@Watch('_shortKey')
+	public validateShortKey(value?: ShortKeyPropType): void {
+		this.controller.validateShortKey(value);
+	}
+
 	@Watch('_suggestions')
 	public validateSuggestions(value?: SuggestionsPropType): void {
 		this.controller.validateSuggestions(value);

diff --git a/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -241,6 +241,31 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
 </kol-combobox>
 `;
 
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _shortKey="S" 1`] = `
+<kol-combobox class="kol-combobox">
+  <template shadowrootmode="open">
+    <div class="combobox">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _shortkey="S" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          Label
+          <span aria-hidden="true" class="access-key-hint">
+            S
+          </span>
+        </span>
+        <div slot="input">
+          <div class="combobox__group">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
+            <button class="combobox__icon" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-combobox>
+`;
+
 exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _touched=true 1`] = `
 <kol-combobox _touched="" class="kol-combobox">
   <template shadowrootmode="open">