@bonniernews/dn-design-system-web 29.0.0 → 29.0.1

package/CHANGELOG.md

@@ -4,6 +4,18 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [29.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@29.0.0...@bonniernews/dn-design-system-web@29.0.1) (2025-02-17)
+
+
+### Bug Fixes
+
+* **web:** button href aria-label fallback ([#1616](https://github.com/BonnierNews/dn-design-system/issues/1616)) ([0643b5e](https://github.com/BonnierNews/dn-design-system/commit/0643b5ebfbf5c802e2908808aa360698805d2824))
+
+
+### Maintenance
+
+* **web:** update documentation about rerunning failed tests ([#1615](https://github.com/BonnierNews/dn-design-system/issues/1615)) ([9206d7f](https://github.com/BonnierNews/dn-design-system/commit/9206d7fe1e2a9d171c4472167e31a709bb4a7406))
+
 ## [29.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@28.0.1...@bonniernews/dn-design-system-web@29.0.0) (2025-02-12)
 
 

package/components/button/button-types.ts

@@ -31,7 +31,6 @@ export interface ButtonBaseProps extends ButtonSharedProps {
   type?: 'button' | 'submit'
   /** If href is set the button will be rendered as an a-tag */
   href?: string
-  a11y?: AllyProps
   selected?: boolean
   isToggle?: boolean
   selectedIconName?: DsIcon
@@ -42,7 +41,6 @@ export interface InnerButtonProps {
   text?: string
   isIconButton?: boolean
   attributes?: object | any
-  a11y?: AllyProps
   icon?: any
   loadingHtml?: any
 }

package/components/button/button.njk

@@ -1,13 +1,12 @@
 {% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}
 {% from '@bonniernews/dn-design-system-web/components/spinner/spinner.njk' import Spinner %}
 {% from '@bonniernews/dn-design-system-web/njk-helpers/attributes.njk' import getAttributes %}
-{% from '@bonniernews/dn-design-system-web/foundations/a11y/visually-hidden.njk' import VisuallyHidden %}
 
 {% macro InnerButton(params) %}
-  {% if not params.isIconButton %}
+  {% if not params.isIconButton and params.attributes["aria-label"] %}
     <span aria-hidden="true">{{ params.text }}</span>
-  {% elif not params.attributes["aria-label"] and params.a11y and params.a11y.visuallyHidden %}
-    {{- VisuallyHidden({ text: params.a11y.visuallyHidden }) | safe -}}
+  {% elif not params.isIconButton %}
+    <span>{{ params.text }}</span>
   {% endif %}
   {{- params.iconSvg | safe if params.iconSvg -}} {{ params.loadingHtml | safe }}
 {% endmacro %}
@@ -24,7 +23,7 @@
   {%- set classNamePrefix = componentClassName + "--" %}
   {%- set text = params.text %}
   {%- set attributes = getAttributes(params.attributes) %}
-  {%- set ariaLabel = 'aria-label="' + text + '"' if params.text and not params.attributes["aria-label"] else "" %}
+  {%- set ariaLabel = 'aria-label="' + text + '"' if (params.isIconButton or params.isToggle) and params.text and not params.attributes["aria-label"] else "" %}
   {%- set buttonVariant = params.variant | default("primary") %}
 
   {% if params.variant == "staticWhite" or params.variant == "transparent" %}
@@ -75,7 +74,7 @@
     {% if params.href %}
       {% set loadingHtml = null %}
     {% endif %}
-    {% set buttonParams = { isIconButton: params.isIconButton, a11y: params.a11y, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
+    {% set buttonParams = { isIconButton: params.isIconButton, text: text, iconSvg: iconSvg, loadingHtml: loadingHtml , attributes: params.attributes } %}
     {%- if params.href %}
       <a href="{{ params.href | default('#', true) }}" {{ ariaLabel | safe }} class="{{ classes }}" {{- attributes | safe }}>
         {{ InnerButton(buttonParams) }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "29.0.0",
+  "version": "29.0.1",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",

package/preact/components/buddy-menu/buddy-menu.js

@@ -34,20 +34,14 @@ var Spinner = ({ variant = "primary", size = "large", forcePx, classNames, attri
   return /* @__PURE__ */ jsx3("span", { className: classes, ...attributes, children: /* @__PURE__ */ jsx3("span", { className: `${componentClassName}__inner` }) });
 };
 
-// ../src/foundations/a11y/visually-hidden.tsx
-import { jsx as jsx4 } from "preact/jsx-runtime";
-var VisuallyHidden = ({ text }) => {
-  return /* @__PURE__ */ jsx4("span", { className: "visually-hidden", dangerouslySetInnerHTML: { __html: text } });
-};
-
 // ../src/components/button/button-base.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "preact/jsx-runtime";
-var InnerButton = ({ text, isIconButton = false, attributes, a11y, icon, loadingHtml }) => {
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "preact/jsx-runtime";
+var InnerButton = ({ text, isIconButton = false, attributes, icon, loadingHtml }) => {
   let optionalHtml;
-  if (!isIconButton) {
-    optionalHtml = /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: text });
-  } else if (!attributes["aria-label"] && a11y?.visuallyHidden) {
-    optionalHtml = /* @__PURE__ */ jsx5(VisuallyHidden, { text: a11y.visuallyHidden });
+  if (!isIconButton && attributes["aria-label"]) {
+    optionalHtml = /* @__PURE__ */ jsx4("span", { "aria-hidden": "true", children: text });
+  } else if (!isIconButton) {
+    optionalHtml = /* @__PURE__ */ jsx4("span", { children: text });
   }
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     optionalHtml,
@@ -65,8 +59,8 @@ var ToggleWrapper = ({
   loadingHtml
 }) => {
   return /* @__PURE__ */ jsxs2("button", { type: "button", role: "switch", "aria-checked": selected, className: classes, ...attributes, disabled, children: [
-    /* @__PURE__ */ jsx5("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
-    /* @__PURE__ */ jsx5("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__off", "aria-hidden": "true", children: onChild }),
+    /* @__PURE__ */ jsx4("span", { className: "ds-btn__on", "aria-hidden": "true", children: offChild }),
     loadingHtml
   ] });
 };
@@ -86,13 +80,12 @@ var ButtonBase = ({
   attributes = {},
   forcePx = false,
   isIconButton = false,
-  a11y = {},
   selected = false,
   isToggle = false,
   selectedIconName,
   selectedText
 }) => {
-  if (text && !href && !attributes["aria-label"]) {
+  if (isIconButton && text && !attributes["aria-label"]) {
     attributes["aria-label"] = text;
   }
   let spinnerVariant = "secondary";
@@ -101,10 +94,10 @@ var ButtonBase = ({
   } else if (variant === "secondaryFilled" || variant === "secondaryOutline") {
     spinnerVariant = "primary";
   }
-  const loadingHtml = /* @__PURE__ */ jsx5(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
+  const loadingHtml = /* @__PURE__ */ jsx4(Spinner, { ...{ size: "small", variant: spinnerVariant, forcePx, attributes: { "aria-hidden": "true" } } });
   let icon;
   if (iconName && (iconPosition != "none" || isIconButton == true)) {
-    icon = /* @__PURE__ */ jsx5(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
+    icon = /* @__PURE__ */ jsx4(IconUse, { ...{ iconName, attributes: { "aria-hidden": "true" } } });
   }
   const classNamePrefix = "ds-btn--";
   const classes = formatClassString([
@@ -125,30 +118,30 @@ var ButtonBase = ({
   if (isToggle) {
     let onChild, offChild;
     if (isIconButton && iconName && selectedIconName) {
-      onChild = /* @__PURE__ */ jsx5(IconUse, { iconName });
-      offChild = /* @__PURE__ */ jsx5(IconUse, { iconName: selectedIconName });
+      onChild = /* @__PURE__ */ jsx4(IconUse, { iconName });
+      offChild = /* @__PURE__ */ jsx4(IconUse, { iconName: selectedIconName });
     } else {
-      onChild = /* @__PURE__ */ jsx5("span", { children: text });
+      onChild = /* @__PURE__ */ jsx4("span", { children: text });
       offChild = /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx5(IconUse, { iconName: "check" }),
-        /* @__PURE__ */ jsx5("span", { children: selectedText })
+        /* @__PURE__ */ jsx4(IconUse, { iconName: "check" }),
+        /* @__PURE__ */ jsx4("span", { children: selectedText })
       ] });
     }
-    buttonToRender = /* @__PURE__ */ jsx5(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
+    buttonToRender = /* @__PURE__ */ jsx4(ToggleWrapper, { ...{ selected, classes, attributes, disabled, onChild, offChild, loadingHtml } });
   } else {
-    const buttonParams = { isIconButton, a11y, text, icon, loadingHtml, attributes };
+    const buttonParams = { isIconButton, text, icon, loadingHtml, attributes };
     if (href) {
       const params = { ...buttonParams, loadingHtml: null };
-      buttonToRender = /* @__PURE__ */ jsx5("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx5(InnerButton, { ...params }) });
+      buttonToRender = /* @__PURE__ */ jsx4("a", { href, className: classes, ...attributes, children: /* @__PURE__ */ jsx4(InnerButton, { ...params }) });
     } else {
-      buttonToRender = /* @__PURE__ */ jsx5("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx5(InnerButton, { ...buttonParams }) });
+      buttonToRender = /* @__PURE__ */ jsx4("button", { type, className: classes, ...attributes, disabled, children: /* @__PURE__ */ jsx4(InnerButton, { ...buttonParams }) });
     }
   }
-  return /* @__PURE__ */ jsx5(Fragment, { children: buttonToRender });
+  return /* @__PURE__ */ jsx4(Fragment, { children: buttonToRender });
 };
 
 // ../src/components/button/button.tsx
-import { jsx as jsx6 } from "preact/jsx-runtime";
+import { jsx as jsx5 } from "preact/jsx-runtime";
 var Button = ({
   text,
   disabled = false,
@@ -166,7 +159,7 @@ var Button = ({
   attributes,
   forcePx = false
 }) => {
-  return /* @__PURE__ */ jsx6(ButtonBase, { ...{
+  return /* @__PURE__ */ jsx5(ButtonBase, { ...{
     text,
     disabled,
     variant,
@@ -186,7 +179,7 @@ var Button = ({
 };
 
 // ../src/components/buddy-menu/buddy-menu.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "preact/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "preact/jsx-runtime";
 var BuddyMenu = ({
   userName,
   links,
@@ -201,8 +194,8 @@ var BuddyMenu = ({
 }) => {
   const componentClassName = "ds-buddy-menu";
   const classes = formatClassString([componentClassName, forcePx && "ds-force-px", classNames]);
-  return /* @__PURE__ */ jsx7("div", { class: `${classes} ${isDnSkola && "ds-buddy-menu--skola"}`, ...attributes, children: /* @__PURE__ */ jsx7("div", { class: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx7("div", { class: "ds-buddy-menu__scrollable-container", children: /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__content", children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6("div", { class: `${classes} ${isDnSkola && "ds-buddy-menu--skola"}`, ...attributes, children: /* @__PURE__ */ jsx6("div", { class: `${componentClassName}__inner`, children: /* @__PURE__ */ jsx6("div", { class: "ds-buddy-menu__scrollable-container", children: /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__content", children: [
+    /* @__PURE__ */ jsx6(
       Button,
       {
         ...{
@@ -219,17 +212,17 @@ var BuddyMenu = ({
       /* @__PURE__ */ jsxs3("span", { class: "ds-buddy-menu__greeting", children: [
         "Hej",
         " ",
-        /* @__PURE__ */ jsx7("span", { class: "ds-buddy-menu__name js-buddy-menu-name", "data-name-type": "given", children: userName }),
+        /* @__PURE__ */ jsx6("span", { class: "ds-buddy-menu__name js-buddy-menu-name", "data-name-type": "given", children: userName }),
         "!"
       ] }),
       !isDnSkola && /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__account", children: [
-        /* @__PURE__ */ jsx7("h2", { class: "ds-buddy-menu__account-title", children: "Min prenumeration" }),
-        /* @__PURE__ */ jsx7("span", { class: "ds-buddy-menu__account-level js-buddy-menu__account-level", children: accountLevel }),
+        /* @__PURE__ */ jsx6("h2", { class: "ds-buddy-menu__account-title", children: "Min prenumeration" }),
+        /* @__PURE__ */ jsx6("span", { class: "ds-buddy-menu__account-level js-buddy-menu__account-level", children: accountLevel }),
         addons && /* @__PURE__ */ jsxs3("div", { class: `ds-buddy-menu__addons ${addonsClassNames}`, children: [
-          /* @__PURE__ */ jsx7("h2", { class: "ds-buddy-menu__addons-title", children: "Mina till\xE4gg" }),
-          /* @__PURE__ */ jsx7("ul", { class: "ds-buddy-menu__addons-list", children: addons.map((addon) => /* @__PURE__ */ jsx7("li", { class: addon.classNames, children: /* @__PURE__ */ jsx7("a", { href: addon.href, children: addon.title }) })) })
+          /* @__PURE__ */ jsx6("h2", { class: "ds-buddy-menu__addons-title", children: "Mina till\xE4gg" }),
+          /* @__PURE__ */ jsx6("ul", { class: "ds-buddy-menu__addons-list", children: addons.map((addon) => /* @__PURE__ */ jsx6("li", { class: addon.classNames, children: /* @__PURE__ */ jsx6("a", { href: addon.href, children: addon.title }) })) })
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           Button,
           {
             ...{
@@ -246,8 +239,8 @@ var BuddyMenu = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxs3("div", { class: "ds-buddy-menu__links", children: [
-      /* @__PURE__ */ jsx7("h2", { class: "ds-buddy-menu__links-title", children: "Mitt inneh\xE5ll" }),
-      /* @__PURE__ */ jsx7("ul", { class: "ds-buddy-menu__links-list", children: links })
+      /* @__PURE__ */ jsx6("h2", { class: "ds-buddy-menu__links-title", children: "Mitt inneh\xE5ll" }),
+      /* @__PURE__ */ jsx6("ul", { class: "ds-buddy-menu__links-list", children: links })
     ] })
   ] }) }) }) });
 };