fix: issue with autofocus for drawer

packages/components/src/components/drawer/drawer.lite.tsx

@@ -94,17 +94,15 @@ export default function DBDrawer(props: DBDrawerProps) {
 					<div class="db-drawer-header-text">
 						<Slot name="drawerHeader" />
 					</div>
-					<Show when={props.withCloseButton}>
-						<DBButton
-							className="button-close-drawer"
-							id={props.closeButtonId}
-							icon="cross"
-							variant="ghost"
-							noText
-							onClick={() => state.handleClose('close')}>
-							{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
-						</DBButton>
-					</Show>
+					<DBButton
+						className="button-close-drawer"
+						id={props.closeButtonId}
+						icon="cross"
+						variant="ghost"
+						noText
+						onClick={() => state.handleClose('close')}>
+						{props.closeButtonText ?? DEFAULT_CLOSE_BUTTON}
+					</DBButton>
 				</header>
 				<div class="db-drawer-content">{props.children}</div>
 			</article>

packages/components/src/components/drawer/drawer.spec.tsx

@@ -41,7 +41,7 @@ const testAction = () => {
 	test(`should open and close drawer`, async ({ mount, page }) => {
 		let test: string = '';
 		const drawer: any = (
-			<DBDrawer onClose={() => (test = 'close')} withCloseButton={true}>
+			<DBDrawer onClose={() => (test = 'close')}>
 				<span data-testid="test">Test</span>
 			</DBDrawer>
 		);

packages/components/src/components/drawer/model.ts

@@ -45,11 +45,6 @@ export interface DBDrawerDefaultProps {
 	 * The "end" depends on which direction you use.
 	 */
 	rounded?: boolean;
-
-	/**
-	 * The withCloseButton attribute shows/hides the default close button.
-	 */
-	withCloseButton?: boolean;
 }
 
 export type DBDrawerProps = DBDrawerDefaultProps &

packages/components/src/components/header/header.lite.tsx

@@ -73,7 +73,6 @@ export default function DBHeader(props: DBHeaderProps) {
 			<DBDrawer
 				className="db-header-drawer"
 				rounded
-				withCloseButton
 				spacing="small"
 				open={props.drawerOpen}
 				onClose={() => state.toggle()}>

showcases/angular-showcase/src/app/components/drawer/drawer.component.html

@@ -12,7 +12,6 @@
 	>
 		<db-drawer
 			[backdrop]="exampleProps?.backdrop"
-			[withCloseButton]="exampleProps?.withCloseButton"
 			[rounded]="exampleProps?.rounded"
 			[width]="exampleProps?.width"
 			[spacing]="exampleProps?.spacing"

showcases/react-showcase/src/components/drawer/index.tsx

@@ -14,7 +14,6 @@ const getDrawer = ({
 	id,
 	width,
 	rounded,
-	withCloseButton,
 	spacing,
 	openDrawer,
 	setOpenDrawer,
@@ -24,7 +23,6 @@ const getDrawer = ({
 }: DBDrawerProps & AdditionalDrawerProperties) => (
 	<div>
 		<DBDrawer
-			withCloseButton={withCloseButton}
 			rounded={rounded}
 			width={width}
 			spacing={spacing}

showcases/screen-reader/__snapshots__/macos/webkit/DBDrawer-should-autofocus.txt

@@ -0,0 +1 @@
+["web dialog Close Button button article","Functional"]

showcases/screen-reader/__snapshots__/windows/chromium/DBDrawer-should-autofocus.txt

@@ -0,0 +1 @@
+["unknown. dialog. document. clickable, Close Button, button. dialog. button, Close Button","Functional"]

showcases/screen-reader/default.ts

@@ -22,7 +22,10 @@ const translations: Record<string, string[]> = {
 	checked: ['aktiviert'],
 	' of ': [' von '],
 	clickable: ['anklickbar'],
-	'has auto complete': ['mit Auto Vervollständigung']
+	'has auto complete': ['mit Auto Vervollständigung'],
+	unknown: ['Unbekannt'],
+	dialog: ['Dialogfeld'],
+	document: ['Dokument']
 };
 
 const cleanSpeakInstructions = (phraseLog: string[]): string[] =>

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

@@ -0,0 +1,16 @@
+import { getTest, testDefault } from '../default';
+
+const test = getTest();
+
+test.describe('DBDrawer', () => {
+	testDefault({
+		test,
+		title: 'should autofocus',
+		url: './#/01/drawer?page=density',
+		async testFn(voiceOver, nvda) {
+			const screenReader = voiceOver ?? nvda;
+			await screenReader?.act();
+			await screenReader?.next();
+		}
+	});
+});

showcases/shared/drawer.json

@@ -6,7 +6,6 @@
 				"name": "Functional",
 				"className": "db-density-functional",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
@@ -15,7 +14,6 @@
 				"name": "(Default) Regular",
 				"className": "db-density-regular",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
@@ -24,7 +22,6 @@
 				"name": "Expressive",
 				"className": "db-density-expressive",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
@@ -37,15 +34,13 @@
 			{
 				"name": "(Default) Medium",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
 			},
 			{
 				"name": "Full",
 				"props": {
-					"withCloseButton": true,
 					"width": "full",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -59,15 +54,13 @@
 			{
 				"name": "(Default) No rounding",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
 			},
 			{
 				"name": "Rounded",
 				"props": {
-					"withCloseButton": true,
 					"rounded": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -81,15 +74,13 @@
 			{
 				"name": "(Default) Medium",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
 			},
 			{
 				"name": "Small",
 				"props": {
-					"withCloseButton": true,
 					"spacing": "small",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -98,7 +89,6 @@
 			{
 				"name": "Large",
 				"props": {
-					"withCloseButton": true,
 					"spacing": "large",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -107,7 +97,6 @@
 			{
 				"name": "No spacing",
 				"props": {
-					"withCloseButton": true,
 					"spacing": "none",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -121,15 +110,13 @@
 			{
 				"name": "(Default) With Backdrop",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
 			},
 			{
 				"name": "Backdrop-weak",
 				"props": {
-					"withCloseButton": true,
 					"backdrop": "weak",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -138,7 +125,6 @@
 			{
 				"name": "Invisible",
 				"props": {
-					"withCloseButton": true,
 					"backdrop": "invisible",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -147,7 +133,6 @@
 			{
 				"name": "No Backdrop",
 				"props": {
-					"withCloseButton": true,
 					"backdrop": "none",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -161,15 +146,13 @@
 			{
 				"name": "(Default) Right",
 				"props": {
-					"withCloseButton": true,
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
 				}
 			},
 			{
 				"name": "Left",
 				"props": {
-					"withCloseButton": true,
 					"direction": "left",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -178,7 +161,6 @@
 			{
 				"name": "Up",
 				"props": {
-					"withCloseButton": true,
 					"direction": "up",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"
@@ -187,7 +169,6 @@
 			{
 				"name": "Down",
 				"props": {
-					"withCloseButton": true,
 					"direction": "down",
 					"open": "open",
 					"onClose": "toggleDrawer(false)"

showcases/vue-showcase/src/components/drawer/Drawer.vue

@@ -18,7 +18,6 @@ const toggleDrawer = (example?: string) => {
 		>
 			<DBDrawer
 				:backdrop="exampleProps?.backdrop"
-				:withCloseButton="exampleProps?.withCloseButton"
 				:rounded="exampleProps?.rounded"
 				:width="exampleProps?.width"
 				:spacing="exampleProps?.spacing"