From 0efb37bc522c3baba03d6b987ed5b2e99408c017 Mon Sep 17 00:00:00 2001 From: Martin Oppitz Date: Fri, 27 Oct 2023 05:55:50 +0200 Subject: [PATCH 1/6] fix: vscode format setting --- .vscode/settings.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index c41fe646b4..074b0b5ceb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { - "editor.formatOnSave": false, + "editor.formatOnSave": true, "editor.renderWhitespace": "all", // Configure glob patterns for excluding files and folders. // For example, the files explorer decides which files and folders to show From a007b7dded3c2f72d65d2cbecb02845407e90d23 Mon Sep 17 00:00:00 2001 From: Martin Oppitz Date: Fri, 27 Oct 2023 05:57:19 +0200 Subject: [PATCH 2/6] chore: add access key for input and link too --- packages/components/src/components.d.ts | 32 +++++++++++++++++++ .../src/components/button/component.tsx | 3 +- .../components/input-checkbox/component.tsx | 17 +++++++++- .../src/components/input-color/component.tsx | 17 +++++++++- .../src/components/input-date/component.tsx | 17 +++++++++- .../src/components/input-email/component.tsx | 17 +++++++++- .../src/components/input-file/component.tsx | 17 +++++++++- .../src/components/input-number/component.tsx | 17 +++++++++- .../components/input-password/component.tsx | 17 +++++++++- .../src/components/input-radio/component.tsx | 12 ++++++- .../src/components/input-range/component.tsx | 17 +++++++++- .../src/components/input-text/component.tsx | 17 +++++++++- .../src/components/input/component.tsx | 7 ++++ .../components/src/components/input/types.ts | 4 ++- .../src/components/link-button/component.tsx | 7 ++++ .../src/components/link/component.tsx | 21 +++++++++++- .../components/src/components/link/shadow.tsx | 7 ++++ .../components/src/components/link/types.ts | 4 ++- .../src/components/select/component.tsx | 17 +++++++++- .../span/InternalUnderlinedAccessKey.tsx | 4 +-- .../src/components/span/component.tsx | 1 - .../src/components/textarea/component.tsx | 17 +++++++++- .../src/components/tooltip/component.tsx | 3 +- .../src/components/tooltip/test/html.mock.ts | 1 - .../src/components/tooltip/types.ts | 4 +-- .../input-checkbox/partials/cases.tsx | 1 + .../components/input-color/partials/cases.tsx | 4 +-- .../components/input-date/partials/cases.tsx | 2 +- .../components/input-email/partials/cases.tsx | 1 + .../components/input-file/partials/cases.tsx | 2 +- .../input-number/partials/cases.tsx | 2 +- .../input-password/partials/cases.tsx | 1 + .../components/input-radio/partials/cases.tsx | 1 + .../components/input-range/partials/cases.tsx | 2 +- .../components/input-text/partials/cases.tsx | 2 +- .../react/src/components/link/basic.tsx | 4 +-- .../src/components/select/partials/cases.tsx | 1 + .../components/textarea/partials/cases.tsx | 4 +-- 38 files changed, 288 insertions(+), 36 deletions(-) diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index bec1fa5f7f..a283a61eb4 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -609,6 +609,10 @@ export namespace Components { interface KolIndentedText { } interface KolInput { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Defines whether the screen-readers should read out the notification. * @TODO : Change type back to `AlertPropType` after Stencil#4663 has been resolved. @@ -1728,6 +1732,10 @@ export namespace Components { "_labeled"?: boolean; } interface KolLink { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ @@ -1779,6 +1787,10 @@ export namespace Components { "_tooltipAlign"?: TooltipAlignPropType; } interface KolLinkButton { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ @@ -1856,6 +1868,10 @@ export namespace Components { "_orientation"?: Orientation; } interface KolLinkWc { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ @@ -3386,6 +3402,10 @@ declare namespace LocalJSX { interface KolIndentedText { } interface KolInput { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Defines whether the screen-readers should read out the notification. * @TODO : Change type back to `AlertPropType` after Stencil#4663 has been resolved. @@ -4505,6 +4525,10 @@ declare namespace LocalJSX { "_labeled"?: boolean; } interface KolLink { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ @@ -4556,6 +4580,10 @@ declare namespace LocalJSX { "_tooltipAlign"?: TooltipAlignPropType; } interface KolLinkButton { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Defines the custom class attribute if _variant="custom" is set. */ @@ -4633,6 +4661,10 @@ declare namespace LocalJSX { "_orientation"?: Orientation; } interface KolLinkWc { + /** + * Defines the elements access key. + */ + "_accessKey"?: AccessKeyPropType; /** * Tells the browser that the link contains a file. Optionally sets the filename. */ diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx index 4f06a64ab5..6a42f1645b 100644 --- a/packages/components/src/components/button/component.tsx +++ b/packages/components/src/components/button/component.tsx @@ -100,10 +100,10 @@ export class KolButtonWc implements API { > @@ -229,7 +229,6 @@ export class KolButtonWc implements API { _on: {}, _type: 'button', // ⚠ required _variant: 'normal', // ⚠ required - _accessKey: '', }; public constructor() { diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx index c982a77cbc..ea6ae7abbe 100644 --- a/packages/components/src/components/input-checkbox/component.tsx +++ b/packages/components/src/components/input-checkbox/component.tsx @@ -17,6 +17,7 @@ import { propagateFocus, showExpertSlot } from '../../utils/reuse'; import { getRenderStates } from '../input/controller'; import { InputCheckboxController } from './controller'; import { API, InputCheckboxIconsProp, InputCheckboxVariant, States } from './types'; +import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey'; /** * @slot expert - Die Beschriftung der Checkbox. @@ -53,6 +54,7 @@ export class KolInputCheckbox implements API { data-role={this.state._variant === 'button' ? 'button' : undefined} onKeyPress={this.state._variant === 'button' ? this.onChange : undefined} tabIndex={this.state._variant === 'button' ? 0 : undefined} + _accessKey={this.state._accessKey} _alert={this.state._alert} _disabled={this.state._disabled} _error={this.state._error} @@ -65,7 +67,20 @@ export class KolInputCheckbox implements API { _tooltipAlign={this._tooltipAlign} _touched={this.state._touched} > - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
this.ref?.focus()} > - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
- {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
this.ref?.focus()} > - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
this.ref?.focus()} > - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
- {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
this.ref?.focus()} > - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
{/* INFO: label comes with any html tag or as plain text! */} - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this._accessKey === 'string' ? ( + + ) : ( + this._label + )} + {this.state._options.map((option, index) => { @@ -72,6 +81,7 @@ export class KolInputRadio implements API { - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
this.ref?.focus()} > - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +
; -} & PropAlert & +} & PropAccessKey & + PropAlert & PropDisabled & PropHasCounter & PropHideError & diff --git a/packages/components/src/components/link-button/component.tsx b/packages/components/src/components/link-button/component.tsx index ef6680f3bf..bc130c7c32 100644 --- a/packages/components/src/components/link-button/component.tsx +++ b/packages/components/src/components/link-button/component.tsx @@ -14,6 +14,7 @@ import { LinkTargetPropType } from '../../types/props/link-target'; import { TooltipAlignPropType } from '../../types/props/tooltip-align'; import { propagateFocus } from '../../utils/reuse'; import { Props } from './types'; +import { AccessKeyPropType } from '../../types/props/access-key'; @Component({ tag: 'kol-link-button', @@ -41,6 +42,7 @@ export class KolLinkButton implements Props { [this._variant as string]: this._variant !== 'custom', [this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0, }} + _accessKey={this._accessKey} _download={this._download} _hideLabel={this._hideLabel} _href={this._href} @@ -60,6 +62,11 @@ export class KolLinkButton implements Props { ); } + /** + * Defines the elements access key. + */ + @Prop() public _accessKey?: AccessKeyPropType; + /** * Defines the custom class attribute if _variant="custom" is set. */ diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx index 1fddfa298b..998cbbc55a 100644 --- a/packages/components/src/components/link/component.tsx +++ b/packages/components/src/components/link/component.tsx @@ -19,6 +19,7 @@ import { validateTabIndex } from '../../utils/validators/tab-index'; import { States as LinkStates } from '../link/types'; import { API } from './types'; import { validateHideLabel } from '../../types/props/hide-label'; +import { AccessKeyPropType, validateAccessKey } from '../../types/props/access-key'; /** * @internal @@ -88,6 +89,7 @@ export class KolLinkWc implements API { - + {isExternal && } @@ -113,6 +120,7 @@ export class KolLinkWc implements API { */ aria-hidden="true" hidden={hasExpertSlot || !this.state._hideLabel} + _accessKey={this.state._accessKey} _align={this.state._tooltipAlign} _label={this.state._label || this.state._href} > @@ -120,6 +128,11 @@ export class KolLinkWc implements API { ); } + /** + * Defines the elements access key. + */ + @Prop() public _accessKey?: AccessKeyPropType; + /** * Tells the browser that the link contains a file. Optionally sets the filename. */ @@ -187,6 +200,11 @@ export class KolLinkWc implements API { _icons: {}, // ⚠ required }; + @Watch('_accessKey') + public validateAccessKey(value?: AccessKeyPropType): void { + validateAccessKey(this, value); + } + private validateAriaCurrent(value?: AriaCurrentPropType): void { validateAriaCurrent(this, value); } @@ -252,6 +270,7 @@ export class KolLinkWc implements API { } public componentWillLoad(): void { + this.validateAccessKey(this._accessKey); this.validateDownload(this._download); this.validateHideLabel(this._hideLabel); this.validateHref(this._href); diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx index 7501839bea..02e962906a 100644 --- a/packages/components/src/components/link/shadow.tsx +++ b/packages/components/src/components/link/shadow.tsx @@ -12,6 +12,7 @@ import { LinkTargetPropType } from '../../types/props/link-target'; import { TooltipAlignPropType } from '../../types/props/tooltip-align'; import { propagateFocus } from '../../utils/reuse'; import { LinkProps } from './types'; +import { AccessKeyPropType } from '../../types/props/access-key'; @Component({ tag: 'kol-link', @@ -34,6 +35,7 @@ export class KolLink implements LinkProps { this.ref?.focus()} > - {hasExpertSlot ? : this.state._label} + + {hasExpertSlot ? ( + + ) : typeof this.state._accessKey === 'string' ? ( + + + + {this.state._accessKey} + + + ) : ( + {this.state._label} + )} +