feat(tile): add optional expand/collapse icon labels to ExpandableTile

COMPONENT_INDEX.md

@@ -1023,17 +1023,19 @@ None.
 
 ### Props
 
-| Prop name             | Kind             | Reactive | Type                                    | Default value                                    | Description                                           |
+| Prop name             | Kind             | Reactive | Type                                       | Default value                                    | Description                                           |
-| :-------------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref                   | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code> | <code>null</code>                                | Obtain a reference to the top-level element           |
+| ref                   | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the top-level element           |
-| tilePadding           | <code>let</code> | Yes      | <code>number</code>                     | <code>0</code>                                   | Specify the padding of the tile (number of pixels)    |
+| tilePadding           | <code>let</code> | Yes      | <code>number</code>                        | <code>0</code>                                   | Specify the padding of the tile (number of pixels)    |
-| tileMaxHeight         | <code>let</code> | Yes      | <code>number</code>                     | <code>0</code>                                   | Specify the max height of the tile (number of pixels) |
+| tileMaxHeight         | <code>let</code> | Yes      | <code>number</code>                        | <code>0</code>                                   | Specify the max height of the tile (number of pixels) |
-| expanded              | <code>let</code> | Yes      | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to expand the tile                      |
+| expanded              | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to expand the tile                      |
-| light                 | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to enable the light variant             |
+| light                 | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant             |
-| tileCollapsedIconText | <code>let</code> | No       | <code>string</code>                     | <code>"Interact to expand Tile"</code>           | Specify the icon text of the collapsed tile           |
+| tileCollapsedIconText | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to expand Tile"</code>           | Specify the icon text of the collapsed tile           |
-| tileExpandedIconText  | <code>let</code> | No       | <code>string</code>                     | <code>"Interact to collapse Tile"</code>         | Specify the icon text of the expanded tile            |
+| tileExpandedIconText  | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to collapse Tile"</code>         | Specify the icon text of the expanded tile            |
-| tabindex              | <code>let</code> | No       | <code>string</code>                     | <code>"0"</code>                                 | Specify the tabindex                                  |
+| tileExpandedLabel     | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the expanded tile           |
-| id                    | <code>let</code> | No       | <code>string</code>                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element               |
+| tileCollapsedLabel    | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the collapsed tile          |
+| tabindex              | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify the tabindex                                  |
+| id                    | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element               |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -8492,6 +8492,26 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "tileExpandedLabel",
+          "kind": "let",
+          "description": "Specify the icon label of the expanded tile",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "tileCollapsedLabel",
+          "kind": "let",
+          "description": "Specify the icon label of the collapsed tile",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "tabindex",
           "kind": "let",
@@ -8516,7 +8536,7 @@
           "name": "ref",
           "kind": "let",
           "description": "Obtain a reference to the top-level element",
-          "type": "null | HTMLDivElement",
+          "type": "null | HTMLButtonElement",
           "value": "null",
           "isFunction": false,
           "constant": false,
@@ -8528,14 +8548,14 @@
         { "name": "below", "default": false, "slot_props": "{}" }
       ],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "div" },
