@weahead/consent-manager - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

dist/components/Buttons/Button/Toggle/index.d.ts

 import React from 'react';
 import type { ToggleButtonProps } from '../../../../types/Button';
 import './style.css';
-export default function ToggleButton({ cookieName, disabled, }: ToggleButtonProps): React.JSX.Element;
+export default function ToggleButton({ cookieName, ariaLabel, disabled, }: ToggleButtonProps): React.JSX.Element;

dist/components/Buttons/Button/Toggle/index.js

@@ -10,3 +10,3 @@ "use strict";
 function ToggleButton(_a) {
-    var cookieName = _a.cookieName, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
+    var cookieName = _a.cookieName, ariaLabel = _a.ariaLabel, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
     var _c = (0, useConstentManagerContext_1["default"])(), actions = _c.actions, cookies = _c.cookies, _d = cookieName, active = _c[_d];
@@ -20,3 +20,3 @@ function triggerToggle() {
     var toggleClassNames = "toggle ".concat(active ? 'toggle--check' : '', " ").concat(disabled || (cookies === null || cookies === void 0 ? void 0 : cookies[cookieName]) ? 'toggle--disabled' : '').trim();
-    return (react_1["default"].createElement("div", { className: toggleClassNames, id: "toggle", onClick: triggerToggle },
+    return (react_1["default"].createElement("button", { className: toggleClassNames, id: "toggle", onClick: triggerToggle, "aria-pressed": cookies === null || cookies === void 0 ? void 0 : cookies[cookieName], "aria-disabled": disabled || (cookies === null || cookies === void 0 ? void 0 : cookies[cookieName]), "aria-label": ariaLabel },
         react_1["default"].createElement("div", { className: "toggle-container", id: "toggle-container" },
@@ -23,0 +23,0 @@ react_1["default"].createElement("div", { id: "toggle-check", className: "toggle-check" }),

dist/components/Modal/Header/Content.js

@@ -15,4 +15,4 @@ "use strict";
     }
-    return (react_1["default"].createElement("div", { className: "consent-text", dangerouslySetInnerHTML: { __html: content } }));
+    return (react_1["default"].createElement("div", { id: "consentModalContent", className: "consent-text", dangerouslySetInnerHTML: { __html: content } }));
 }
 exports["default"] = Content;

dist/components/Modal/Header/index.js

@@ -12,5 +12,5 @@ "use strict";
     return (react_1["default"].createElement("header", { className: "consent-header" },
-        react_1["default"].createElement("h3", { className: "consent-heading" }, title),
+        react_1["default"].createElement("h3", { className: "consent-heading", id: "consentModalTitle" }, title),
         react_1["default"].createElement(Content_1["default"], { content: content, settingsContent: settingsContent })));
 }
 exports["default"] = Header;

dist/components/Modal/Modal.js

@@ -8,2 +8,3 @@ "use strict";
 var react_customizable_modal_1 = require("@weahead/react-customizable-modal");
+var useConstentManagerContext_1 = __importDefault(require("../../hooks/useConstentManagerContext"));
 var Buttons_1 = __importDefault(require("../Buttons"));
@@ -17,10 +18,12 @@ var Header_1 = __importDefault(require("./Header"));
     var analyticsLabel = _a.analyticsLabel, approveAllLabel = _a.approveAllLabel, approveLabel = _a.approveLabel, content = _a.content, externalLabel = _a.externalLabel, functionLabel = _a.functionLabel, moreSettingsLabel = _a.moreSettingsLabel, settingsContent = _a.settingsContent, title = _a.title, revokeLabel = _a.revokeLabel, policyLinkLabel = _a.policyLinkLabel, linkUrl = _a.linkUrl, requiredText = _a.requiredText;
+    var showCookieSettings = (0, useConstentManagerContext_1["default"])().showCookieSettings;
+    var modalRef = (0, react_customizable_modal_1.useTrapFocus)();
     return (react_1["default"].createElement(react_customizable_modal_1.ModalPortal, { id: "consent-portal" },
         react_1["default"].createElement(Overlay_1["default"], null,
-            react_1["default"].createElement("div", { className: "consent-modal" },
+            react_1["default"].createElement("div", { className: "consent-modal", ref: modalRef, role: "dialog", "aria-labelledby": "consentModalTitle", "aria-describedby": "consentModalContent", "aria-modal": "true" },
                 react_1["default"].createElement(Header_1["default"], { content: content, settingsContent: settingsContent, title: title }),
                 react_1["default"].createElement(PolicyLink_1["default"], { policyLinkLabel: policyLinkLabel, linkUrl: linkUrl }),
-                react_1["default"].createElement(Content_1["default"], { requiredText: requiredText, analyticsLabel: analyticsLabel, externalLabel: externalLabel, functionLabel: functionLabel }),
+                showCookieSettings ? (react_1["default"].createElement(Content_1["default"], { requiredText: requiredText, analyticsLabel: analyticsLabel, externalLabel: externalLabel, functionLabel: functionLabel })) : null,
                 react_1["default"].createElement(Buttons_1["default"], { approveAllLabel: approveAllLabel, approveLabel: approveLabel, moreSettingsLabel: moreSettingsLabel, revokeLabel: revokeLabel })))));
 }
 exports["default"] = ConsentModal;

dist/components/Modal/Settings/Content.js

@@ -8,3 +8,2 @@ "use strict";
 var keys_1 = require("../../../helpers/keys");
-var useConstentManagerContext_1 = __importDefault(require("../../../hooks/useConstentManagerContext"));
 var Required_1 = __importDefault(require("../../Buttons/Button/Toggle/Required"));
@@ -15,6 +14,2 @@ var Toggle_1 = __importDefault(require("../../Buttons/Button/Toggle"));
     var analyticsLabel = _a.analyticsLabel, externalLabel = _a.externalLabel, functionLabel = _a.functionLabel, requiredText = _a.requiredText;
-    var showCookieSettings = (0, useConstentManagerContext_1["default"])().showCookieSettings;
-    if (!showCookieSettings) {
-        return null;
-    }
     return (react_1["default"].createElement("div", { className: "consent-more-settings" },
@@ -26,7 +21,7 @@ react_1["default"].createElement("div", { className: "consent-toggle" },
             react_1["default"].createElement("span", { className: "consent-toggle-text" }, analyticsLabel),
-            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.analyticsKey })),
+            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.analyticsKey, ariaLabel: analyticsLabel })),
         react_1["default"].createElement("div", { className: "consent-toggle" },
             react_1["default"].createElement("span", { className: "consent-toggle-text" }, externalLabel),
-            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.externalKey }))));
+            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.externalKey, ariaLabel: externalLabel }))));
 }
 exports["default"] = SettingsContent;

dist/types/Button.d.ts

@@ -5,2 +5,3 @@ import type { PropsWithChildren } from 'react';
     disabled?: boolean;
+    ariaLabel: string;
 };
@@ -7,0 +8,0 @@ export declare type RequiredToggleProps = {

package.json

 {
   "name": "@weahead/consent-manager",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "author": "Weahead AB <[e-mail]>",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

src/types/Button.ts

@@ -6,2 +6,3 @@ import type { PropsWithChildren } from 'react'
   disabled?: boolean
+  ariaLabel: string
 }
@@ -8,0 +9,0 @@

No alert changes

Improved metrics

Total package byte prevSize

87763

increased by1.29%

Lines of code

2267

increased by0.89%

No dependency changes