refactor: enforce explicit boolean comparisons (#8033)

Author: deleonio

packages/components/src/components/button/component.tsx

@@ -121,6 +121,8 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 		const hasExpertSlot = showExpertSlot(this.state._label);
 		const hasAriaDescription = Boolean(this.state._ariaDescription?.trim()?.length);
 		const badgeText = this.state._accessKey || this.state._shortKey;
+		const isDisabled = this.state._disabled === true;
+		const hideLabel = this.state._hideLabel === true;
 
 		return (
 			<Host>
@@ -131,17 +133,17 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 					aria-describedby={hasAriaDescription ? this.internalDescriptionById : undefined}
 					aria-expanded={mapBoolean2String(this.state._ariaExpanded)}
 					aria-haspopup={this._ariaHasPopup}
-					aria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}
+					aria-label={hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}
 					aria-selected={mapStringOrBoolean2String(this.state._ariaSelected)}
 					class={clsx('kol-button', {
-						'kol-button--disabled': this.state._disabled === true,
+						'kol-button--disabled': isDisabled,
 						[`kol-button--${this.state._buttonVariant as string}`]: this.state._buttonVariant !== 'custom',
 						[`kol-button--${this.state._linkVariant as string}`]: this.state._linkVariant,
-						'kol-button--hide-label': this.state._hideLabel === true,
+						'kol-button--hide-label': hideLabel,
 						[this.state._customClass as string]:
 							this.state._buttonVariant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
 					})}
-					disabled={this.state._disabled}
+					disabled={isDisabled}
 					id={this.state._id}
 					name={this.state._name}
 					onClick={this.onClick}
@@ -154,7 +156,7 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 						class="kol-button__text"
 						badgeText={badgeText}
 						icons={this.state._icons}
-						hideLabel={this.state._hideLabel}
+						hideLabel={hideLabel}
 						label={hasExpertSlot ? '' : this.state._label}
 					>
 						<slot name="expert" slot="expert"></slot>
@@ -167,7 +169,7 @@ export class KolButtonWc implements InternalButtonAPI, FocusableElement {
 					 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
 					 */
 					aria-hidden="true"
-					hidden={hasExpertSlot || !this.state._hideLabel}
+					hidden={hasExpertSlot || !hideLabel}
 					class="kol-button__tooltip"
 					_badgeText={badgeText}
 					_align={this.state._tooltipAlign}

packages/components/src/components/combobox/shadow.tsx

@@ -61,7 +61,8 @@ export class KolCombobox implements ComboboxAPI {
 	}
 
 	private toggleListbox = () => {
-		if (this.state._disabled === true) {
+		const isDisabled = this.state._disabled === true;
+		if (isDisabled) {
 			this._isOpen = false;
 		} else {
 			this.refInput?.focus();
@@ -173,6 +174,7 @@ export class KolCombobox implements ComboboxAPI {
 
 	private getInputProps(): InputStateWrapperProps {
 		const { ariaDescribedBy } = getRenderStates(this.state);
+		const isDisabled = this.state._disabled === true;
 
 		return {
 			ref: this.catchRef,
@@ -191,7 +193,7 @@ export class KolCombobox implements ComboboxAPI {
 			accessKey: this.state._accessKey,
 			autocapitalize: 'off',
 			autocorrect: 'off',
-			disabled: this.state._disabled,
+			disabled: isDisabled,
 			customSuggestions: true,
 			id: this.state._id,
 			name: this.state._name,
@@ -212,15 +214,16 @@ export class KolCombobox implements ComboboxAPI {
 	}
 
 	public render(): JSX.Element {
+		const isDisabled = this.state._disabled === true;
 		return (
 			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
 				<KolInputContainerFc state={this.state}>
 					<div class="kol-combobox__group">
 						<KolInputStateWrapperFc {...this.getInputProps()} />
-						<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled} />
+						<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={isDisabled} />
 					</div>
 
-					{this._isOpen && !(this.state._disabled === true) && (
+					{this._isOpen && !isDisabled && (
 						<CustomSuggestionsOptionsGroupFc blockSuggestionMouseOver={this.blockSuggestionMouseOver} onKeyDown={this.handleKeyDownDropdown.bind(this)}>
 							{Array.isArray(this._filteredSuggestions) &&
 								this._filteredSuggestions.length > 0 &&

packages/components/src/components/single-select/shadow.tsx

@@ -71,7 +71,8 @@ export class KolSingleSelect implements SingleSelectAPI {
 
 	private toggleListbox = (event: Event) => {
 		event?.preventDefault();
-		if (this.state._disabled) {
+		const isDisabled = this.state._disabled === true;
+		if (isDisabled) {
 			return;
 		} else {
 			if (!this._hasOpened) {
@@ -95,7 +96,8 @@ export class KolSingleSelect implements SingleSelectAPI {
 	}
 
 	private clearSelection() {
-		if (this.state._disabled) {
+		const isDisabled = this.state._disabled === true;
+		if (isDisabled) {
 			return;
 		} else {
 			const emptyValue = null;
@@ -211,6 +213,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 
 	private getInputProps(): InputStateWrapperProps {
 		const { ariaDescribedBy } = getRenderStates(this.state);
+		const isDisabled = this.state._disabled === true;
 
 		return {
 			'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined,
@@ -222,7 +225,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 			autocapitalize: 'off',
 			autocorrect: 'off',
 			class: 'kol-single-select__input',
-			disabled: this.state._disabled,
+			disabled: isDisabled,
 			name: this.state._name,
 			placeholder: this.state._placeholder,
 			ref: this.catchRef,
@@ -246,6 +249,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 	}
 
 	public render(): JSX.Element {
+		const isDisabled = this.state._disabled === true;
 		return (
 			<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>
 				<KolInputContainerFc state={this.state}>
@@ -262,14 +266,14 @@ export class KolSingleSelect implements SingleSelectAPI {
 									this.refInput?.focus();
 								}}
 								class={clsx('kol-single-select__delete', {
-									'kol-single-select__delete--disabled': this.state._disabled,
+									'kol-single-select__delete--disabled': isDisabled,
 								})}
 							/>
 						)}
 
-						<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled} />
+						<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={isDisabled} />
 					</div>
-					{this._isOpen && !(this.state._disabled === true) && (
+					{this._isOpen && !isDisabled && (
 						<CustomSuggestionsOptionsGroupFc
 							blockSuggestionMouseOver={this.blockSuggestionMouseOver}
 							onKeyDown={this.handleKeyDownDropdown.bind(this)}