fixed shortkey accessKey and shortkey check in inputs

Refs: #6251
public-ui · Oct 29, 2024 · 7ec5b86 · 7ec5b86
1 parent 4585c96
commit 7ec5b86
Show file tree

Hide file tree

Showing 17 changed files with 83 additions and 58 deletions.
diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	ComboboxAPI,
 	ComboboxStates,
 	HideErrorPropType,
@@ -176,11 +177,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' ? (
 								<>
-									<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+									<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 									<span class="access-key-hint" aria-hidden="true">
-										{this.state._accessKey}
+										{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 									</span>
 								</>
 							) : (

diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	CheckedPropType,
 	HideErrorPropType,
 	IdPropType,
@@ -107,11 +108,11 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey || this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	ButtonProps,
 	FocusableElement,
 	HideErrorPropType,
@@ -100,11 +101,11 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx
@@ -1,6 +1,7 @@
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-import type {
+import {
+	buildBadgeText,
 	ButtonProps,
 	HideErrorPropType,
 	IdPropType,
@@ -154,11 +155,11 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey || this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	ButtonProps,
 	FocusableElement,
 	HideErrorPropType,
@@ -123,11 +124,11 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-file/shadow.tsx b/packages/components/src/components/input-file/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	ButtonProps,
 	FocusableElement,
 	HideErrorPropType,
@@ -97,11 +98,11 @@ export class KolInputFile implements InputFileAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-number/shadow.tsx b/packages/components/src/components/input-number/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	ButtonProps,
 	FocusableElement,
 	HideErrorPropType,
@@ -116,11 +117,11 @@ export class KolInputNumber implements InputNumberAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-password/shadow.tsx b/packages/components/src/components/input-password/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	ButtonProps,
 	FocusableElement,
 	HideErrorPropType,
@@ -124,11 +125,11 @@ export class KolInputPassword implements InputPasswordAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-radio/shadow.tsx b/packages/components/src/components/input-radio/shadow.tsx
@@ -1,4 +1,4 @@
-import type {
+import {
 	FocusableElement,
 	HideErrorPropType,
 	IdPropType,
@@ -15,6 +15,7 @@ import type {
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 	ShortKeyPropType,
+	buildBadgeText,
 } from '../../schema';
 import { showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
@@ -94,8 +95,8 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
 							<span slot="label">
 								{hasExpertSlot ? (
 									<slot name="expert"></slot>
-								) : typeof this._accessKey === 'string' ? (
-									<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey ?? ''} label={this._label} />
+								) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
+									<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this._label} />
 								) : (
 									this._label
 								)}

diff --git a/packages/components/src/components/input-range/shadow.tsx b/packages/components/src/components/input-range/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	FocusableElement,
 	HideErrorPropType,
 	IdPropType,
@@ -147,11 +148,11 @@ export class KolInputRange implements InputRangeAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input-text/shadow.tsx b/packages/components/src/components/input-text/shadow.tsx
@@ -1,6 +1,7 @@
-import type {
+import {
 	AccessKeyPropType,
 	AlertPropType,
+	buildBadgeText,
 	ButtonProps,
 	FocusableElement,
 	HideErrorPropType,
@@ -136,11 +137,11 @@ export class KolInputText implements InputTextAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/input/component.tsx b/packages/components/src/components/input/component.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import { handleSlotContent, type MsgPropType, type ShortKeyPropType, showExpertSlot } from '../../schema';
+import { buildBadgeText, handleSlotContent, type MsgPropType, type ShortKeyPropType, showExpertSlot } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';
 import clsx from 'clsx';
@@ -114,7 +114,7 @@ export class KolInputWc implements Props {
 						 */
 						aria-hidden="true"
 						class="input-tooltip"
-						_badgeText={this._accessKey || this._shortKey}
+						_badgeText={buildBadgeText(this._accessKey, this._shortKey)}
 						_align={this._tooltipAlign}
 						_id={this._hideLabel ? `${this._id}-label` : undefined}
 						_label={this._label}

diff --git a/packages/components/src/components/select/shadow.tsx b/packages/components/src/components/select/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	FocusableElement,
 	HideErrorPropType,
 	IdPropType,
@@ -130,11 +131,11 @@ export class KolSelect implements SelectAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey, this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -1,4 +1,5 @@
-import type {
+import {
+	buildBadgeText,
 	HideErrorPropType,
 	IdPropType,
 	InputTypeOnDefault,
@@ -201,11 +202,11 @@ export class KolSingleSelect implements SingleSelectAPI {
 						<span slot="label">
 							{hasExpertSlot ? (
 								<slot name="expert"></slot>
-							) : typeof this.state._accessKey === 'string' ? (
+							) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 								<>
-									<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+									<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey || this.state._shortKey)} label={this.state._label} />{' '}
 									<span class="access-key-hint" aria-hidden="true">
-										{this.state._accessKey}
+										{buildBadgeText(this.state._accessKey || this.state._shortKey)}
 									</span>
 								</>
 							) : (

diff --git a/packages/components/src/components/textarea/shadow.tsx b/packages/components/src/components/textarea/shadow.tsx
@@ -1,5 +1,6 @@
-import type {
+import {
 	AdjustHeightPropType,
+	buildBadgeText,
 	CSSResize,
 	FocusableElement,
 	HasCounterPropType,
@@ -113,11 +114,11 @@ export class KolTextarea implements TextareaAPI, FocusableElement {
 					<span slot="label">
 						{hasExpertSlot ? (
 							<slot name="expert"></slot>
-						) : typeof this.state._accessKey === 'string' ? (
+						) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
 							<>
-								<InternalUnderlinedBadgeText badgeText={this.state._accessKey ?? this.state._shortKey} label={this.state._label} />{' '}
+								<InternalUnderlinedBadgeText badgeText={buildBadgeText(this.state._accessKey || this.state._shortKey)} label={this.state._label} />{' '}
 								<span class="access-key-hint" aria-hidden="true">
-									{this.state._accessKey}
+									{buildBadgeText(this.state._accessKey || this.state._shortKey)}
 								</span>
 							</>
 						) : (

diff --git a/packages/components/src/schema/utils/reuse.ts b/packages/components/src/schema/utils/reuse.ts
@@ -26,3 +26,14 @@ export const handleSlotContent = (hostRef: HTMLElement, slotRef: HTMLElement, sl
  * @returns  True if the label is an empty string
  */
 export const showExpertSlot = (label: unknown) => label === '';
+
+/**
+ * This function builds the BadgeText. It chooses access key over shortkey or empty string, if both are empty
+ * @param accessKey
+ * @param shortKey
+ * @returns returns badgeText as string
+ */
+export const buildBadgeText = (accessKey?: string, shortKey?: string) => {
+	const badgeText = [accessKey, shortKey].filter((f) => f);
+	return badgeText[0] || '';
+};
diff --git a/packages/samples/react/src/components/input-number/partials/cases.tsx b/packages/samples/react/src/components/input-number/partials/cases.tsx
@@ -35,7 +35,7 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 			<KolInputNumber {...props} _readOnly _label="Number input (Readonly)" />
 			<KolInputNumber {...props} _disabled _label="Number input (Disabled)" />
 			<KolInputNumber {...props} _label="With access key" _accessKey="c" />
-			<KolInputNumber {...props} _label="With short key" _shortKey="c" />
+			<KolInputNumber {...props} _label="With short key" _shortKey="s" />
 		</div>
 	);
 });