fix(loading)!: remove redundant description label (#1783)

Fixes #1670
carbon-design-system · Jul 23, 2023 · d6804b4 · d6804b4
1 parent a7443c2
commit d6804b4
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 51 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -1895,12 +1895,12 @@ None.
 
 ### Props
 
-| Prop name       | Required | Kind             | Reactive | Type                                                                     | Default value          | Description                                                       |
-| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | ----------------------------------------------------------------- |
-| status          | No       | <code>let</code> | No       | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code>  | Set the loading status                                            |
-| description     | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Set the loading description                                       |
-| iconDescription | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Specify the ARIA label for the loading icon                       |
-| successDelay    | No       | <code>let</code> | No       | <code>number</code>                                                      | <code>1500</code>      | Specify the timeout delay (ms) after `status` is set to "success" |
+| Prop name       | Required | Kind             | Reactive | Type                                                                     | Default value          | Description                                                                                                          |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| status          | No       | <code>let</code> | No       | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code>  | Set the loading status                                                                                               |
+| description     | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Set the loading description                                                                                          |
+| iconDescription | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` prop for the "error" and "finished" states |
+| successDelay    | No       | <code>let</code> | No       | <code>number</code>                                                      | <code>1500</code>      | Specify the timeout delay (ms) after `status` is set to "success"                                                    |
 
 ### Slots
 
@@ -2172,13 +2172,12 @@ None.
 
 ### Props
 
-| Prop name   | Required | Kind             | Reactive | Type                 | Default value                                    | Description                                |
-| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ------------------------------------------ |
-| small       | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to use the small variant     |
-| active      | No       | <code>let</code> | No       | <code>boolean</code> | <code>true</code>                                | Set to `false` to disable the active state |
-| withOverlay | No       | <code>let</code> | No       | <code>boolean</code> | <code>true</code>                                | Set to `false` to disable the overlay      |
-| description | No       | <code>let</code> | No       | <code>string</code>  | <code>"Active loading indicator"</code>          | Specify the label description              |
-| id          | No       | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the label element            |
+| Prop name   | Required | Kind             | Reactive | Type                 | Default value          | Description                                           |
+| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- |
+| small       | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to use the small variant                |
+| active      | No       | <code>let</code> | No       | <code>boolean</code> | <code>true</code>      | Set to `false` to disable the active state            |
+| withOverlay | No       | <code>let</code> | No       | <code>boolean</code> | <code>true</code>      | Set to `false` to disable the overlay                 |
+| description | No       | <code>let</code> | No       | <code>string</code>  | <code>"loading"</code> | Specify the description to describe the loading state |
 
 ### Slots
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -5549,7 +5549,7 @@
         {
           "name": "iconDescription",
           "kind": "let",
-          "description": "Specify the ARIA label for the loading icon",
+          "description": "Specify a description for the loading icon.\nDefaults to the `status` prop for the \"error\" and \"finished\" states",
           "type": "string",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -6334,21 +6334,9 @@
         {
           "name": "description",
           "kind": "let",
-          "description": "Specify the label description",
+          "description": "Specify the description to describe the loading state",
           "type": "string",
-          "value": "\"Active loading indicator\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "id",
-          "kind": "let",
-          "description": "Set an id for the label element",
-          "type": "string",
-          "value": "\"ccs-\" + Math.random().toString(36)",
+          "value": "\"loading\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,

diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
@@ -12,7 +12,8 @@
   export let description = undefined;
 
   /**
-   * Specify the ARIA label for the loading icon
+   * Specify a description for the loading icon.
+   * Defaults to the `status` prop for the "error" and "finished" states
    * @type {string}
    */
   export let iconDescription = undefined;
@@ -59,12 +60,12 @@
     {#if status === "error"}
       <ErrorFilled
         class="bx--inline-loading--error"
-        title="{iconDescription}"
+        title="{iconDescription || status}"
       />
     {:else if status === "finished"}
       <CheckmarkFilled
         class="bx--inline-loading__checkmark-container"
-        title="{iconDescription}"
+        title="{iconDescription || status}"
       />
     {:else if status === "inactive" || status === "active"}
       <Loading

diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte
@@ -8,11 +8,8 @@
   /** Set to `false` to disable the overlay */
   export let withOverlay = true;
 
-  /** Specify the label description */
-  export let description = "Active loading indicator";
-
-  /** Set an id for the label element */
-  export let id = "ccs-" + Math.random().toString(36);
+  /** Specify the description to describe the loading state */
+  export let description = "loading";
 
   $: spinnerRadius = small ? "42" : "44";
 </script>
@@ -25,14 +22,11 @@
   >
     <div
       aria-atomic="true"
-      aria-labelledby="{id}"
       aria-live="{active ? 'assertive' : 'off'}"
       class:bx--loading="{true}"
       class:bx--loading--small="{small}"
       class:bx--loading--stop="{!active}"
     >
-      <!-- svelte-ignore a11y-label-has-associated-control -->
-      <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
       <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
         <title>{description}</title>
         {#if small}
@@ -53,15 +47,12 @@
 {:else}
   <div
     aria-atomic="true"
-    aria-labelledby="{id}"
     aria-live="{active ? 'assertive' : 'off'}"
     class:bx--loading="{true}"
     class:bx--loading--small="{small}"
     class:bx--loading--stop="{!active}"
     {...$$restProps}
   >
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
     <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
       <title>{description}</title>
       {#if small}

diff --git a/types/InlineLoading/InlineLoading.svelte.d.ts b/types/InlineLoading/InlineLoading.svelte.d.ts
@@ -17,7 +17,8 @@ export interface InlineLoadingProps extends RestProps {
   description?: string;
 
   /**
-   * Specify the ARIA label for the loading icon
+   * Specify a description for the loading icon.
+   * Defaults to the `status` prop for the "error" and "finished" states
    * @default undefined
    */
   iconDescription?: string;

diff --git a/types/Loading/Loading.svelte.d.ts b/types/Loading/Loading.svelte.d.ts
@@ -23,17 +23,11 @@ export interface LoadingProps extends RestProps {
   withOverlay?: boolean;
 
   /**
-   * Specify the label description
-   * @default "Active loading indicator"
+   * Specify the description to describe the loading state
+   * @default "loading"
    */
   description?: string;
 
-  /**
-   * Set an id for the label element
-   * @default "ccs-" + Math.random().toString(36)
-   */
-  id?: string;
-
   [key: `data-${string}`]: any;
 }