feat(action): a11y aria labels for disabled and loading (#357)

Esri · Oct 14, 2019 · f519384 · f519384
1 parent aed0cad
commit f519384
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/components/calcite-action/calcite-action.tsx b/src/components/calcite-action/calcite-action.tsx
@@ -86,16 +86,14 @@ export class CalciteAction {
   // --------------------------------------------------------------------------
 
   render() {
-    const { compact, disabled, el, textEnabled, textDisplay, label, text } = this;
+    const { compact, disabled, loading, el, textEnabled, textDisplay, label, text } = this;
 
     const iconContainerNode = (
       <div key="icon-container" aria-hidden="true" class={CSS.iconContainer}>
-        {!this.loading ? <slot /> : <calcite-loader is-active inline></calcite-loader>}
+        {!loading ? <slot /> : <calcite-loader is-active inline></calcite-loader>}
       </div>
     );
 
-    // const loaderNode = this.loading ? (<calcite-loader is-active inline></calcite-loader>) : null;
-
     const calculatedTextDisplay = textEnabled ? "visible" : textDisplay;
 
     const textContainerNode =
@@ -123,6 +121,8 @@ export class CalciteAction {
           title={labelFallback}
           aria-label={labelFallback}
           disabled={disabled}
+          aria-disabled={this.disabled}
+          aria-busy={loading}
         >
           {iconContainerNode}
           {textContainerNode}

diff --git a/src/demos/calcite-action.html b/src/demos/calcite-action.html
@@ -28,13 +28,18 @@ <h1>calcite-action</h1>
           .example-container {
             width: 18vw;
           }
+          .toggles {
+            margin: 1rem 0;
+          }
         </style>
 
+        <div class="toggles">
+          <calcite-button onclick="toggleProperty('loading')">Toggle loading</calcite-button>
+          <calcite-button onclick="toggleProperty('disabled')">Toggle disabled</calcite-button>
+        </div>
         <h2>LTR</h2>
 
         <div class="example-container">
-          <calcite-button onclick="toggleProperty('loading')">Toggle loading</calcite-button>
-          <calcite-button onclick="toggleProperty('disabled')">Toggle disabled</calcite-button>
           <h3>With text</h3>
           <calcite-action indicator active label="click-me" text="hello world" text-display="visible"
             ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">