@db-ux/react-core-components 4.3.2 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/react-core-components
 
+## 4.4.0
+
+### Minor Changes
+
+- feat: add `role` property to DBNotification & automatically add role based on semantic if no `role` or `ariaLive` is provided to increase UX for screen-reader users - [see commit 177d71e](https://github.com/db-ux-design-system/core-web/commit/177d71e287a64a6491ba446e7812d0adbda1717e)
+
+- feat(DBSelect): hide empty first option in `required` selects with placeholder after the first user selection, and add `showEmptyOption` prop to overwrite this - [see commit 4280bc4](https://github.com/db-ux-design-system/core-web/commit/4280bc47538d6983d6bb5575f012b6c6b25b40e8)
+
 ## 4.3.2
 
 ### Patch Changes

package/dist/components/badge/badge.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | keyof import("../..").GlobalProps | keyof import("./model").DBBadgeDefaultProps | "semantic" | "size" | "emphasis"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").EmphasisProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBBadge: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "semantic" | "text" | keyof import("../..").GlobalProps | keyof import("./model").DBBadgeDefaultProps | "size" | "emphasis"> & import("./model").DBBadgeDefaultProps & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").SizeProps & import("../..").EmphasisProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBBadge;

package/dist/components/infotext/infotext.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | keyof import("../..").GlobalProps | "semantic" | "size" | "icon" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
+declare const DBInfotext: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "semantic" | "text" | keyof import("../..").GlobalProps | "size" | "icon" | "showIcon"> & import("../..").GlobalProps & import("../..").SemanticProps & import("../..").IconProps & import("../..").SizeProps & import("../..").ShowIconProps & import("../..").TextProps & React.RefAttributes<any>>;
 export default DBInfotext;

package/dist/components/link/link.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "text" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../..").ClickEventProps<HTMLAnchorElement> | keyof import("../..").LinkProps | "wrap"> & import("./model").DBLinkDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLAnchorElement> & import("../..").LinkProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
+declare const DBLink: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<any>, "role" | "text" | keyof import("../..").GlobalProps | "showIcon" | keyof import("./model").DBLinkDefaultProps | keyof import("../..").ClickEventProps<HTMLAnchorElement> | keyof import("../..").LinkProps | "wrap"> & import("./model").DBLinkDefaultProps & import("../..").GlobalProps & import("../..").ClickEventProps<HTMLAnchorElement> & import("../..").LinkProps & import("../..").RoleProps & import("../..").ShowIconProps & import("../..").TextProps & import("../..").WrapProps & React.RefAttributes<any>>;
 export default DBLink;

package/dist/components/link/model.d.ts

@@ -1,4 +1,4 @@
-import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
+import { ClickEventProps, ClickEventState, GlobalProps, GlobalState, LinkProps, RoleProps, ShowIconProps, TextProps, WrapProps } from '../../shared/model';
 export declare const LinkVariantList: readonly ["adaptive", "brand", "inline"];
 export type LinkVariantType = (typeof LinkVariantList)[number];
 export declare const LinkSizeList: readonly ["medium", "small"];
@@ -19,6 +19,6 @@ export type DBLinkDefaultProps = {
      */
     variant?: LinkVariantType;
 };
-export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & ShowIconProps & TextProps & WrapProps;
+export type DBLinkProps = DBLinkDefaultProps & GlobalProps & ClickEventProps<HTMLAnchorElement> & LinkProps & RoleProps & ShowIconProps & TextProps & WrapProps;
 export type DBLinkDefaultState = {};
 export type DBLinkState = DBLinkDefaultState & GlobalState & ClickEventState<HTMLAnchorElement>;

package/dist/components/notification/model.d.ts

@@ -1,4 +1,4 @@
-import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
+import { ClickEvent, CloseEventProps, CloseEventState, GlobalProps, GlobalState, IconProps, InnerCloseButtonProps, PopoverProps, RoleProps, SemanticProps, ShowIconProps, TextProps } from '../../shared/model';
 export declare const NotificationVariantList: readonly ["docked", "standalone", "overlay"];
 export type NotificationVariantType = (typeof NotificationVariantList)[number];
 export declare const NotificationLinkVariantList: readonly ["block", "inline"];
@@ -52,6 +52,6 @@ export type DBNotificationDefaultProps = {
      */
     variant?: NotificationVariantType;
 };
-export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & CloseEventProps<ClickEvent<HTMLButtonElement>> & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
+export type DBNotificationProps = DBNotificationDefaultProps & GlobalProps & RoleProps & CloseEventProps<ClickEvent<HTMLButtonElement>> & IconProps & SemanticProps & InnerCloseButtonProps & PopoverProps & ShowIconProps & TextProps;
 export type DBNotificationDefaultState = {};
 export type DBNotificationState = DBNotificationDefaultState & GlobalState & CloseEventState<ClickEvent<HTMLButtonElement>>;

package/dist/components/notification/notification.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import { ClickEvent } from "../../shared/model";
-declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "text" | keyof import("../../shared/model").GlobalProps | "semantic" | "icon" | "showIcon" | keyof import("../../shared/model").PopoverProps | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").PopoverProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBNotification: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "role" | "semantic" | "text" | keyof import("../../shared/model").GlobalProps | "icon" | "showIcon" | keyof import("../../shared/model").PopoverProps | keyof import("../../shared/model").InnerCloseButtonProps | keyof import("./model").DBNotificationDefaultProps | keyof import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>>> & import("./model").DBNotificationDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").RoleProps & import("../../shared/model").CloseEventProps<ClickEvent<HTMLButtonElement>> & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").InnerCloseButtonProps & import("../../shared/model").PopoverProps & import("../../shared/model").ShowIconProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
 export default DBNotification;

