fix: issues from PR

db-ui · Jul 5, 2024 · a7cc66f · a7cc66f
1 parent 9402d66
commit a7cc66f
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 28 deletions.
diff --git a/packages/components/scripts/post-build/components.ts b/packages/components/scripts/post-build/components.ts
@@ -63,6 +63,10 @@ export const getComponents = (): Component[] => [
 				{
 					from: 'scrollContainer = null;',
 					to: 'scrollContainer: Element | null = null;'
+				},
+				{
+					from: '& > .db-tab-panel',
+					to: '& > dbtabpanel > .db-tab-panel, & > db-tab-panel > .db-tab-panel'
 				}
 			]
 		}

diff --git a/packages/components/scripts/post-build/vue.ts b/packages/components/scripts/post-build/vue.ts
@@ -71,7 +71,9 @@ export default (tmp?: boolean) => {
 				}
 			];
 
-			// This is a workaround for valid/invalidMessages resetting values
+			/* This is a workaround for valid/invalid Messages.
+			 *  If a valid/invalid message appears it will use the old this._value,
+			 *  so we need to overwrite this._value with the current event.target.value.   */
 			[
 				'HTMLSelectElement',
 				'HTMLInputElement',

diff --git a/packages/components/src/components/checkbox/checkbox.lite.tsx b/packages/components/src/components/checkbox/checkbox.lite.tsx
@@ -43,6 +43,7 @@ export default function DBCheckbox(props: DBCheckboxProps) {
 			}
 			handleFrameworkEvent(this, event, 'checked');
 
+			/* For a11y reasons we need to map the correct message with the checkbox */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (

diff --git a/packages/components/src/components/input/input.lite.tsx b/packages/components/src/components/input/input.lite.tsx
@@ -66,6 +66,7 @@ export default function DBInput(props: DBInputProps) {
 
 			handleFrameworkEvent(this, event);
 
+			/* For a11y reasons we need to map the correct message with the input */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (

diff --git a/packages/components/src/components/select/select.lite.tsx b/packages/components/src/components/select/select.lite.tsx
@@ -72,6 +72,7 @@ export default function DBSelect(props: DBSelectProps) {
 
 			handleFrameworkEvent(this, event);
 
+			/* For a11y reasons we need to map the correct message with the select */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (

diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -122,27 +122,19 @@ export default function DBTabs(props: DBTabsProps) {
 					);
 				}
 
-				const tabPanels = [
-					...Array.from<Element>(
-						ref.querySelectorAll('& > .db-tab-panel')
-					),
-					...Array.from<Element>(
-						ref.querySelectorAll('& > dbtabpanel > .db-tab-panel')
-					),
-					...Array.from<Element>(
-						ref.querySelectorAll('& > db-tab-panel > .db-tab-panel')
-					)
-				];
+				const tabPanels = Array.from<Element>(
+					ref.querySelectorAll('& > .db-tab-panel')
+				);
 				if (tabPanels?.length > 0) {
-					tabPanels.forEach((panel: Element, index: number) => {
-						if (!panel.id) {
-							panel.id = `${state._name}-tab-panel-${index}`;
-							panel.setAttribute(
-								'aria-labelledby',
-								`${state._name}-tab-${index}`
-							);
-						}
-					});
+					for (const panel of tabPanels) {
+						if (panel.id) continue;
+						const index: number = tabPanels.indexOf(panel);
+						panel.id = `${state._name}-tab-panel-${index}`;
+						panel.setAttribute(
+							'aria-labelledby',
+							`${state._name}-tab-${index}`
+						);
+					}
 				}
 			}
 		}

diff --git a/packages/components/src/components/textarea/textarea.lite.tsx b/packages/components/src/components/textarea/textarea.lite.tsx
@@ -60,6 +60,7 @@ export default function DBTextarea(props: DBTextareaProps) {
 
 			handleFrameworkEvent(this, event);
 
+			/* For a11y reasons we need to map the correct message with the textarea */
 			if (!ref?.validity.valid || props.customValidity === 'invalid') {
 				state._descByIds = state._invalidMessageId;
 			} else if (

diff --git a/showcases/angular-showcase/src/app/components/form/form.component.html b/showcases/angular-showcase/src/app/components/form/form.component.html
@@ -269,7 +269,7 @@ <h1>Output</h1>
 					</db-tab-item>
 					<db-tab-item icon="airplane" [noText]="true"></db-tab-item>
 				</db-tab-list>
-				<DBTabPanel>
+				<db-tab-panel>
 					It is a long established fact that a reader will be
 					distracted by the readable content of a page when looking at
 					its layout. The point of using Lorem Ipsum is that it has a
@@ -281,10 +281,10 @@ <h1>Output</h1>
 					sites still in their infancy. Various versions have evolved
 					over the years, sometimes by accident, sometimes on purpose
 					(injected humour and the like).
-				</DBTabPanel>
-				<DBTabPanel>Tab Panel 2</DBTabPanel>
-				<DBTabPanel>Tab Panel 3</DBTabPanel>
-				<DBTabPanel>
+				</db-tab-panel>
+				<db-tab-panel>Tab Panel 2</db-tab-panel>
+				<db-tab-panel>Tab Panel 3</db-tab-panel>
+				<db-tab-panel>
 					At vero eos et accusamus et iusto odio dignissimos ducimus
 					qui blanditiis praesentium voluptatum deleniti atque
 					corrupti quos dolores et quas molestias excepturi sint
@@ -318,8 +318,8 @@ <h1>Output</h1>
 					principle of selection: he rejects pleasures to secure other
 					greater pleasures, or else he endures pains to avoid worse
 					pains.
-				</DBTabPanel>
-				<DBTabPanel>Tab Panel 5</DBTabPanel>
+				</db-tab-panel>
+				<db-tab-panel>Tab Panel 5</db-tab-panel>
 			</db-tabs>
 		</dl>
 	</div>