fix: some issues for angular

packages/components/scripts/post-build/angular.ts

@@ -200,10 +200,6 @@ export default (tmp?: boolean) => {
 		});
 
 		const replacements: Overwrite[] = [
-			{
-				from: 'attr.disabled',
-				to: 'disabled'
-			},
 			{
 				from: 'ngOnChanges',
 				to: 'ngAfterContentChecked'

packages/components/src/components/button/button.lite.tsx

@@ -3,7 +3,11 @@ import type { DBButtonProps, DBButtonState } from './model';
 import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ClickEvent } from '../../shared/model';
 
-useMetadata({});
+useMetadata({
+	angular: {
+		nativeAttributes: ['disabled']
+	}
+});
 
 export default function DBButton(props: DBButtonProps) {
 	const ref = useRef<HTMLButtonElement>(null);

packages/components/src/components/checkbox/checkbox.lite.tsx

@@ -30,7 +30,11 @@ import {
 } from '../../utils/form-components';
 import DBInfotext from '../infotext/infotext.lite';
 
-useMetadata({});
+useMetadata({
+	angular: {
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+	}
+});
 
 export default function DBCheckbox(props: DBCheckboxProps) {
 	const ref = useRef<HTMLInputElement>(null);

packages/components/src/components/input/input.lite.tsx

@@ -40,7 +40,11 @@ import {
 	stringPropVisible
 } from '../../utils/form-components';
 
-useMetadata({});
+useMetadata({
+	angular: {
+		nativeAttributes: ['disabled', 'required']
+	}
+});
 
 export default function DBInput(props: DBInputProps) {
 	const ref = useRef<HTMLInputElement>(null);

packages/components/src/components/radio/radio.lite.tsx

@@ -12,7 +12,11 @@ import { cls, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
-useMetadata({});
+useMetadata({
+	angular: {
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+	}
+});
 
 export default function DBRadio(props: DBRadioProps) {
 	const ref = useRef<HTMLInputElement>(null);

packages/components/src/components/select/select.lite.tsx

@@ -40,7 +40,7 @@ import {
 
 useMetadata({
 	angular: {
-		nativeAttributes: ['value']
+		nativeAttributes: ['disabled', 'required', 'value']
 	}
 });
 

packages/components/src/components/switch/switch.lite.tsx

@@ -11,7 +11,11 @@ import { cls, getBooleanAsString, getHideProp, uuid } from '../../utils';
 import { ChangeEvent, InteractionEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
-useMetadata({});
+useMetadata({
+	angular: {
+		nativeAttributes: ['disabled', 'required', 'checked', 'indeterminate']
+	}
+});
 
 export default function DBSwitch(props: DBSwitchProps) {
 	// This is used as forwardRef

packages/components/src/components/tab-item/tab-item.lite.tsx

@@ -12,7 +12,11 @@ import { cls, getBooleanAsString, getHideProp } from '../../utils';
 import { ChangeEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
-useMetadata({});
+useMetadata({
+	angular: {
+		nativeAttributes: ['disabled']
+	}
+});
 
 export default function DBTabItem(props: DBTabItemProps) {
 	const ref = useRef<HTMLInputElement>(null);

packages/components/src/components/textarea/textarea.lite.tsx

@@ -27,7 +27,11 @@ import {
 	stringPropVisible
 } from '../../utils/form-components';
 
-useMetadata({});
+useMetadata({
+	angular: {
+		nativeAttributes: ['disabled', 'required']
+	}
+});
 
 export default function DBTextarea(props: DBTextareaProps) {
 	const ref = useRef<HTMLTextAreaElement>(null);

showcases/screen-reader/__snapshots__/macos/webkit/DBButton-next-1.txt

@@ -1 +1 @@
-["(Default) Text button","Icon & Text button","Icon button"]
+["(Default) False button","True button"]

showcases/screen-reader/__snapshots__/windows/chromium/DBButton-next-1.txt

@@ -1 +1 @@
-["button, (Default) Text","button, Icon and Text","button, Icon"]
+["button, (Default) False","button, True"]

showcases/screen-reader/__snapshots__/windows/chromium/DBButton-tab-1.txt

@@ -1 +1 @@
-["(Default) Text, button","Icon and Text, button","Icon, button"]
+["(Default) False, button","True, button"]

showcases/screen-reader/tests/button.spec.ts

@@ -7,7 +7,7 @@ test.describe('DBButton', () => {
 		test,
 		title: 'next()',
 		description: 'should not have icon in screen reader (next())',
-		url: './#/02/button?page=content',
+		url: './#/02/button?page=show+icon',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {
 				await nvda?.next();
@@ -17,14 +17,13 @@ test.describe('DBButton', () => {
 			await screenReader?.clearSpokenPhraseLog();
 			await screenReader?.previous();
 			await screenReader?.next();
-			await screenReader?.next();
 		}
 	});
 	testDefault({
 		test,
 		title: 'tab',
 		description: 'should not have icon in screen reader (tab)',
-		url: './#/02/button?page=content',
+		url: './#/02/button?page=show+icon',
 		async testFn(voiceOver, nvda) {
 			if (voiceOver) {
 				// Voiceover isn't working with tab in pipeline
@@ -35,7 +34,6 @@ test.describe('DBButton', () => {
 			await nvda?.clearSpokenPhraseLog();
 			await nvda?.press('Shift+Tab');
 			await nvda?.press('Tab');
-			await nvda?.press('Tab');
 		}
 	});
 });

showcases/screen-reader/tests/checkbox.spec.ts

@@ -8,7 +8,7 @@ test.describe('DBCheckbox', () => {
 		title: 'default',
 		description:
 			'should tick and untick checkbox, feedback messages must appear',
-		url: './#/03/checkbox?page=requirement',
+		url: './#/03/checkbox?page=required',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {
 				await nvda?.next(); // Focus checkbox 2

showcases/screen-reader/tests/input.spec.ts

@@ -7,7 +7,7 @@ test.describe('DBInput', () => {
 		test,
 		title: 'next()',
 		description: 'should have message and label (next())',
-		url: './#/03/input?page=variant%20helper%20message',
+		url: './#/03/input?page=show+message',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {
 				// Nvda doesn't have a next if the element is an input
@@ -26,7 +26,7 @@ test.describe('DBInput', () => {
 		test,
 		title: 'tab',
 		description: 'should have message and label (tab)',
-		url: './#/03/input?page=variant%20helper%20message',
+		url: './#/03/input?page=show+message',
 		async testFn(voiceOver, nvda) {
 			if (voiceOver) {
 				// Voiceover isn't working with tab in pipeline

showcases/screen-reader/tests/link.spec.ts

@@ -8,7 +8,7 @@ test.describe('DBLink', () => {
 		title: 'default',
 		description:
 			'should not mention icon, should have link and dimmed link (next())',
-		url: './#/02/link?page=interaction-states',
+		url: './#/02/link?page=disabled',
 		async testFn(voiceOver, nvda) {
 			const screenReader = voiceOver ?? nvda;
 			await screenReader?.previous(); // Link "Enabled (Default)/Hover/Pressed"

showcases/screen-reader/tests/switch.spec.ts

@@ -8,7 +8,7 @@ test.describe('DBSwitch', () => {
 		title: 'default',
 		description:
 			'should toggle switches, should not toggle disabled switch',
-		url: './#/03/switch?page=states',
+		url: './#/03/switch?page=checked',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {
 				await nvda?.previous(); // Focus "switch 1"

showcases/screen-reader/tests/textarea.spec.ts

@@ -7,7 +7,7 @@ test.describe('DBTextarea', () => {
 		test,
 		title: 'next',
 		description: 'should have message and label (next())',
-		url: './#/03/textarea?page=variant+helper+message',
+		url: './#/03/textarea?page=show+message',
 		async testFn(voiceOver, nvda) {
 			if (nvda) {
 				// Nvda doesn't have a next if the element is an input
@@ -26,7 +26,7 @@ test.describe('DBTextarea', () => {
 		test,
 		title: 'required',
 		description: 'should inform user for changes',
-		url: './#/03/textarea?page=requirement',
+		url: './#/03/textarea?page=required',
 		async testFn(voiceOver, nvda) {
 			if (voiceOver) {
 				/* Goto desired input */

showcases/vue-showcase/src/components/switch/Switch.vue

@@ -18,6 +18,7 @@ import {
 				:visualAid="exampleProps?.visualAid"
 				:checked="exampleProps?.checked"
 				:disabled="exampleProps?.disabled"
+				:required="exampleProps?.required"
 				:showLabel="exampleProps?.showLabel"
 				:size="exampleProps?.size"
 				:emphasis="exampleProps?.emphasis"