@db-ux/react-core-components 4.5.2 → 4.5.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @db-ux/react-core-components
 
+## 4.5.4
+
+### Patch Changes
+
+- refactor: Enhance the accessibility of the navigation components by adding missing WAI-ARIA attributes (`aria-controls`, `aria-label`, `aria-haspopup`) for better screen reader support. - [see commit f040188](https://github.com/db-ux-design-system/core-web/commit/f0401886267359518c37062373bb0f9df311214c)
+
+- fix: adjusted `@media` queries (removed `screen` from combined queries) to avoid broken layouts when printing - [see commit 0960eb6](https://github.com/db-ux-design-system/core-web/commit/0960eb6f9223fe23bdaac0de685cf7aa5eb7654e)
+
+- fix(switch): removed obsolete gap towards label in `small` variant - [see commit 40bad01](https://github.com/db-ux-design-system/core-web/commit/40bad017f068bf8968829977808a6d8e9d21b4fe)
+
+## 4.5.3
+
+_version bump_
+
 ## 4.5.2
 
 ### Patch Changes

package/dist/components/navigation-item/model.d.ts

@@ -29,5 +29,7 @@ export type DBNavigationItemDefaultState = {
     hasSubNavigation?: boolean;
     navigationItemSafeTriangle?: NavigationItemSafeTriangle;
     autoClose?: boolean;
+    subNavigationId?: string;
+    subNavigationToggleId?: string;
 };
 export type DBNavigationItemState = DBNavigationItemDefaultState & ClickEventState<HTMLButtonElement> & GlobalState & InitializedState & NavigationBehaviorState;

package/dist/components/navigation-item/navigation-item.js

@@ -6,8 +6,10 @@ import { DEFAULT_BACK } from "../../shared/constants";
 import { cls, delay, getBoolean, getBooleanAsString } from "../../utils";
 import { NavigationItemSafeTriangle } from "../../utils/navigation";
 import DBButton from "../button/button";
+import { useId } from "react";
 function DBNavigationItemFn(props, component) {
     var _a, _b, _c;
+    const uuid = useId();
     const _ref = component || useRef(component);
     const [initialized, setInitialized] = useState(() => false);
     const [hasAreaPopup, setHasAreaPopup] = useState(() => false);
@@ -15,6 +17,8 @@ function DBNavigationItemFn(props, component) {
     const [isSubNavigationExpanded, setIsSubNavigationExpanded] = useState(() => false);
     const [autoClose, setAutoClose] = useState(() => false);
     const [navigationItemSafeTriangle, setNavigationItemSafeTriangle] = useState(() => undefined);
+    const [subNavigationId, setSubNavigationId] = useState(() => undefined);
+    const [subNavigationToggleId, setSubNavigationToggleId] = useState(() => undefined);
     function handleNavigationItemClick(event) {
         var _a;
         if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "A") {
@@ -38,7 +42,11 @@ function DBNavigationItemFn(props, component) {
         setIsSubNavigationExpanded(false);
     }
     useEffect(() => {
+        var _a;
         setInitialized(true);
+        const subNavId = `sub-nav-${(_a = props.id) !== null && _a !== void 0 ? _a : uuid}`;
+        setSubNavigationId(subNavId);
+        setSubNavigationToggleId(`${subNavId}-toggle`);
     }, []);
     useEffect(() => {
         if (props.subNavigationExpanded !== undefined) {
@@ -65,8 +73,8 @@ function DBNavigationItemFn(props, component) {
     return (React.createElement("li", Object.assign({ ref: _ref }, filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { id: (_a = props.id) !== null && _a !== void 0 ? _a : (_b = props.propOverrides) === null || _b === void 0 ? void 0 : _b.id, onMouseOver: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.enableFollow(), onMouseLeave: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.disableFollow(), onMouseMove: (event) => navigationItemSafeTriangle === null || navigationItemSafeTriangle === void 0 ? void 0 : navigationItemSafeTriangle.followByMouseEvent(event) }, getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), { className: cls("db-navigation-item", props.className), "data-width": props.width, "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon), "data-active": props.active, "data-wrap": getBooleanAsString(props.wrap), "aria-disabled": getBooleanAsString(props.disabled) }),
         !hasSubNavigation ? (React.createElement(React.Fragment, null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children))) : null,
         hasSubNavigation ? (React.createElement(React.Fragment, null,
-            React.createElement("button", { className: "db-navigation-item-expand-button", "aria-haspopup": hasAreaPopup, "aria-expanded": isSubNavigationExpanded, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
-            React.createElement("menu", { className: "db-sub-navigation", "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
+            React.createElement("button", { className: "db-navigation-item-expand-button", id: subNavigationToggleId, "aria-haspopup": hasAreaPopup ? "true" : undefined, "aria-expanded": isSubNavigationExpanded, "aria-controls": subNavigationId, disabled: getBoolean(props.disabled, "disabled"), onClick: (event) => handleClick(event) }, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),
+            React.createElement("menu", { className: "db-sub-navigation", id: subNavigationId, "aria-labelledby": subNavigationToggleId, "data-force-close": autoClose, onClick: (event) => handleNavigationItemClick(event) },
                 hasAreaPopup ? (React.createElement("div", { className: "db-mobile-navigation-back" },
                     React.createElement(DBButton, { icon: "arrow_left", variant: "ghost", id: props.backButtonId, onClick: (event) => handleBackClick(event) }, (_c = props.backButtonText) !== null && _c !== void 0 ? _c : DEFAULT_BACK))) : null,
                 React.createElement(React.Fragment, null, props.subNavigation)))) : null));

package/dist/shared/showcase/show-code-link.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Resolves the framework-specific Storybook URL for the current component page.
+ * @param currentUrl - Current page URL
+ * @param frameworkRaw - Framework name ('react', 'angular', 'vue', 'html')
+ * @returns Storybook URL or undefined when the component route cannot be determined
+ */
+export declare function getShowCodeHref(currentUrl: string, frameworkRaw: string | null | undefined): string | undefined;

package/dist/shared/showcase/show-code-link.js

@@ -0,0 +1,51 @@
+const LOCALHOST_STORYBOOK_PORT_MAP = {
+    react: '6005',
+    angular: '6006',
+    vue: '6007',
+    html: '6001'
+};
+const DEFAULT_FRAMEWORK = 'react';
+const NON_COMPONENT_ROUTE_SEGMENTS = new Set(['docs', 'overview']);
+/**
+ * Builds the Storybook docs path for a component route.
+ * @param pathname - URL pathname (e.g., "/docs/components/my-button")
+ * @returns Storybook docs path or undefined when no component segment is available
+ */
+function buildStorybookDocsPathname(pathname) {
+    const segments = pathname.split('/').filter(Boolean);
+    const componentsIndex = segments.indexOf('components');
+    const routeSegments = segments.slice(componentsIndex + 1);
+    if (componentsIndex === -1 || routeSegments.length === 0) {
+        return undefined;
+    }
+    let componentName = routeSegments.at(-1);
+    if (componentName && NON_COMPONENT_ROUTE_SEGMENTS.has(componentName) && routeSegments.length > 1) {
+        componentName = routeSegments.at(-2);
+    }
+    if (!componentName) {
+        return undefined;
+    }
+    const normalizedComponentName = componentName.replace(/-/g, '');
+    return `/docs/components-db${normalizedComponentName}`;
+}
+/**
+ * Resolves the framework-specific Storybook URL for the current component page.
+ * @param currentUrl - Current page URL
+ * @param frameworkRaw - Framework name ('react', 'angular', 'vue', 'html')
+ * @returns Storybook URL or undefined when the component route cannot be determined
+ */
+export function getShowCodeHref(currentUrl, frameworkRaw) {
+    const framework = (frameworkRaw || DEFAULT_FRAMEWORK).toLowerCase();
+    const url = new URL(currentUrl);
+    const componentsIndex = url.pathname.indexOf('/components/');
+    const docsPath = buildStorybookDocsPathname(url.pathname);
+    if (componentsIndex === -1 || !docsPath) {
+        return undefined;
+    }
+    if (url.hostname === 'localhost' || url.hostname === '127.0.0.1') {
+        const port = LOCALHOST_STORYBOOK_PORT_MAP[framework] || LOCALHOST_STORYBOOK_PORT_MAP[DEFAULT_FRAMEWORK];
+        return `${url.protocol}//${url.hostname}:${port}/?path=${docsPath}`;
+    }
+    const basePath = url.pathname.slice(0, componentsIndex);
+    return `${url.origin}${basePath}/${framework}-storybook?path=${docsPath}`;
+}

package/dist/utils/show-code-link.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/show-code-link.spec.js

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { getShowCodeHref } from '../shared/showcase/show-code-link';
+describe('getShowCodeHref', () => {
+    it('returns localhost react storybook url on localhost', () => {
+        expect(getShowCodeHref('http://localhost:3000/core-web/sub/components/action/button/overview', 'react')).toBe('http://localhost:6005/?path=/docs/components-dbbutton');
+    });
+    it('returns localhost angular storybook url on localhost', () => {
+        expect(getShowCodeHref('http://localhost:3000/core-web/sub/components/action/button/overview', 'angular')).toBe('http://localhost:6006/?path=/docs/components-dbbutton');
+    });
+    it('returns localhost vue storybook url on localhost', () => {
+        expect(getShowCodeHref('http://127.0.0.1:3000/core-web/sub/components/action/button/overview', 'vue')).toBe('http://127.0.0.1:6007/?path=/docs/components-dbbutton');
+    });
+    it('returns localhost html storybook url on localhost', () => {
+        expect(getShowCodeHref('http://localhost:3000/core-web/sub/components/action/button/overview', 'html')).toBe('http://localhost:6001/?path=/docs/components-dbbutton');
+    });
+    it('returns localhost url for direct docs route', () => {
+        expect(getShowCodeHref('http://localhost:3000/core-web/components/button/docs', 'react')).toBe('http://localhost:6005/?path=/docs/components-dbbutton');
+    });
+    it('returns production url for non-localhost', () => {
+        expect(getShowCodeHref('https://db-ui.com/core-web/sub/components/action/button/overview', 'react')).toBe('https://db-ui.com/core-web/sub/react-storybook?path=/docs/components-dbbutton');
+    });
+    it('returns undefined if url has no components segment', () => {
+        expect(getShowCodeHref('https://db-ui.com/core-web/sub/', 'react')).toBe(undefined);
+    });
+    it('returns undefined for components root route', () => {
+        expect(getShowCodeHref('https://db-ui.com/core-web/components', 'react')).toBe(undefined);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.5.2",
+  "version": "4.5.4",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.5.2",
-    "@db-ux/core-foundations": "4.5.2"
+    "@db-ux/core-components": "4.5.4",
+    "@db-ux/core-foundations": "4.5.4"
   }
 }