From ecfe5012e796065098c723b72d4b3a0555915b48 Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Thu, 6 Jun 2019 16:42:01 -0500
Subject: [PATCH] fix(Loading): use description prop as SVG title (#2955)

* fix(Loading): use description prop as SVG title

* docs(Loading): expose icon description props
---
 .../components/InlineLoading/InlineLoading-story.js    |  6 +++++-
 .../src/components/InlineLoading/InlineLoading.js      | 10 +++++++++-
 packages/react/src/components/Loading/Loading-story.js |  4 ++--
 packages/react/src/components/Loading/Loading.js       |  2 +-
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
index d5787efc7ee6..5d172db13bd0 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading-story.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading-story.js
@@ -16,6 +16,10 @@ import InlineLoading from '../InlineLoading';
 
 const props = () => ({
   success: boolean('Loading successful state (success)', false),
+  iconDescription: text(
+    'Icon description (iconDescription)',
+    'Active loading indicator'
+  ),
   description: text(
     'Loading progress description (description)',
     'Loading data...'
@@ -105,7 +109,7 @@ storiesOf('InlineLoading', module)
       info: {
         text: `
             This is a full example of how to levarage the <InlineLoading /> component to create a nice user experience when submitting a form.
-    
+
             For the full source code of this example, check out the 'story' panel below.
           `,
       },
diff --git a/packages/react/src/components/InlineLoading/InlineLoading.js b/packages/react/src/components/InlineLoading/InlineLoading.js
index f783357ec211..09118d271e00 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading.js
@@ -30,6 +30,11 @@ export default class InlineLoading extends React.Component {
      */
     description: PropTypes.string,
 
+    /**
+     * Specify the description for the inline loading text
+     */
+    iconDescription: PropTypes.string,
+
     /**
      * Provide an optional handler to be inovked when <InlineLoading> is
      * successful
@@ -51,6 +56,7 @@ export default class InlineLoading extends React.Component {
     const {
       className,
       success,
+      iconDescription,
       description,
       onSuccess,
       successDelay,
@@ -80,7 +86,9 @@ export default class InlineLoading extends React.Component {
         );
       }
 
-      return <Loading small withOverlay={false} />;
+      return (
+        <Loading small description={iconDescription} withOverlay={false} />
+      );
     };
 
     const loadingText = (
diff --git a/packages/react/src/components/Loading/Loading-story.js b/packages/react/src/components/Loading/Loading-story.js
index 66bc6b914963..c1aea022dde5 100644
--- a/packages/react/src/components/Loading/Loading-story.js
+++ b/packages/react/src/components/Loading/Loading-story.js
@@ -7,14 +7,14 @@
 
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import Loading from '../Loading';
 
 const props = () => ({
   active: boolean('Active (active)', true),
   withOverlay: boolean('With overlay (withOverlay)', false),
   small: boolean('Small (small)', false),
+  description: text('Description (description)', 'Active loading indicator'),
 });
 
 storiesOf('Loading', module)
diff --git a/packages/react/src/components/Loading/Loading.js b/packages/react/src/components/Loading/Loading.js
index 7a47861bca06..9eb11f0a3919 100644
--- a/packages/react/src/components/Loading/Loading.js
+++ b/packages/react/src/components/Loading/Loading.js
@@ -73,7 +73,7 @@ export default class Loading extends React.Component {
         aria-live={active ? 'assertive' : 'off'}
         className={loadingClasses}>
         <svg className={`${prefix}--loading__svg`} viewBox="-75 -75 150 150">
-          <title>Loading</title>
+          <title>{description}</title>
           {small ? (
             <circle
               className={`${prefix}--loading__background`}