@schukai/monster 3.100.4 → 3.100.6

package/source/components/form/message-state-button.mjs

@@ -20,7 +20,7 @@ import {
 } from "../../dom/customelement.mjs";
 import { isArray, isString } from "../../types/is.mjs";
 import { validateString } from "../../types/validate.mjs";
-import { Popper } from "./popper.mjs";
+import { Popper } from "../layout/popper.mjs";
 import { MessageStateButtonStyleSheet } from "./stylesheet/message-state-button.mjs";
 import { StateButtonStyleSheet } from "./stylesheet/state-button.mjs";
 import "./state-button.mjs";
@@ -95,9 +95,15 @@ class MessageStateButton extends Popper {
 	 *
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
-	 * @property {Object} labels Label definitions
+	 * @property {Object} message Message definition
+	 * @property {string|HTMLElement} message.content The message content
+	 * @property {string} message.title The message title
+	 * @property {string} message.icon The message icon
+	 * @property {string} mode The mode of the button
 	 * @property {string} labels.button Button label
-	 * @property {Object} mode Mode definitions (manual, submit)
+	 * @property {boolean} features.disableButton Disable the button
+	 * @property {Object} aria Aria attributes
+	 * @property {string} aria.role Aria role, only if the button is not a button
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -122,10 +128,16 @@ class MessageStateButton extends Popper {
 			features: {
 				disableButton: false,
 			},
+
+			aria: {
+				role: null,
+				label: null,
+			},
 		});
 	}
 
 	/**
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -150,7 +162,6 @@ class MessageStateButton extends Popper {
 			initEventHandlerByMode.call(this, mode);
 		}
 
-		return this;
 	}
 
 	/**
@@ -286,7 +297,7 @@ class MessageStateButton extends Popper {
 
 	/**
 	 *
-	 * @return {Array<CSSStyleSheet>}
+	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
 		const styles = Popper.getCSSStyleSheet();
@@ -391,14 +402,17 @@ function getTemplate() {
         <div data-monster-role="control" part="control">
 
             <monster-state-button exportparts="button:button-button,control:button-control"
-                                  data-monster-attributes="data-monster-option-classes-button path:classes.button, disabled path:features.disableButton | if:true"
+                                  data-monster-attributes="
+                                       data-monster-option-classes-button path:classes.button, 
+                                       data-monster-option-aria-role path:aria.role,
+                                       data-monster-option-aria-label path:aria.label,
+                                       disabled path:features.disableButton | if:true"
                                   part="button"
                                   name="button"
                                   data-monster-role="button">
                 <span data-monster-replace="path:labels.button"></span>
             </monster-state-button>
 
-
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
                 <div data-monster-role="arrow"></div>
                 <div data-monster-role="message" part="message" class="flex"

package/source/components/form/popper-button.mjs

@@ -13,9 +13,7 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
 import {
-	ATTRIBUTE_ERRORMESSAGE,
 	ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
 import {
@@ -25,7 +23,7 @@ import {
 import { getDocument } from "../../dom/util.mjs";
 import { isFunction } from "../../types/is.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { Popper } from "./popper.mjs";
+import { Popper } from "../layout/popper.mjs";
 import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
 import { PopperButtonStyleSheet } from "./stylesheet/popper-button.mjs";
 import { positionPopper } from "./util/floating-ui.mjs";
@@ -80,51 +78,6 @@ const popperElementSymbol = Symbol("popperElement");
  */
 const arrowElementSymbol = Symbol("arrowElement");
 
-/**
- * This action callback executes the actions when a button is clicked.
- *
- * @callback Monster.Components.Form~exampleActionCallback
- * @param {Event} e Event
- * @this {CustomControl}
- */
-
-/**
- * The PopperButton is a button that opens a popper element.
- *
- * <img src="./images/popper-button.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- * as well as [pooperjs](https://popper.js.org/docs/v2/).
- *
- * You can create this control either by specifying the HTML tag <monster-popper-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-popper-button');` method.
- *
- * ```html
- * <monster-popper-button></monster-popper-button>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {PopperButton} from '@schukai/component-form/source/popper-button.js';
- * document.createElement('monster-popper-button');
- * ```
- *
- * The `data-monster-option-classes-button` attribute can be used to change the CSS class of the button.
- *
- * @startuml popper-button.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Popper
- * Popper <|-- PopperButton
- * @enduml
- *
- * @copyright schukai GmbH
- * @summary A popper button
- */
-
 /**
  * A beautiful popper button that can make your life easier and also looks good.
  *
@@ -158,13 +111,19 @@ class PopperButton extends Popper {
 	 *
 	 * The individual configuration values can be found in the table.
 	 *
-	 * @property {Object} templates - The templates for the control.
-	 * @property {string} templates.main - The main template.
-	 * @property {object} labels - The labels for the control.
-	 * @property {string} labels.button - The label for the button.
-	 * @property {string} content - The content of the popper.
-	 * @property {object} popper - The popper options.
-	 * @extends {Button.defaults}
+	 * @property {Object} templates The templates for the control.
+	 * @property {string} templates.main The main template.
+	 * @property {Object} actions The actions for the control.
+	 * @property {Function} actions.click The click action.
+	 * @property {Object} classes The classes for the control.
+	 * @property {string} classes.button The button class.
+	 * @property {Object} labels The labels for the control.
+	 * @property {string} labels.button The button label.
+	 * @property {string} mode The mode of the control.
+	 * @property {string} value The value of the control.
+	 * @property {Object} aria The aria attributes for the control.
+	 * @property {string} aria.role The role of the control, only if the control is not a button.
+	 * @property {string} aria.label The label of the control.
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -184,19 +143,25 @@ class PopperButton extends Popper {
 			},
 			mode: "click",
 			value: null,
+
+			aria: {
+				role: null,
+				label: null,
+			},
+
 		});
 	}
 
 	/**
 	 *
-	 * @return {Monster.Components.Form.PopperButton}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 
-		return this;
+		return;
 	}
 
 	/**
@@ -443,7 +408,10 @@ function getTemplate() {
             <button data-monster-attributes="disabled path:disabled | if:true, class path:classes.button"
                     data-monster-role="button"
                     part="button"
+					aria-labelledby="monster-popper-button-aria-label"
                     data-monster-replace="path:labels.button"></button>
+			<div id="monster-popper-button-aria-label"
+				 class="visually-hidden" data-monster-replace="path:aria.label">click me</div>
 
             <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
                 <div data-monster-role="arrow"></div>