Skip to content

Commit ef05e09

Browse files
deleoniodeleonio
authored
Remove access-key and short-key from kol-input-radio (#7839)
2 parents 27d8a85 + 1b584ac commit ef05e09

File tree

7 files changed

+27
-78
lines changed

7 files changed

+27
-78
lines changed

‎packages/components/src/components/input-radio/shadow.tsx‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,14 @@ import type {
1414
Stringified,
1515
SyncValueBySelectorPropType,
1616
TooltipAlignPropType,
17-
ShortKeyPropType,
1817
} from '../../schema';
19-
import { buildBadgeTextString, showExpertSlot } from '../../schema';
18+
import { showExpertSlot } from '../../schema';
2019
import type { JSX } from '@stencil/core';
2120
import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
2221

2322
import { nonce } from '../../utils/dev.utils';
2423
import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
2524
import { getRenderStates } from '../input/controller';
26-
import { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';
2725
import { InputRadioController } from './controller';
2826
import { propagateSubmitEventToForm } from '../form/controller';
2927
import { KolInputTag } from '../../core/component-names';
@@ -91,15 +89,7 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
9189
{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}
9290
<span>
9391
{/* INFO: label comes with any html tag or as plain text! */}
94-
<span slot="label">
95-
{hasExpertSlot ? (
96-
<slot name="expert"></slot>
97-
) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (
98-
<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this._label} />
99-
) : (
100-
this._label
101-
)}
102-
</span>
92+
<span slot="label">{hasExpertSlot ? <slot name="expert"></slot> : this._label}</span>
10393
</span>
10494
</legend>
10595
{this.state._options.map((option, index) => {
@@ -119,15 +109,13 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
119109
disabled: Boolean(this.state._disabled || option.disabled),
120110
}}
121111
key={customId}
122-
_accessKey={this.state._accessKey} // by radio?!
123112
_disabled={this.state._disabled || option.disabled}
124113
_hideLabel={this.state._hideLabel}
125114
_hint={option.hint}
126115
_id={customId}
127116
_label={option.label as string}
128117
_renderNoLabel={true}
129118
_required={this.state._required}
130-
_shortKey={this.state._shortKey}
131119
_slotName={slotName}
132120
_tooltipAlign={this._tooltipAlign}
133121
_touched={this.state._touched}
@@ -136,7 +124,6 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
136124
<input
137125
ref={this.state._value === option.value ? this.catchRef : undefined}
138126
title=""
139-
accessKey={this.state._accessKey} // by radio?!
140127
aria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}
141128
aria-label={this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined}
142129
type="radio"
@@ -188,11 +175,6 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
188175

189176
private readonly controller: InputRadioController;
190177

191-
/**
192-
* Defines which key combination can be used to trigger or focus the interactive element of the component.
193-
*/
194-
@Prop() public _accessKey?: string;
195-
196178
/**
197179
* Defines whether the screen-readers should read out the notification.
198180
* @deprecated Will be removed in v3. Use automatic behaviour instead.
@@ -270,11 +252,6 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
270252
*/
271253
@Prop() public _required?: boolean = false;
272254

273-
/**
274-
* Adds a visual short key hint to the component.
275-
*/
276-
@Prop() public _shortKey?: ShortKeyPropType;
277-
278255
/**
279256
* Selector for synchronizing the value with another input element.
280257
* @internal
@@ -324,10 +301,6 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
324301
return this.state._alert;
325302
}
326303

327-
@Watch('_accessKey')
328-
public validateAccessKey(value?: string): void {
329-
this.controller.validateAccessKey(value);
330-
}
331304
@Watch('_tooltipAlign')
332305
public validateTooltipAlign(value?: TooltipAlignPropType): void {
333306
this.controller.validateTooltipAlign(value);
@@ -402,11 +375,6 @@ export class KolInputRadio implements InputRadioAPI, FocusableElement {
402375
this.controller.validateRequired(value);
403376
}
404377

405-
@Watch('_shortKey')
406-
public validateShortKey(value?: ShortKeyPropType): void {
407-
this.controller.validateShortKey(value);
408-
}
409-
410378
@Watch('_syncValueBySelector')
411379
public validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {
412380
this.controller.validateSyncValueBySelector(value);

‎packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _accessKey="V" 1`] = `
4-
<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
4+
<kol-input-radio _accesskey="V" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
55
<template shadowrootmode="open">
66
<fieldset class="fieldset vertical">
77
<legend class="block leading-normal mb-1 w-full">
@@ -11,9 +11,9 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
1111
</span>
1212
</span>
1313
</legend>
14-
<kol-input _accesskey="V" _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
14+
<kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
1515
<div class="radio-input-wrapper" slot="radio-0">
16-
<input accesskey="V" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
16+
<input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
1717
<label class="radio-label" htmlfor="id-nonce-0">
1818
<span>
1919
<span class="radio-label-span-inner">
@@ -23,9 +23,9 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
2323
</label>
2424
</div>
2525
</kol-input>
26-
<kol-input _accesskey="V" _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
26+
<kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
2727
<div class="radio-input-wrapper" slot="radio-1">
28-
<input accesskey="V" id="id-nonce-1" name="field" type="radio" value="-1">
28+
<input id="id-nonce-1" name="field" type="radio" value="-1">
2929
<label class="radio-label" htmlfor="id-nonce-1">
3030
<span>
3131
<span class="radio-label-span-inner">
@@ -35,9 +35,9 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
3535
</label>
3636
</div>
3737
</kol-input>
38-
<kol-input _accesskey="V" _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
38+
<kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
3939
<div class="radio-input-wrapper" slot="radio-2">
40-
<input accesskey="V" id="id-nonce-2" name="field" type="radio" value="-2">
40+
<input id="id-nonce-2" name="field" type="radio" value="-2">
4141
<label class="radio-label" htmlfor="id-nonce-2">
4242
<span>
4343
<span class="radio-label-span-inner">
@@ -472,7 +472,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
472472
`;
473473

474474
exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _accessKey="V" 1`] = `
475-
<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
475+
<kol-input-radio _accesskey="V" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
476476
<template shadowrootmode="open">
477477
<fieldset class="fieldset horizontal">
478478
<legend class="block leading-normal mb-1 w-full">
@@ -482,9 +482,9 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
482482
</span>
483483
</span>
484484
</legend>
485-
<kol-input _accesskey="V" _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
485+
<kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
486486
<div class="radio-input-wrapper" slot="radio-0">
487-
<input accesskey="V" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
487+
<input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
488488
<label class="radio-label" htmlfor="id-nonce-0">
489489
<span>
490490
<span class="radio-label-span-inner">
@@ -494,9 +494,9 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
494494
</label>
495495
</div>
496496
</kol-input>
497-
<kol-input _accesskey="V" _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
497+
<kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
498498
<div class="radio-input-wrapper" slot="radio-1">
499-
<input accesskey="V" id="id-nonce-1" name="field" type="radio" value="-1">
499+
<input id="id-nonce-1" name="field" type="radio" value="-1">
500500
<label class="radio-label" htmlfor="id-nonce-1">
501501
<span>
502502
<span class="radio-label-span-inner">
@@ -506,9 +506,9 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
506506
</label>
507507
</div>
508508
</kol-input>
509-
<kol-input _accesskey="V" _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
509+
<kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
510510
<div class="radio-input-wrapper" slot="radio-2">
511-
<input accesskey="V" id="id-nonce-2" name="field" type="radio" value="-2">
511+
<input id="id-nonce-2" name="field" type="radio" value="-2">
512512
<label class="radio-label" htmlfor="id-nonce-2">
513513
<span>
514514
<span class="radio-label-span-inner">
@@ -995,7 +995,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
995995
`;
996996

997997
exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _shortKey="S" 1`] = `
998-
<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
998+
<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _shortkey="S" class="kol-input-radio">
999999
<template shadowrootmode="open">
10001000
<fieldset class="fieldset horizontal">
10011001
<legend class="block leading-normal mb-1 w-full">
@@ -1005,7 +1005,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
10051005
</span>
10061006
</span>
10071007
</legend>
1008-
<kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _shortkey="S" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
1008+
<kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
10091009
<div class="radio-input-wrapper" slot="radio-0">
10101010
<input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
10111011
<label class="radio-label" htmlfor="id-nonce-0">
@@ -1017,7 +1017,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
10171017
</label>
10181018
</div>
10191019
</kol-input>
1020-
<kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _shortkey="S" _slotname="radio-1" _tooltipalign="top" class="radio">
1020+
<kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
10211021
<div class="radio-input-wrapper" slot="radio-1">
10221022
<input id="id-nonce-1" name="field" type="radio" value="-1">
10231023
<label class="radio-label" htmlfor="id-nonce-1">
@@ -1029,7 +1029,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
10291029
</label>
10301030
</div>
10311031
</kol-input>
1032-
<kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _shortkey="S" _slotname="radio-2" _tooltipalign="top" class="radio">
1032+
<kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
10331033
<div class="radio-input-wrapper" slot="radio-2">
10341034
<input id="id-nonce-2" name="field" type="radio" value="-2">
10351035
<label class="radio-label" htmlfor="id-nonce-2">
@@ -1203,7 +1203,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
12031203
`;
12041204

12051205
exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _shortKey="S" 1`] = `
1206-
<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
1206+
<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _shortkey="S" class="kol-input-radio">
12071207
<template shadowrootmode="open">
12081208
<fieldset class="fieldset vertical">
12091209
<legend class="block leading-normal mb-1 w-full">
@@ -1213,7 +1213,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
12131213
</span>
12141214
</span>
12151215
</legend>
1216-
<kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _shortkey="S" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
1216+
<kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
12171217
<div class="radio-input-wrapper" slot="radio-0">
12181218
<input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
12191219
<label class="radio-label" htmlfor="id-nonce-0">
@@ -1225,7 +1225,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
12251225
</label>
12261226
</div>
12271227
</kol-input>
1228-
<kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _shortkey="S" _slotname="radio-1" _tooltipalign="top" class="radio">
1228+
<kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
12291229
<div class="radio-input-wrapper" slot="radio-1">
12301230
<input id="id-nonce-1" name="field" type="radio" value="-1">
12311231
<label class="radio-label" htmlfor="id-nonce-1">
@@ -1237,7 +1237,7 @@ exports[`kol-input-radio should render with _label="Label" _name="field" _placeh
12371237
</label>
12381238
</div>
12391239
</kol-input>
1240-
<kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _shortkey="S" _slotname="radio-2" _tooltipalign="top" class="radio">
1240+
<kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
12411241
<div class="radio-input-wrapper" slot="radio-2">
12421242
<input id="id-nonce-2" name="field" type="radio" value="-2">
12431243
<label class="radio-label" htmlfor="id-nonce-2">

‎packages/components/src/schema/components/input-radio.ts‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { Generic } from 'adopted-style-sheets';
22
import type {
33
MsgPropType,
4-
PropAccessKey,
54
PropDisabled,
65
PropHideError,
76
PropHideLabel,
@@ -11,12 +10,11 @@ import type {
1110
PropName,
1211
PropRadioOptions,
1312
PropRequired,
14-
PropShortKey,
1513
PropSyncValueBySelector,
1614
PropTooltipAlign,
1715
PropTouched,
1816
} from '../props';
19-
import type { InputTypeOnDefault, RadioOption, Orientation, StencilUnknown, Stringified } from '../types';
17+
import type { InputTypeOnDefault, Orientation, RadioOption, StencilUnknown, Stringified } from '../types';
2018

2119
type RequiredProps = PropLabelWithExpertSlot;
2220
type OptionalProps = {
@@ -31,14 +29,12 @@ type OptionalProps = {
3129
orientation: Orientation;
3230
tabIndex: number;
3331
value: StencilUnknown;
34-
} & PropAccessKey &
35-
PropDisabled &
32+
} & PropDisabled &
3633
PropHideError &
3734
PropHideLabel &
3835
PropName &
3936
PropRadioOptions & // PropRadioOptions becomes required with 2.0
4037
PropRequired &
41-
PropShortKey &
4238
PropSyncValueBySelector &
4339
PropTouched &
4440
PropTooltipAlign;
@@ -55,13 +51,11 @@ type OptionalStates = {
5551
on: InputTypeOnDefault;
5652
tabIndex: number;
5753
value: StencilUnknown;
58-
} & PropAccessKey &
59-
PropDisabled &
54+
} & PropDisabled &
6055
PropHideLabel &
6156
PropMsg &
6257
PropName &
6358
PropRequired &
64-
PropShortKey &
6559
PropTouched;
6660

6761
export type InputRadioProps = Generic.Element.Members<RequiredProps, OptionalProps>;

‎packages/samples/react/src/components/input-radio/partials/cases.tsx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
2727
<KolInputRadio
2828
{...props}
2929
ref={ref}
30-
_accessKey="A"
3130
_orientation="horizontal"
3231
_required
3332
_value="Company"
@@ -68,18 +67,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
6867
_label="Salutation (horizontal with error hint and description)"
6968
_hint={HINT_MSG}
7069
/>
71-
<KolInputRadio
72-
{...props}
73-
_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
74-
_label="With access key"
75-
_accessKey="c"
76-
/>
77-
<KolInputRadio
78-
{...props}
79-
_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
80-
_label="With short key"
81-
_shortKey="s"
82-
/>
8370
</div>
8471
);
8572
});

‎packages/test-tag-name-transformer/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png‎

-37.4 KB
Loading

‎packages/themes/bwst/snapshots/theme-bwst/snapshot-for-input-radio-basic-firefox-linux.png‎

-36.8 KB
Loading

‎packages/themes/default/snapshots/theme-default/snapshot-for-input-radio-basic-firefox-linux.png‎

-37.4 KB
Loading

0 commit comments

Comments
 (0)
⚡