package/dist/components/notification/notification.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { filterPassingProps, getRootProps } from "../../utils/react";
 import { useRef, forwardRef } from "react";
 import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, getBoolean, getBooleanAsString, stringPropVisible, } from "../../utils";
+import { cls, getBoolean, getBooleanAsString, getNotificationRole, stringPropVisible, } from "../../utils";
 import DBButton from "../button/button";
 function DBNotificationFn(props, component) {
     var _a;
@@ -16,7 +16,11 @@ function DBNotificationFn(props, component) {
             props.onClose(event);
         }
     }
-    return (React.createElement("article", 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", "onClose"]), { id: props.id }, 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"]), { className: cls("db-notification", props.className), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
+    return (React.createElement("div", 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", "onClose"]), { id: props.id }, 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"]), { className: cls("db-notification", props.className), role: getNotificationRole({
+            semantic: props.semantic,
+            role: props.role,
+            ariaLive: props.ariaLive,
+        }), "aria-live": props.ariaLive, "data-semantic": props.semantic, "data-variant": props.variant, "data-icon": getBoolean(props.showIcon) !== false ? props.icon : undefined, "data-show-icon": getBooleanAsString(props.showIcon), "data-link-variant": props.linkVariant }),
         React.createElement(React.Fragment, null, props.image),
         stringPropVisible(props.headline, props.showHeadline) ? (React.createElement("header", null, props.headline)) : null,
         React.createElement("p", null, props.text ? React.createElement(React.Fragment, null, props.text) : React.createElement(React.Fragment, null, props.children)),

package/dist/components/select/model.d.ts

