From fcdc7533e03f3836ebfe32a1917e5d0ec367fe4b Mon Sep 17 00:00:00 2001 From: vikas-cldcvr Date: Tue, 27 Feb 2024 19:54:54 +0530 Subject: [PATCH] FDS-290 aria-placeholder support added --- .../src/components/f-date-time-picker/f-date-time-picker.ts | 1 + .../flow-core/src/components/f-emoji-picker/f-emoji-picker.ts | 1 + .../flow-core/src/components/f-file-upload/f-file-upload.ts | 1 + packages/flow-core/src/components/f-icon/f-icon.ts | 1 + packages/flow-core/src/components/f-input/f-input-light.ts | 1 + packages/flow-core/src/components/f-input/f-input.ts | 1 + packages/flow-core/src/components/f-search/f-search.ts | 1 + packages/flow-core/src/components/f-select/f-select.ts | 1 + packages/flow-core/src/components/f-suggest/f-suggest.ts | 1 + packages/flow-core/src/components/f-text-area/f-text-area.ts | 1 + packages/flow-core/src/mixins/components/f-root/f-root.ts | 4 ++++ .../flow-form-builder/src/modules/validation/validator.ts | 2 ++ stories/flow-core/f-color-picker.stories.ts | 1 + 13 files changed, 17 insertions(+) diff --git a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts b/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts index 483c22865..90d31de19 100644 --- a/packages/flow-core/src/components/f-date-time-picker/f-date-time-picker.ts +++ b/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 | Map): void { super.willUpdate(changedProperties); this.role = "textbox"; + if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder); } render() { diff --git a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts b/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts index 4a1777e29..55235cfd9 100644 --- a/packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts +++ b/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 | Map): 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 diff --git a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts b/packages/flow-core/src/components/f-file-upload/f-file-upload.ts index ce1d6c694..f88bb43ed 100644 --- a/packages/flow-core/src/components/f-file-upload/f-file-upload.ts +++ b/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() { diff --git a/packages/flow-core/src/components/f-icon/f-icon.ts b/packages/flow-core/src/components/f-icon/f-icon.ts index 85b16d253..ebac55951 100644 --- a/packages/flow-core/src/components/f-icon/f-icon.ts +++ b/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() { diff --git a/packages/flow-core/src/components/f-input/f-input-light.ts b/packages/flow-core/src/components/f-input/f-input-light.ts index acb7da9c5..e612e1bf8 100644 --- a/packages/flow-core/src/components/f-input/f-input-light.ts +++ b/packages/flow-core/src/components/f-input/f-input-light.ts @@ -157,6 +157,7 @@ export class FInputLight extends FInputBase { protected willUpdate(changedProperties: PropertyValueMap | Map): void { super.willUpdate(changedProperties); this.role = "textbox"; + if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder); } render() { diff --git a/packages/flow-core/src/components/f-input/f-input.ts b/packages/flow-core/src/components/f-input/f-input.ts index f90f95525..b0bbdcc44 100644 --- a/packages/flow-core/src/components/f-input/f-input.ts +++ b/packages/flow-core/src/components/f-input/f-input.ts @@ -72,6 +72,7 @@ export class FInput extends FInputBase { protected willUpdate(changedProperties: PropertyValueMap | Map): void { super.willUpdate(changedProperties); this.role = "textbox"; + if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder); } render() { diff --git a/packages/flow-core/src/components/f-search/f-search.ts b/packages/flow-core/src/components/f-search/f-search.ts index d5584bef1..b487e7647 100644 --- a/packages/flow-core/src/components/f-search/f-search.ts +++ b/packages/flow-core/src/components/f-search/f-search.ts @@ -333,6 +333,7 @@ export class FSearch extends FRoot { protected willUpdate(changedProperties: PropertyValueMap | Map): void { super.willUpdate(changedProperties); this.role = "search"; + if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder); } render() { return html` | Map): void { super.willUpdate(changedProperties); this.role = "listbox"; + if (this.placeholder) this.setAttribute("aria-placeholder", this.placeholder); } /** * apply styling to f-select options wrapper. diff --git a/packages/flow-core/src/components/f-suggest/f-suggest.ts b/packages/flow-core/src/components/f-suggest/f-suggest.ts index 0579e1df0..8273f6eac 100644 --- a/packages/flow-core/src/components/f-suggest/f-suggest.ts +++ b/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() { diff --git a/packages/flow-core/src/components/f-text-area/f-text-area.ts b/packages/flow-core/src/components/f-text-area/f-text-area.ts index 6bdd476d6..642c11a22 100644 --- a/packages/flow-core/src/components/f-text-area/f-text-area.ts +++ b/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 : ""; diff --git a/packages/flow-core/src/mixins/components/f-root/f-root.ts b/packages/flow-core/src/mixins/components/f-root/f-root.ts index 1f30b96fd..96ee744ab 100644 --- a/packages/flow-core/src/mixins/components/f-root/f-root.ts +++ b/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); diff --git a/packages/flow-form-builder/src/modules/validation/validator.ts b/packages/flow-form-builder/src/modules/validation/validator.ts index 2df46dc78..3f5eb5c18 100644 --- a/packages/flow-form-builder/src/modules/validation/validator.ts +++ b/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") { diff --git a/stories/flow-core/f-color-picker.stories.ts b/stories/flow-core/f-color-picker.stories.ts index 4ebecef61..fe57333a5 100644 --- a/stories/flow-core/f-color-picker.stories.ts +++ b/stories/flow-core/f-color-picker.stories.ts @@ -13,6 +13,7 @@ export default { export const Playground = { render: (args: Record) => { return html`