Accessability improvements

- Toolbar buttons get label, but it is visually hidden
- Add label to calendar Add button

api/js/etemplate/Et2Button/ButtonMixin.ts

@@ -70,6 +70,12 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
             :host([hideonreadonly][disabled]) {
             	display:none !important;
             }
+
+			/* Leave label there for accessability, but position it so it can't be seen */
+			:host(.imageOnly) .button__label {
+				position: absolute;
+				left: -999px
+			}
             
             /* Set size for icon */
             ::slotted(img.imageOnly) {

api/js/etemplate/Et2Switch/Et2Switch.ts

@@ -107,27 +107,6 @@ export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch))
 
 	}
 
-	get label()
-	{
-		return this._labelNode?.textContent || "";
-	}
-
-	set label(label_text)
-	{
-		if(this._labelNode)
-		{
-			this._labelNode.textContent = label_text;
-		}
-		else
-		{
-			this.updateComplete.then(() =>
-			{
-				this.label = label_text;
-			})
-		}
-	}
-
-
 	set value(new_value : string | boolean)
 	{
 		this.requestUpdate("checked");
@@ -160,7 +139,7 @@ export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch))
 	labelTemplate()
 	{
 		return html`
-			<span class="label">
+            <span class="label" aria-label="${this.label}">
 				<span class="on"></span>
 				<span class="off"></span>
 			</span>

api/js/etemplate/et2_widget_toolbar.ts

@@ -624,6 +624,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 		{
 			widget = <Et2Checkbox>loadWebComponent('et2-switch', {
 				id: `${this.id}-${action.id}`,
+				label: action.caption,
 				toggleOn: action.data.toggle_on,
 				toggleOff: action.data.toggle_off,
 				class: `et2_toolbar_draggable${this.id}`,
@@ -638,6 +639,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 			widget = <Et2Button>loadWebComponent(egwIsMobile() && !this.preference[action.id]?"et2-button-icon":"et2-button", {
 				id: `${this.id}-${action.id}`,
 				image: action.iconUrl || '',
+				label: action.caption,
 				slot: "buttons",
 				class: `et2_toolbar_draggable${this.id}`,
 				readonly: false
@@ -657,8 +659,7 @@ export class et2_toolbar extends et2_DOMWidget implements et2_IInput
 				this.preference[action.id] || !action.iconUrl)	&&
 				!(isCheckbox && isToggleSwitch)) // no caption for slideswitch checkboxes
 			{
-				widget.classList.add(action.iconUrl?'et2_toolbar_hasCaption':'et2_toolbar_onlyCaption');
+				widget.classList.add(action.iconUrl ? 'et2_toolbar_hasCaption' : 'et2_toolbar_onlyCaption');
-				widget.label = action.caption;
 			}
 		}
 	}

api/templates/default/etemplate2.css

@@ -2772,6 +2772,12 @@ table.egwGridView_outer thead tr th.noResize:hover {
 .et2_toolbar .et2_toolbar_actionlist et2-button.et2_toolbar_onlyCaption::part(prefix) {
     width: auto;
 }
+
+.et2_toolbar .et2_toolbar_actionlist et2-button.et2_toolbar_onlyCaption::part(label) {
+    position: absolute;
+    left: -999px;
+}
+
 div.et2_toolbar.ui-widget-header {
     background: none;
 }

calendar/templates/default/toolbar.xet

@@ -15,8 +15,9 @@ Egroupware
 	<template id="calendar.toolbar">
 		<box>
 			<box class="et2_toolbar_actionlist">
-				<buttononly id="add" background_image="true" image="add" onclick="app.calendar.toolbar_action(widget);"/>
+                <buttononly id="add" background_image="true" image="add" class="imageOnly" label="add new event"
-			</box>
+                            onclick="app.calendar.toolbar_action(widget);"/>
+            </box>
 		</box>
 		<searchbox id="keywords" blur="Search" overlay="false" onchange="app.calendar.update_state({view: 'listview',search: widget.getValue()});return false;"/>
 		<toolbar id="toolbar" width="100%" flat_list="false"/>