Merge 9adce6d into 9f6f003

Author: agata-kim

packages/components/src/components/icon-button/icon-button.stories.ts

@@ -12,6 +12,7 @@ export default {
     href: '',
     target: '_blank',
     shape: 'round',
+    ariaLabel: 'Icon Button',
   },
 
   argTypes: {
@@ -92,11 +93,18 @@ export default {
         }
       }
     },
+    ariaLabel: {
+      control: { type: 'text' },
+      description: 'Set the aria label of the icon button. Enhances accessibility.',
+      table: {
+        category: 'ifx-icon-button props'
+      }
+    },
   },
 };
 
 const DefaultTemplate = args =>
-  `<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}"  size="${args.size}" disabled="${args.disabled}">
+  `<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}"  size="${args.size}" disabled="${args.disabled}" aria-label="${args.ariaLabel}">
   </ifx-icon-button>`;
 
 export const Default = DefaultTemplate.bind({});

packages/components/src/components/icon-button/icon-button.tsx

@@ -1,6 +1,5 @@
 import { Component, Prop, h, Host, Method, Element, Listen } from '@stencil/core';
 import classNames from 'classnames';
- 
 
 @Component({
   tag: 'ifx-icon-button',
@@ -16,10 +15,11 @@ export class IconButton {
   @Prop() href: string;
   @Prop() target: string = '_self';
   @Prop() shape: string = 'round';
+  @Prop() ariaLabel: string | null;
   @Element() el;
 
   private focusableElement: HTMLElement;
-
+  
   @Listen('click', { capture: true })
   handleClick(event: Event) {
     if (this.disabled) {
@@ -40,14 +40,14 @@ export class IconButton {
 
   render() {
     return (
-      <Host>
+      <Host 
+        aria-disabled={this.disabled}
+        aria-label={this.ariaLabel}> 
         {this.href ? (
           <a
-            aria-disabled={this.disabled}
-            aria-label='a clickable icon button'
             ref={(el) => (this.focusableElement = el)}
             class={this.getClassNames()}
-            href={!this.disabled ? this.href : undefined}
+            href={!this.disabled ? this.href : undefined} 
             target={this.target}
             rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}
           >
@@ -57,6 +57,7 @@ export class IconButton {
           <button
             class={this.getClassNames()}
             type="button"
+            disabled={this.disabled}
           >
             <ifx-icon icon={this.icon}></ifx-icon>
           </button>

packages/components/src/components/icon-button/readme.md

@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property   | Attribute  | Description | Type                                     | Default     |
-| ---------- | ---------- | ----------- | ---------------------------------------- | ----------- |
-| `disabled` | `disabled` |             | `boolean`                                | `undefined` |
-| `href`     | `href`     |             | `string`                                 | `undefined` |
-| `icon`     | `icon`     |             | `string`                                 | `undefined` |
-| `shape`    | `shape`    |             | `string`                                 | `'round'`   |
-| `size`     | `size`     |             | `string`                                 | `undefined` |
-| `target`   | `target`   |             | `string`                                 | `'_self'`   |
-| `variant`  | `variant`  |             | `"primary" \| "secondary" \| "tertiary"` | `undefined` |
+| Property    | Attribute    | Description | Type                                     | Default     |
+| ----------- | ------------ | ----------- | ---------------------------------------- | ----------- |
+| `ariaLabel` | `aria-label` |             | `string`                                 | `undefined` |
+| `disabled`  | `disabled`   |             | `boolean`                                | `undefined` |
+| `href`      | `href`       |             | `string`                                 | `undefined` |
+| `icon`      | `icon`       |             | `string`                                 | `undefined` |
+| `shape`     | `shape`      |             | `string`                                 | `'round'`   |
+| `size`      | `size`       |             | `string`                                 | `undefined` |
+| `target`    | `target`     |             | `string`                                 | `'_self'`   |
+| `variant`   | `variant`    |             | `"primary" \| "secondary" \| "tertiary"` | `undefined` |
 
 
 ## Methods