@@ -9,6 +9,15 @@ export type DBSelectDefaultProps = {
      * If you don't/can't use children/slots you can pass in the options as an array.
      */
     options?: DBSelectOptionType[];
+    /**
+     * Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.
+     * By default, it is shown for non-required selects and hidden for required selects.
+     * Set to `true` to always show or `false` to always hide the empty option.
+     *
+     * Note: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.
+     * Setting `showEmptyOption` alone has no effect if neither of these conditions is met.
+     */
+    showEmptyOption?: boolean;
 };
 export type DBSelectOptionType = {
     /**
@@ -40,5 +49,6 @@ export type DBSelectProps = GlobalProps & ClickEventProps<HTMLSelectElement> & C
 export type DBSelectDefaultState = {
     _placeholderId: string;
     getOptionLabel: (option: DBSelectOptionType) => string;
+    shouldShowEmptyOption: () => boolean;
 };
 export type DBSelectState = DBSelectDefaultState & GlobalState & ClickEventState<HTMLSelectElement> & ChangeEventState<HTMLSelectElement> & FocusEventState<HTMLSelectElement> & InputEventState<HTMLSelectElement> & FormState & InitializedState & FromValidState;

package/dist/components/select/select.js

@@ -87,6 +87,17 @@ function DBSelectFn(props, component) {
         var _a, _b;
         return (_a = option.label) !== null && _a !== void 0 ? _a : (_b = option.value) === null || _b === void 0 ? void 0 : _b.toString();
     }
+    function shouldShowEmptyOption() {
+        const hasPlaceholderOrFloating = props.variant === "floating" || !!props.placeholder;
+        if (!hasPlaceholderOrFloating) {
+            return false;
+        }
+        if (props.showEmptyOption !== undefined) {
+            return props.showEmptyOption;
+        }
+        // Default: show empty option for non-required selects
+        return !props.required;
+    }
     useEffect(() => {
         var _a;
         setInitialized(true);
@@ -156,7 +167,7 @@ function DBSelectFn(props, component) {
     return (React.createElement("div", Object.assign({}, 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"]), { className: cls("db-select", props.className), "data-variant": props.variant, "data-hide-label": getHideProp(props.showLabel), "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-icon": props.icon, "data-show-icon": getBooleanAsString(props.showIcon) }),
         React.createElement("label", { htmlFor: _id }, (_a = props.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL),
         React.createElement("select", Object.assign({ "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, 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"]), { required: getBoolean(props.required, "required"), disabled: getBoolean(props.disabled, "disabled"), id: _id, name: props.name, size: props.size, value: props.value, autoComplete: props.autocomplete, multiple: props.multiple, onInput: (event) => handleInput(event), onClick: (event) => handleClick(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), "aria-describedby": (_b = props.ariaDescribedBy) !== null && _b !== void 0 ? _b : _descByIds }),
-            props.variant === "floating" || props.placeholder ? (React.createElement("option", { className: "placeholder", value: "" })) : null,
+            props.variant === "floating" || !!props.placeholder ? (React.createElement("option", { className: "placeholder", value: "", "data-show-empty-option": getBooleanAsString(shouldShowEmptyOption()) })) : null,
             ((_c = props.options) === null || _c === void 0 ? void 0 : _c.length) ? (React.createElement(React.Fragment, null, (_d = props.options) === null || _d === void 0 ? void 0 : _d.map((option) => {
                 var _a;
                 return option.options ? (React.createElement("optgroup", { label: getOptionLabel(option), key: getOptionKey(option, "select-optgroup-") }, (_a = option.options) === null || _a === void 0 ? void 0 : _a.map((optgroupOption) => (React.createElement("option", { value: optgroupOption.value, disabled: optgroupOption.disabled, key: getOptionKey(optgroupOption, "select-optgroup-option-") }, getOptionLabel(optgroupOption)))))) : (React.createElement("option", { value: option.value, disabled: option.disabled, key: getOptionKey(option, "select-option-") }, getOptionLabel(option)));

package/dist/components/tag/tag.d.ts

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | keyof import("../../shared/model").GlobalProps | "semantic" | "emphasis" | "icon" | "showIcon" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & React.RefAttributes<any>>;
+declare const DBTag: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, "content" | "semantic" | keyof import("../../shared/model").GlobalProps | "emphasis" | "icon" | "showIcon" | keyof import("./model").DBTagDefaultProps | "overflow" | keyof import("./model").DBTagEventsProps> & import("./model").DBTagDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").IconProps & import("../../shared/model").SemanticProps & import("../../shared/model").OverflowProps & import("../../shared/model").EmphasisProps & import("../../shared/model").ShowIconProps & import("../../shared/model").ContentSlotProps & import("./model").DBTagEventsProps & React.RefAttributes<any>>;
 export default DBTag;

package/dist/shared/model.d.ts

@@ -398,10 +398,6 @@ export type LinkProps = {
      * The relationship of the linked URL as space-separated link types.
      */
     rel?: string;
-    /**
-     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
-     */
-    role?: string;
     /**
      * How much of the referrer to send when following the link.
      * @deprecated use `referrerPolicy` instead
@@ -412,6 +408,12 @@ export type LinkProps = {
      */
     referrerPolicy?: LinkReferrerPolicyType;
 };
+export type RoleProps = {
+    /**
+     * Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).
+     */
+    role?: string;
+};
 export type TextProps = {
     /**
      * Alternative for default slot/children.

package/dist/utils/index.d.ts

@@ -58,3 +58,15 @@ export declare const getOptionKey: (option: {
     value?: string | number | string[] | undefined;
 }, prefix: string) => string;
 export declare const isKeyboardEvent: <T>(event?: ClickEvent<T> | GeneralKeyboardEvent<T>) => event is GeneralKeyboardEvent<T>;
+/**
+ * Maps semantic values to appropriate ARIA roles for notifications
+ * @param semantic - The semantic type of the notification
+ * @param role - The aria role of the notification
+ * @param ariaLive - The aria-live of the notification
+ * @returns The appropriate ARIA role or undefined for default behavior
+ */
+export declare const getNotificationRole: ({ semantic, role, ariaLive }: {
+    semantic?: string;
+    role?: string;
+    ariaLive?: string;
+}) => string | undefined;

package/dist/utils/index.js

@@ -141,3 +141,28 @@ export const getOptionKey = (option, prefix) => {
     return `${prefix}${key}`;
 };
 export const isKeyboardEvent = (event) => event.key !== undefined;
+/**
+ * Maps semantic values to appropriate ARIA roles for notifications
+ * @param semantic - The semantic type of the notification
+ * @param role - The aria role of the notification
+ * @param ariaLive - The aria-live of the notification
+ * @returns The appropriate ARIA role or undefined for default behavior
+ */
+export const getNotificationRole = ({ semantic, role, ariaLive }) => {
+    if (role) {
+        return role;
+    }
+    if (ariaLive) {
+        return 'article';
+    }
+    switch (semantic) {
+        case 'critical':
+        case 'warning':
+            return 'alert';
+        case 'informational':
+        case 'successful':
+            return 'status';
+        default:
+            return 'article';
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.3.2",
+  "version": "4.4.0",
   "description": "React components for @db-ux/core-components",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.57.0",
-    "@types/react": "19.2.8",
+    "@types/react": "19.2.9",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
@@ -41,7 +41,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@db-ux/core-components": "4.3.2",
-    "@db-ux/core-foundations": "4.3.2"
+    "@db-ux/core-components": "4.4.0",
+    "@db-ux/core-foundations": "4.4.0"
   }
 }