FDS-290 f-accordion f-switch f-cion-button accessibility

packages/flow-core/src/components/f-accordion/f-accordion.ts

@@ -1,10 +1,10 @@
-import { html, PropertyValueMap, unsafeCSS } from "lit";
+import { html, nothing, PropertyValueMap, unsafeCSS } from "lit";
 import { property, query } from "lit/decorators.js";
 import eleStyle from "./f-accordion.scss?inline";
 import globalStyle from "./f-accordion-global.scss?inline";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import { FDiv, FDivPaddingProp } from "../f-div/f-div";
-import { flowElement } from "./../../utils";
+import { flowElement, generateId } from "./../../utils";
 import { injectCss } from "@ollion/flow-core-config";
 
 injectCss("f-accordion", globalStyle);
@@ -79,6 +79,14 @@ export class FAccordion extends FRoot {
 	@query(".f-accordion-header")
 	fAccordionHeader?: FDiv;
 
+	constructor() {
+		super();
+		this.headerId = generateId();
+		this.contentId = generateId();
+	}
+	// dynamic ids to assign to header and content
+	headerId!: string;
+	contentId!: string;
 	/**
 	 * identify icon-name from string
 	 */
@@ -167,6 +175,7 @@ export class FAccordion extends FRoot {
 		return html`
 			<f-div direction="column" width="100%">
 				<f-div
+					id="${this.headerId}"
 					height="hug-content"
 					@click=${this.toggleAccordion}
 					align="middle-left"
@@ -176,14 +185,17 @@ export class FAccordion extends FRoot {
 					part="accordion-header"
 					.padding=${this.headerPadding}
 					clickable
+					role="button"
 					@mouseenter=${() => this.stateChange("enter")}
 					@mouseleave=${() => this.stateChange("leave")}
+					aria-expanded="${this.open ? "true" : "false"}"
+					aria-controls="${this.contentId}"
 				>
-					${this.icon !== "none" && this.iconPlacement === "left" ? accordionIcon : ""}
+					${this.icon !== "none" && this.iconPlacement === "left" ? accordionIcon : nothing}
 					<f-div>
 						<slot></slot>
 					</f-div>
-					${this.icon !== "none" && this.iconPlacement === "right" ? accordionIcon : ""}
+					${this.icon !== "none" && this.iconPlacement === "right" ? accordionIcon : nothing}
 				</f-div>
 				<f-div
 					class="f-accordion"
@@ -192,6 +204,10 @@ export class FAccordion extends FRoot {
 					direction="column"
 					.padding=${this.bodyPadding}
 					overflow="hidden"
+					id="${this.contentId}"
+					role="region"
+					aria-labelledby="${this.headerId}"
+					tabindex="0"
 				>
 					<slot name="body"></slot>
 				</f-div>

packages/flow-core/src/components/f-icon-button/f-icon-button.ts

@@ -21,9 +21,9 @@ const variants = ["round", "curved", "block"] as const;
 const categories = ["fill", "outline", "transparent", "packed"] as const;
 const sizes = ["large", "medium", "small", "x-small"] as const;
 
-export type FIconButtonVariant = (typeof variants)[number];
-export type FIconButtonType = (typeof categories)[number];
-export type FIconButtonSize = (typeof sizes)[number];
+export type FIconButtonVariant = typeof variants[number];
+export type FIconButtonType = typeof categories[number];
+export type FIconButtonSize = typeof sizes[number];
 export type FIconButtonState =
 	| "primary"
 	| "danger"
@@ -117,6 +117,13 @@ export class FIconButton extends FRoot {
 	@query("f-counter")
 	counterElement?: FCounter;
 
+	constructor() {
+		super();
+		this.role = "button";
+		this.tabIndex = 0;
+		this.setAttribute("focusable", "");
+	}
+
 	/**
 	 * compute counter size based on button size
 	 */
@@ -269,6 +276,8 @@ export class FIconButton extends FRoot {
 			?counter=${this.counter}
 			?disabled=${this.disabled}
 			?loading=${this.loading}
+			label="Icon-${this.icon}"
+			aria-label="Icon-${this.icon}"
 			data-qa-id=${this.getAttribute("data-qa-element-id")}
 		>
 			${this.loading ? unsafeSVG(loader) : ""}
@@ -282,8 +291,8 @@ export class FIconButton extends FRoot {
 					"fill-button-surface-input": this.iconInputClass ? true : false
 				})}
 				?clickable=${this.variant === "block"}
-			></f-icon>
-			${counter}
+			></f-icon
+			>${counter}
 		</button>`;
 	}
 
@@ -294,6 +303,8 @@ export class FIconButton extends FRoot {
 		 */
 		this.iconElement.requestUpdate();
 		this.counterElement?.requestUpdate();
+		if (!this.getAttribute("aria-label")) this.setAttribute("aria-label", this.icon);
+		if (!this.getAttribute("title")) this.setAttribute("title", this.icon);
 	}
 }
 

packages/flow-core/src/components/f-switch/f-switch.ts

@@ -16,6 +16,11 @@ export type FSwitchCustomEvent = {
 
 @flowElement("f-switch")
 export class FSwitch extends FRoot {
+	constructor() {
+		super();
+		this.role = "switch";
+	}
+
 	/**
 	 * css loaded from scss file
 	 */
@@ -132,6 +137,7 @@ export class FSwitch extends FRoot {
 			>
 				<label class="f-switch" size=${this.size} state=${this.state}>
 					<input
+						style="visibility: hidden;"
 						type="checkbox"
 						data-qa-id=${this.getAttribute("data-qa-element-id")}
 						checked=${this.value}
@@ -154,6 +160,12 @@ export class FSwitch extends FRoot {
 		if (!this.hasLabel && !this.hasIconTooltip && !this.hasSubtitle) {
 			this.switchSlots.style.display = "none";
 		}
+
+		if (this.value) {
+			this.setAttribute("aria-checked", "true");
+		} else {
+			this.setAttribute("aria-checked", "false");
+		}
 	}
 }
 

packages/flow-core/src/utils/index.ts

@@ -9,7 +9,7 @@ import flowElement from "./flow-element";
 import getExtensionsFromMimeType from "./mime-extension-map";
 
 function generateId(length = 5) {
-	const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+	const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
 	const randomValues = new Uint32Array(length);
 	let randomString = "";
 

stories/flow-core/f-switch.stories.js

@@ -33,6 +33,9 @@ export const Playground = {
 					tooltip="This is switch"
 					@input=${handleInput}
 				>
+					<f-div slot="label" padding="none">
+						<f-text variant="para" size="small">Switch Label</f-text>
+					</f-div>
 				</f-switch>
 			</f-div>
 		`;