refactor: removed aria attributes which have a 1:1 mapping (#4476)

nmerget · github-actions[bot] · web-flow · commit 327eebe7191a · 2025-07-08T16:10:02.000+02:00
* refactor: removed aria attributes which has a 1:1 mapping * chore: update test * chore: update test * auto update snapshots (#4479) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * auto update snapshots (#4485) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
diff --git a/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png b/__snapshots__/button/patternhub/button-properties-should-match-screenshot.png
diff --git a/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png b/__snapshots__/link/patternhub/link-properties-should-match-screenshot.png
diff --git a/__snapshots__/navigation/patternhub/navigation-properties-should-match-screenshot.png b/__snapshots__/navigation/patternhub/navigation-properties-should-match-screenshot.png
diff --git a/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png b/__snapshots__/tag/patternhub/tag-properties-should-match-screenshot.png
diff --git a/docs/migration/v2.x.x-to-v3.0.0.md b/docs/migration/v2.x.x-to-v3.0.0.md
@@ -9,6 +9,45 @@ Furthermore, we added a trailing icon to the `db-button`/`DBButton` component.
 You can still use `db-icon`/`icon` in most elements/components, which results in showing the default icon.
 Most of the time this will be the leading icon, but in some cases it might be the trailing icon, depending on the component.
 
+## Aria properties in components
+
+### `db-button`/`DBButton`
+
+- **Removed**: `describedbyid` property, just use `aria-describedby`
+- **Removed**: `ariaexpanded` property, just use `aria-expanded`
+- **Removed**: `ariapressed` property, just use `aria-pressed`
+- **Removed**: `label` property, just use `aria-label`
+
+### `db-link`/`DBLink`
+
+- **Removed**: `selected` property, just use `aria-selected`
+- **Removed**: `current` property, just use `aria-current`
+- **Removed**: `label` property, just use `aria-label`
+
+### `db-navigation`/`DBNavigation`
+
+- **Removed**: `labelledBy` property, just use `aria-labelledby`
+
+### `db-radio`/`DBRadio`
+
+- **Removed**: `describedbyid` property, just use `aria-describedby`
+
+### `db-switch`/`DBSwitch`
+
+- **Removed**: `describedbyid` property, just use `aria-describedby`
+
+### `db-tab-item`/`DBTabItem`
+
+- **Removed**: `controls` property, just use `aria-controls`
+
+### `db-tab-panel`/`DBTabPanel`
+
+- **Removed**: `labelledBy` property, just use `aria-labelledby`
+
+### `db-tag`/`DBTag`
+
+- **Removed**: `disabled` property, use `disabled` on child component like `button` or `a` tag
+
 ## Automate migration via CLI
 
 We provide a CLI tool to auto migrate your source code. Use this command in your repository:
diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
@@ -25,7 +25,6 @@ export default function DBButton(props: DBButtonProps) {
 			class={cls('db-button', props.className)}
 			type={props.type || 'button'}
 			disabled={getBoolean(props.disabled, 'disabled')}
-			aria-label={props.label}
 			data-icon={props.iconLeading ?? props.icon}
 			data-hide-icon={getHideProp(
 				props.showIconLeading ?? props.showIcon
@@ -39,10 +38,7 @@ export default function DBButton(props: DBButtonProps) {
 			data-no-text={getBooleanAsString(props.noText)}
 			name={props.name}
 			form={props.form}
-			value={props.value}
-			aria-describedby={props.describedbyid}
-			aria-expanded={props.ariaexpanded}
-			aria-pressed={props.ariapressed}>
+			value={props.value}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>
diff --git a/packages/components/src/components/button/model.ts b/packages/components/src/components/button/model.ts
@@ -29,16 +29,6 @@ export const ButtonStateList = ['loading'] as const;
 export type ButtonStateType = (typeof ButtonStateList)[number];
 
 export type DBButtonDefaultProps = {
-	/**
-	 * If the button controls a grouping of other elements, the ariaexpanded state [indicates whether the controlled grouping is currently expanded or collapsed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded).
-	 */
-	ariaexpanded?: boolean;
-
-	/**
-	 * Defines the button as a toggle button. The value of [ariapressed describes the state of the button](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
-	 */
-	ariapressed?: boolean;
-
 	/**
 	 * The disabled attribute can be set to [keep a user from clicking on the button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
 	 */
@@ -49,11 +39,6 @@ export type DBButtonDefaultProps = {
 	 */
 	form?: string;
 
-	/**
-	 * The label represents the [aria-label attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) value of the button
-	 */
-	label?: string;
-
 	/**
 	 * The name attribute specifies a [name attributes value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#name) for the button.
 	 */
diff --git a/packages/components/src/components/drawer/model.ts b/packages/components/src/components/drawer/model.ts
@@ -58,12 +58,12 @@ export type DBDrawerDefaultProps = {
 	 * Set the variant modal|inside. Defaults to modal.
 	 */
 	variant?: DrawerVariantType;
-/**
- * The position attribute changes the css-position (fixed or absolute) of the drawer.
- *
- * - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.
- * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.
- */
+	/**
+	 * The position attribute changes the css-position (fixed or absolute) of the drawer.
+	 *
+	 * - `fixed` (default): Renders with `showModal()`, creating a true modal with a focus trap.
+	 * - `absolute`: Renders with `show()`, acting as a simple overlay **without** a focus trap.
+	 */
 	position?: DrawerPositionType;
 };
 
diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
@@ -26,9 +26,6 @@ export default function DBLink(props: DBLinkProps) {
 			hrefLang={props.hreflang}
 			aria-disabled={getBooleanAsString(props.disabled)}
 			tabIndex={props.disabled ? -1 : 0}
-			aria-selected={getBooleanAsString(props.selected)}
-			aria-label={props.label}
-			aria-current={props.current}
 			data-size={props.size}
 			data-hide-icon-trailing={getHideProp(props.showIcon ?? true)}
 			data-variant={props.variant}
diff --git a/packages/components/src/components/navigation/model.ts b/packages/components/src/components/navigation/model.ts
@@ -1,14 +1,8 @@
-import {
-	AriaLabelledByProps,
-	GlobalProps,
-	GlobalState
-} from '../../shared/model';
+import { GlobalProps, GlobalState } from '../../shared/model';
 
 export type DBNavigationDefaultProps = {};
 
-export type DBNavigationProps = DBNavigationDefaultProps &
-	GlobalProps &
-	AriaLabelledByProps;
+export type DBNavigationProps = DBNavigationDefaultProps & GlobalProps;
 
 export type DBNavigationDefaultState = {};
 
diff --git a/packages/components/src/components/navigation/navigation.lite.tsx b/packages/components/src/components/navigation/navigation.lite.tsx
@@ -30,7 +30,6 @@ export default function DBNavigation(props: DBNavigationProps) {
 		<nav
 			ref={_ref}
 			id={state._id}
-			aria-labelledby={props.labelledBy}
 			class={cls('db-navigation', props.className)}>
 			<menu>{props.children}</menu>
 		</nav>
diff --git a/packages/components/src/components/radio/radio.lite.tsx b/packages/components/src/components/radio/radio.lite.tsx
@@ -78,7 +78,6 @@ export default function DBRadio(props: DBRadioProps) {
 				name={props.name}
 				checked={getBoolean(props.checked, 'checked')}
 				disabled={getBoolean(props.disabled, 'disabled')}
-				aria-describedby={props.describedbyid ?? props.ariaDescribedBy}
 				value={props.value}
 				required={getBoolean(props.required, 'required')}
 				data-hide-asterisk={getHideProp(props.showRequiredAsterisk)}
diff --git a/packages/components/src/components/switch/switch.lite.tsx b/packages/components/src/components/switch/switch.lite.tsx
@@ -95,7 +95,6 @@ export default function DBSwitch(props: DBSwitchProps) {
 				checked={getBoolean(props.checked, 'checked')}
 				value={props.value}
 				disabled={getBoolean(props.disabled, 'disabled')}
-				aria-describedby={props.describedbyid ?? props.ariaDescribedBy}
 				aria-invalid={props.validation === 'invalid'}
 				data-custom-validity={props.validation}
 				name={props.name}
diff --git a/packages/components/src/components/tab-item/model.ts b/packages/components/src/components/tab-item/model.ts
@@ -1,6 +1,5 @@
 import {
 	ActiveProps,
-	AriaControlsProps,
 	ChangeEventProps,
 	ChangeEventState,
 	GlobalProps,
@@ -44,7 +43,6 @@ export type DBTabItemProps = GlobalProps &
 	ShowIconLeadingProps &
 	ShowIconTrailingProps &
 	ActiveProps &
-	AriaControlsProps &
 	ChangeEventProps<HTMLInputElement> &
 	ShowIconProps &
 	NameProps;
diff --git a/packages/components/src/components/tab-item/tab-item.lite.tsx b/packages/components/src/components/tab-item/tab-item.lite.tsx
@@ -102,7 +102,6 @@ export default function DBTabItem(props: DBTabItemProps) {
 				<input
 					disabled={getBoolean(props.disabled, 'disabled')}
 					aria-selected={state._selected}
-					aria-controls={props.controls}
 					checked={getBoolean(props.checked, 'checked')}
 					ref={_ref}
 					type="radio"
diff --git a/packages/components/src/components/tab-panel/model.ts b/packages/components/src/components/tab-panel/model.ts
@@ -1,8 +1,4 @@
-import {
-	AriaLabelledByProps,
-	GlobalProps,
-	GlobalState
-} from '../../shared/model';
+import { GlobalProps, GlobalState } from '../../shared/model';
 
 export type DBTabPanelDefaultProps = {
 	/**
@@ -11,9 +7,7 @@ export type DBTabPanelDefaultProps = {
 	content?: string;
 };
 
-export type DBTabPanelProps = DBTabPanelDefaultProps &
-	GlobalProps &
-	AriaLabelledByProps;
+export type DBTabPanelProps = DBTabPanelDefaultProps & GlobalProps;
 
 export type DBTabPanelDefaultState = {};
 
diff --git a/packages/components/src/components/tab-panel/tab-panel.lite.tsx b/packages/components/src/components/tab-panel/tab-panel.lite.tsx
@@ -26,8 +26,7 @@ export default function DBTabPanel(props: DBTabPanelProps) {
 			ref={_ref}
 			class={cls('db-tab-panel', props.className)}
 			id={props.id}
-			role="tabpanel"
-			aria-labelledby={props.labelledBy}>
+			role="tabpanel">
 			<Show when={props.content}> {props.content}</Show>
 			{props.children}
 		</section>
diff --git a/packages/components/src/components/tag/model.ts b/packages/components/src/components/tag/model.ts
@@ -5,7 +5,6 @@ import {
 	GlobalProps,
 	GlobalState,
 	IconProps,
-	InitializedState,
 	OverflowProps,
 	SemanticProps,
 	ShowIconProps
@@ -33,10 +32,6 @@ export type DBTagDefaultProps = {
 	 */
 	behavior?: TagBehaviorType | string;
 
-	/**
-	 * @deprecated Disable tag
-	 */
-	disabled?: boolean | string;
 	/**
 	 * Define the text next to the icon specified via the icon Property to get hidden.
 	 */
@@ -75,4 +70,4 @@ export type DBTagDefaultState = {
 	handleRemove: (event?: ClickEvent<HTMLButtonElement> | void) => void;
 };
 
-export type DBTagState = DBTagDefaultState & GlobalState & InitializedState;
+export type DBTagState = DBTagDefaultState & GlobalState;
diff --git a/packages/components/src/components/tag/tag.lite.tsx b/packages/components/src/components/tag/tag.lite.tsx
@@ -1,6 +1,4 @@
 import {
-	onInit,
-	onUpdate,
 	Show,
 	Slot,
 	useDefaultProps,
@@ -20,7 +18,6 @@ useDefaultProps<DBTagProps>({});
 export default function DBTag(props: DBTagProps) {
 	const _ref = useRef<HTMLDivElement | any>(null);
 	const state = useStore<DBTagState>({
-		initialized: false,
 		handleRemove: (event?: ClickEvent<HTMLButtonElement> | void) => {
 			if (!event) return;
 
@@ -39,30 +36,11 @@ export default function DBTag(props: DBTagProps) {
 		}
 	});
 
-	onInit(() => {
-		state.initialized = true;
-	});
-
-	onUpdate(() => {
-		if (state.initialized && _ref && props.disabled !== undefined) {
-			const button: HTMLButtonElement | null = _ref?.querySelector(
-				'button:not(.db-tab-remove-button)'
-			);
-			const input: HTMLInputElement | null = _ref?.querySelector('input');
-			for (const element of [button, input]) {
-				if (element) {
-					element.disabled = Boolean(props.disabled);
-				}
-			}
-		}
-	}, [state.initialized, props.disabled, _ref]);
-
 	return (
 		<div
 			ref={_ref}
 			id={props.id}
 			class={cls('db-tag', props.className)}
-			data-disabled={getBooleanAsString(props.disabled)}
 			data-semantic={props.semantic}
 			data-emphasis={props.emphasis}
 			data-icon={props.icon}
diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -19,12 +19,6 @@ export type GlobalProps = {
 	 */
 	class?: string | any;
 
-	/**
-	 * @deprecated
-	 * [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) is used to link to the elements that describe the element with the set attribute.
-	 */
-	describedbyid?: string;
-
 	/**
 	 * [ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.
 	 */
@@ -522,16 +516,6 @@ export type InitializedState = {
 	initialized: boolean;
 };
 
-export const LinkCurrentList = [
-	'time',
-	'true',
-	'false',
-	'date',
-	'page',
-	'step',
-	'location'
-] as const;
-export type LinkCurrentType = (typeof LinkCurrentList)[number];
 export const LinkTargetList = ['_self', '_blank', '_parent', '_top'] as const;
 export type LinkTargetType = (typeof LinkTargetList)[number];
 export const LinkReferrerPolicyList = [
@@ -546,10 +530,6 @@ export const LinkReferrerPolicyList = [
 ] as const;
 export type LinkReferrerPolicyType = (typeof LinkReferrerPolicyList)[number];
 export type LinkProps = {
-	/**
-	 * Sets aria attribute based on [`aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current).
-	 */
-	current?: boolean | LinkCurrentType;
 	/**
 	 * Disables the link.
 	 */
@@ -562,10 +542,6 @@ export type LinkProps = {
 	 * Hints for the human [language of the linked page or document](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
 	 */
 	hreflang?: string;
-	/**
-	 * Sets aria attribute based on [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
-	 */
-	label?: string;
 	/**
 	 * Where to open the linked URL, as the name for a [browsing context](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
 	 */
@@ -582,10 +558,6 @@ export type LinkProps = {
 	 * How much of the referrer to send when following the link.
 	 */
 	referrerpolicy?: LinkReferrerPolicyType;
-	/**
-	 * Sets aria role based on [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected).
-	 */
-	selected?: boolean | string;
 };
 
 export type TextProps = {
@@ -710,13 +682,6 @@ export type NavigationBackButtonProps = {
 	backButtonText?: string;
 };
 
-export type AriaLabelledByProps = {
-	/**
-	 * Pass `aria-labelledby` to inner element
-	 */
-	labelledBy?: string;
-};
-
 export type AriaControlsProps = {
 	/**
 	 * Pass `aria-controls` to inner element
diff --git a/packages/migration/src/migration/v2.0.0-v3.0.0.ts b/packages/migration/src/migration/v2.0.0-v3.0.0.ts
@@ -30,5 +30,25 @@ export const v200_v300: ReplaceInFileConfig[] = [
 		files: '',
 		from: /IconAfter/g,
 		to: 'IconTrailing'
+	},
+	{
+		files: '',
+		from: /labelledBy/g,
+		to: 'aria-labelledby'
+	},
+	{
+		files: '',
+		from: /describedbyid/g,
+		to: 'aria-describedby'
+	},
+	{
+		files: '',
+		from: /ariaexpanded/g,
+		to: 'aria-expanded'
+	},
+	{
+		files: '',
+		from: /ariapressed/g,
+		to: 'aria-pressed'
 	}
 ];
diff --git a/packages/migration/test/v2.0.0-v3.0.0/has-changes.txt b/packages/migration/test/v2.0.0-v3.0.0/has-changes.txt
@@ -1,4 +1,4 @@
 <span data-icon-before="xxx" data-icon-after="yyy">Test</span>
-<DBButton iconBefore="xxx" iconAfter="yyy">
+<DBButton iconBefore="xxx" iconAfter="yyy" describedbyid="xxx" ariaexpanded="true" ariapressed="true">
   Test
 </DBButton>
diff --git a/packages/migration/test/v2.0.0-v3.0.0/no-change.txt b/packages/migration/test/v2.0.0-v3.0.0/no-change.txt
diff --git a/showcases/angular-showcase/src/app/components/navigation/navigation.component.html b/showcases/angular-showcase/src/app/components/navigation/navigation.component.html
diff --git a/showcases/react-showcase/src/components/navigation/index.tsx b/showcases/react-showcase/src/components/navigation/index.tsx
diff --git a/showcases/vue-showcase/src/components/navigation/Navigation.vue b/showcases/vue-showcase/src/components/navigation/Navigation.vue