+        { "type": "forwarded", "name": "click", "element": "button" },
-        { "type": "forwarded", "name": "keypress", "element": "div" },
+        { "type": "forwarded", "name": "keypress", "element": "button" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
+        { "type": "forwarded", "name": "mouseover", "element": "button" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
+        { "type": "forwarded", "name": "mouseenter", "element": "button" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" }
+        { "type": "forwarded", "name": "mouseleave", "element": "button" }
       ],
       "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "rest_props": { "type": "Element", "name": "button" }
     },
     {
       "moduleName": "SelectableTile",

docs/src/pages/components/ExpandableTile.svx

@@ -27,3 +27,10 @@ source: Tile/ExpandableTile.svelte
   <div slot="above" style="height: 10rem">Above the fold content here</div>
   <div slot="below" style="height: 10rem">Below the fold content here</div>
 </ExpandableTile>
+
+### With icon labels
+
+<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
+  <div slot="above" style="height: 10rem">Above the fold content here</div>
+  <div slot="below" style="height: 10rem">Below the fold content here</div>
+</ExpandableTile>

src/Tile/ExpandableTile.svelte

@@ -17,6 +17,12 @@
   /** Specify the icon text of the expanded tile */
   export let tileExpandedIconText = "Interact to collapse Tile";
 
+  /** Specify the icon label of the expanded tile */
+  export let tileExpandedLabel = "";
+
+  /** Specify the icon label of the collapsed tile */
+  export let tileCollapsedLabel = "";
+
   /** Specify the tabindex */
   export let tabindex = "0";
 
@@ -27,7 +33,7 @@
   export let ref = null;
 
   import { afterUpdate } from "svelte";
-  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
+  import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
 
   let refContent = null;
   let refAbove = null;
@@ -45,10 +51,13 @@
   });
 </script>
 
-<div
+<button
   bind:this="{ref}"
+  type="button"
   id="{id}"
+  aria-expanded="{expanded}"
   tabindex="{tabindex}"
+  title="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
   class:bx--tile="{true}"
   class:bx--tile--expandable="{true}"
   class:bx--tile--is-expanded="{expanded}"
@@ -60,45 +69,24 @@
     expanded = !expanded;
   }}"
   on:keypress
-  on:keypress="{(e) => {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      expanded = !expanded;
-    }
-  }}"
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
   <div bind:this="{refContent}">
     <div bind:this="{refAbove}" class:bx--tile-content="{true}">
-      <span
+      <span class:bx--tile-content__above-the-fold="{true}">
-        class:bx--tile-content__above-the-fold="{true}"
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-      >
         <slot name="above" />
       </span>
     </div>
-    <button
+    <div class:bx--tile__chevron="{true}">
-      aria-expanded="{expanded}"
+      <span>{expanded ? tileExpandedLabel : tileCollapsedLabel}</span>
-      aria-label="{expanded ? tileExpandedIconText : tileCollapsedIconText}"
-      class:bx--tile__chevron="{true}"
-    >
       <ChevronDown16 />
-    </button>
+    </div>
     <div class:bx--tile-content="{true}">
-      <span
+      <span class:bx--tile-content__below-the-fold="{true}">
-        on:click
-        on:mouseover
-        on:mouseenter
-        on:mouseleave
-        class:bx--tile-content__below-the-fold="{true}"
-      >
         <slot name="below" />
       </span>
     </div>
   </div>
-</div>
+</button>

tests/ExpandableTile.test.svelte

@@ -12,7 +12,11 @@
   <div slot="below" style="height: 10rem">Below the fold content here</div>
 </ExpandableTile>
 
-<ExpandableTile light>
+<ExpandableTile
+  light
+  tileExpandedLabel="View less"
+  tileCollapsedLabel="View more"
+>
   <div slot="above" style="height: 10rem">Above the fold content here</div>
   <div slot="below" style="height: 10rem">Below the fold content here</div>
 </ExpandableTile>

types/Tile/ExpandableTile.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="svelte" />
 
-export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
    * Set to `true` to expand the tile
    * @default false
@@ -37,6 +37,18 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
    */
   tileExpandedIconText?: string;
 
+  /**
+   * Specify the icon label of the expanded tile
+   * @default ""
+   */
+  tileExpandedLabel?: string;
+
+  /**
+   * Specify the icon label of the collapsed tile
+   * @default ""
+   */
+  tileCollapsedLabel?: string;
+
   /**
    * Specify the tabindex
    * @default "0"
@@ -53,7 +65,7 @@ export interface ExpandableTileProps extends svelte.JSX.HTMLAttributes<HTMLEleme
    * Obtain a reference to the top-level element
    * @default null
    */
-  ref?: null | HTMLDivElement;
+  ref?: null | HTMLButtonElement;
 }
 
 export default class ExpandableTile {