refactor(progress-indicator): update to follow best practices (#294)

* retoctor(progress-indicator): update structure * fix: remove described by * refactor(skeleton): rewrite the skeleton to follow best practices and improve dx (#295) * feat(rate-slider): add rate slider component (#296) * refactor(notice): update structure and sync with design (#282) * refactor(notice): tokenize css styles * docs(demo): update notice element config * refactor(notice): extract constants to a seprate file * refactor(notice): extract events to a seprate file * docs(jsdoc): update notice jsdoc * fix: update notice dissmiss file * refactor(toast): remove toast component and merge it with the notice component * fix(notice): change the title colors in low priority * fix(notice): set bubble to false in dismiss event * fix(notice): render description using slot instead of string property * fix(notice): set default internal token values in host * refactor(notice): use named slot for description instead of default slot * refactor(button): expose custom tokens for button color, background color and overlay color * fix(playground): reset * chore(notide): update event type * fix(notice): hide icons for screen readers * docs(notice): update jsdoc * fix(notice): make action buttons gray in the disabled state * fix: add jsdoc to all of public methods * fix: update components jsdoc * fix: update logs * resolve commetns * fixed * done --------- Co-authored-by: mimshins <[email protected]> * refactor(spinner): rewrite to follow best bractices (#293) * refactor(spinner): update component structure * refactor(base-button): update spinner props * refactor(skeleton): rewrite the skeleton to follow best practices and improve dx (#295) * feat(rate-slider): add rate slider component (#296) * refactor(notice): update structure and sync with design (#282) * refactor(notice): tokenize css styles * docs(demo): update notice element config * refactor(notice): extract constants to a seprate file * refactor(notice): extract events to a seprate file * docs(jsdoc): update notice jsdoc * fix: update notice dissmiss file * refactor(toast): remove toast component and merge it with the notice component * fix(notice): change the title colors in low priority * fix(notice): set bubble to false in dismiss event * fix(notice): render description using slot instead of string property * fix(notice): set default internal token values in host * refactor(notice): use named slot for description instead of default slot * refactor(button): expose custom tokens for button color, background color and overlay color * fix(playground): reset * chore(notide): update event type * fix(notice): hide icons for screen readers * docs(notice): update jsdoc * fix(notice): make action buttons gray in the disabled state * fix: add jsdoc to all of public methods * fix: update components jsdoc * fix: update logs * resolve commetns * fixed * done --------- Co-authored-by: mimshins <[email protected]> * update!!! --------- Co-authored-by: Mostafa Shamsitabar <[email protected]> Co-authored-by: mimshins <[email protected]> * remove this shit! * update!! --------- Co-authored-by: Mostafa Shamsitabar <[email protected]> Co-authored-by: mimshins <[email protected]>
Tap30 · Dec 11, 2024 · d3394cf · d3394cf
1 parent 2e1dabb
commit d3394cf
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 191 deletions.
diff --git a/packages/web-components/src/progress-indicator/index.ts b/packages/web-components/src/progress-indicator/index.ts
@@ -3,19 +3,23 @@ import { ProgressIndicator } from "./progress-indicator.js";
 import styles from "./progress-indicator.style.js";
 
 /**
- * ### Example
  * @summary A progress indicator component displaying multiple steps.
  *
- * @prop {number} [max=2] - The total number of steps.
- * @prop {number} [current=0] - The current step index.
+ * @tag tap-progress-indicator
  *
- * @csspart [progressbar] - The container for the progress bar.
- * @csspart [step] - Each individual step in the progress bar.
+ * @prop {string} [steps="2"] -
+ * The total number of steps.
+ * Defaults to "2".
+ * @prop {string} [current="0"] -
+ * The current step index.
+ * Defaults to "0".
+ * @prop {string} [screen-reader-label=""] -
+ * Provides an accessible label for screen readers.
+ * This is used to describe the indicator.
+ * @prop {string} [valuetext=""] -
+ * Defines the human-readable text alternative of value.
  *
- * @cssprop [--tap-progress-indicator-progressbar-color=--tap-sys-spacing-3] - The gap between steps.
- * @cssprop [--tap-progress-indicator-step-height=--tap-sys-spacing-3] - The height of each step.
- * @cssprop [--tap-progress-indicator-step-background-color=--tap-sys-color-surface-tertiary] - The background color of each step.
- * @cssprop [--tap-progress-indicator-active-step-background-color=--tap-sys-color-border-inverse-primary] - The background color of active steps.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext
  */
 @customElement("tap-progress-indicator")
 export class TapProgressIndicator extends ProgressIndicator {

diff --git a/packages/web-components/src/progress-indicator/progress-indicator.style.ts b/packages/web-components/src/progress-indicator/progress-indicator.style.ts
@@ -1,43 +1,41 @@
 import { css } from "lit";
 
 export default css`
-  :host {
+  *,
+  *::before,
+  *::after {
     box-sizing: border-box;
   }
 
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
-  }
-
   [hidden] {
     display: none !important;
   }
 
-  .progressbar {
+  :host {
+    display: block;
+  }
+
+  .root {
     display: flex;
     align-items: center;
-    gap: var(
-      --tap-progress-indicator-progressbar-color,
-      var(--tap-sys-spacing-3)
-    );
+
+    gap: var(--tap-sys-spacing-3);
   }
 
   .step {
-    display: block;
-    height: var(--tap-progress-indicator-step-height, var(--tap-sys-spacing-3));
-    flex: 1;
-    background-color: var(
-      --tap-progress-indicator-step-background-color,
-      var(--tap-sys-color-surface-tertiary)
+    --progress-indicator-step-background-color: var(
+      --tap-sys-color-surface-tertiary
     );
+
+    height: 0.25rem;
+    flex: 1;
+
+    background-color: var(--progress-indicator-step-background-color);
   }
 
-  .active {
-    background-color: var(
-      --tap-progress-indicator-active-step-background-color,
-      var(--tap-sys-color-border-inverse-primary)
+  .step.active {
+    --progress-indicator-step-background-color: var(
+      --tap-sys-color-border-inverse-primary
     );
   }
 `;
diff --git a/packages/web-components/src/progress-indicator/progress-indicator.ts b/packages/web-components/src/progress-indicator/progress-indicator.ts
@@ -1,37 +1,89 @@
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { map } from "lit/directives/map.js";
 import { range } from "lit/directives/range.js";
+import { logger } from "../utils";
 
 export class ProgressIndicator extends LitElement {
-  @property({ type: Number })
-  public max = 2;
+  /**
+   * The total number of steps.
+   * Defaults to "2".
+   */
+  @property()
+  public steps = "2";
 
-  @property({ type: Number })
-  public current = 0;
+  /**
+   * The current step index.
+   * Defaults to "0".
+   */
+  @property()
+  public current = "0";
+
+  /**
+   * Provides an accessible label for screen readers.
+   * This is used to describe the indicator.
+   */
+  @property({ attribute: "screen-reader-label" })
+  public screenReaderLabel = "";
+
+  /**
+   * Defines the human-readable text alternative of value.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext
+   */
+  @property({ type: String })
+  public valueText = "";
+
+  private _renderSteps() {
+    const steps = Number(this.steps);
+
+    if (Number.isNaN(steps)) return null;
+
+    return map(range(steps), idx => {
+      const stepClasses = classMap({
+        step: true,
+        active: idx < Number(this.current) || 0,
+      });
+
+      return html`
+        <div
+          class=${stepClasses}
+          part="step"
+        ></div>
+      `;
+    });
+  }
 
   protected override render() {
+    if (!this.screenReaderLabel) {
+      logger(
+        "Set `screen-reader-label` attribute for better accessibility.",
+        "progress-indicator",
+        "warning",
+      );
+    }
+
+    if (!this.valueText) {
+      logger(
+        "Set `valuetext` attribute for better accessibility.",
+        "progress-indicator",
+        "warning",
+      );
+    }
+
     return html`
       <div
-        class="progressbar"
-        part="progressbar"
+        class="root"
+        part="root"
         role="progressbar"
+        aria-label=${this.screenReaderLabel || nothing}
         aria-valuemin="0"
-        aria-valuemax=${this.max}
-        aria-valuenow=${this.current}
+        aria-valuemax=${this.steps || nothing}
+        aria-valuenow=${this.current || nothing}
+        aria-valuetext=${this.valueText}
       >
-        ${map(
-          range(this.max),
-          index =>
-            html`<div
-              class=${classMap({
-                step: true,
-                active: index < this.current,
-              })}
-              part="step"
-            ></div>`,
-        )}
+        ${this._renderSteps()}
       </div>
     `;
   }

diff --git a/packages/web-components/src/step-indicator/index.ts b/packages/web-components/src/step-indicator/index.ts
diff --git a/packages/web-components/src/step-indicator/step-indicator.style.ts b/packages/web-components/src/step-indicator/step-indicator.style.ts
diff --git a/packages/web-components/src/step-indicator/step-indicator.ts b/packages/web-components/src/step-indicator/step-indicator.ts