FDS-290 aria-placeholder support added

packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts

@@ -339,6 +339,7 @@ export class FDateTimePicker extends FRoot {
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.willUpdate(changedProperties);
 		this.role = "textbox";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 
 	render() {

packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts

@@ -395,6 +395,7 @@ export class FEmojiPicker extends FRoot {
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.willUpdate(changedProperties);
 		this.role = "textbox";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 		if (!changedProperties.has("value") || !this.picker) {
 			/**
 			 * initiate picker component

packages/flow-core/src/components/f-file-upload/f-file-upload.ts

@@ -416,6 +416,7 @@ export class FFileUpload extends FRoot {
 		super.willUpdate(changedProperties);
 		this.role = "button";
 		this.tabIndex = 0;
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 
 	render() {

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

@@ -186,6 +186,7 @@ export class FIcon extends FRoot {
 		this.role = "img";
 		if (!this.getAttribute("aria-label"))
 			this.setAttribute("aria-label", "" + this._originalSource);
+		this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
 	}
 
 	render() {

packages/flow-core/src/components/f-input/f-input-light.ts

@@ -157,6 +157,7 @@ export class FInputLight extends FInputBase {
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.willUpdate(changedProperties);
 		this.role = "textbox";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 
 	render() {

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

@@ -72,6 +72,7 @@ export class FInput extends FInputBase {
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.willUpdate(changedProperties);
 		this.role = "textbox";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 
 	render() {

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

@@ -333,6 +333,7 @@ export class FSearch extends FRoot {
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.willUpdate(changedProperties);
 		this.role = "search";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 	render() {
 		return html` <f-div

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

@@ -326,6 +326,7 @@ export class FSelect extends FRoot {
 	protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
 		super.willUpdate(changedProperties);
 		this.role = "listbox";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 	/**
 	 * apply styling to f-select options wrapper.

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

@@ -414,6 +414,7 @@ export class FSuggest extends FRoot {
 		}
 		super.willUpdate(changedProperties);
 		this.role = "textbox";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 
 	render() {

packages/flow-core/src/components/f-text-area/f-text-area.ts

@@ -177,6 +177,7 @@ export class FTextArea extends FRoot {
 		super.willUpdate(changedProperties);
 		this.role = "textbox";
 		this.ariaMultiLine = "true";
+		if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder);
 	}
 	render() {
 		const parentDiv = this.parentElement?.tagName === "F-DIV" ? this.parentElement : "";

packages/flow-core/src/mixins/components/f-root/f-root.ts

@@ -86,6 +86,10 @@ export class FRoot extends LitElement {
 				this.setAttribute("aria-describedby", "flow-tooltip");
 			}
 		}
+
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		//@ts-ignore
+		this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
 	}
 	protected updated(changedProperties: PropertyValues) {
 		super.updated(changedProperties);

packages/flow-form-builder/src/modules/validation/validator.ts

@@ -163,8 +163,10 @@ export async function validateField(
 			if (!silent) {
 				updateMessage(element, message, field, "data-qa-error-for");
 				element.state = "danger";
+				element.setAttribute("aria-invalid", "true");
 			}
 		} else {
+			element.setAttribute("aria-invalid", "false");
 			const helpSlot = element.querySelector("[slot='help']");
 			if (field.helperText) {
 				if (typeof field.helperText === "string") {

stories/flow-core/f-color-picker.stories.ts

@@ -13,6 +13,7 @@ export default {
 export const Playground = {
 	render: (args: Record<string, unknown>) => {
 		return html`<f-color-picker
+			aria-label="Color Picker"
 			.variant=${args.variant}
 			.state=${args.state}
 			.size=${args.size}