From 46f352c3e67fbc0f89f4c0b0ceb47a75b12a046e Mon Sep 17 00:00:00 2001
From: Yimin Wu <yimwu@microsoft.com>
Date: Fri, 19 Aug 2016 09:39:21 -0700
Subject: [PATCH 1/4] add empty alt attribute to the image with presentation
 role in DocumentCard. Otherwise the accessibility checker will show warning.

---
 src/components/DocumentCard/DocumentCardActivity.tsx | 2 +-
 src/components/DocumentCard/DocumentCardPreview.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DocumentCard/DocumentCardActivity.tsx b/src/components/DocumentCard/DocumentCardActivity.tsx
index 5c9dd15f6b349..e8b2c76df105c 100644
--- a/src/components/DocumentCard/DocumentCardActivity.tsx
+++ b/src/components/DocumentCard/DocumentCardActivity.tsx
@@ -40,7 +40,7 @@ export class DocumentCardActivity extends React.Component<IDocumentCardActivityP
               </div>
           ) }
           { person.profileImageSrc && (
-            <Image src={ person.profileImageSrc } role='presentation'/>
+            <Image src={ person.profileImageSrc } role='presentation' alt=''/>
           ) }
         </div>
       );
diff --git a/src/components/DocumentCard/DocumentCardPreview.tsx b/src/components/DocumentCard/DocumentCardPreview.tsx
index df55120bb7699..c07738daf84de 100644
--- a/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -45,7 +45,7 @@ export class DocumentCardPreview extends React.Component<IDocumentCardPreviewPro
 
     let icon;
     if (previewImage.iconSrc) {
-      icon = <Image className='ms-DocumentCardPreview-icon' src={ previewImage.iconSrc } role='presentation'/>;
+      icon = <Image className='ms-DocumentCardPreview-icon' src={ previewImage.iconSrc } role='presentation' alt=''/>;
     }
 
     return (
@@ -56,7 +56,7 @@ export class DocumentCardPreview extends React.Component<IDocumentCardPreviewPro
           imageFit={ imageFit }
           src={ previewImage.previewImageSrc }
           errorSrc={ previewImage.errorImageSrc }
-          role='presentation'/>
+          role='presentation' alt=''/>
         { icon }
       </div>
     );

From af46bd6848d7d04ff2876c1ed03345dff2fb1525 Mon Sep 17 00:00:00 2001
From: Yimin Wu <yimwu@microsoft.com>
Date: Fri, 19 Aug 2016 16:19:34 -0700
Subject: [PATCH 2/4] Make DocumentCardAction props extend from Button props.
 This will make sure we can set all the properties on the action button such
 as aria label.

---
 .../DocumentCard/DocumentCard.Props.ts        |  3 +-
 .../DocumentCard/DocumentCardActions.tsx      | 18 ++++---
 .../DocumentCard.Complete.Example.tsx         | 47 +++++++++++--------
 3 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/components/DocumentCard/DocumentCard.Props.ts b/src/components/DocumentCard/DocumentCard.Props.ts
index ce204741f69af..02a56fd68fec9 100644
--- a/src/components/DocumentCard/DocumentCard.Props.ts
+++ b/src/components/DocumentCard/DocumentCard.Props.ts
@@ -7,6 +7,7 @@ import { DocumentCardActivity } from './DocumentCardActivity';
 import { DocumentCardActions } from './DocumentCardActions';
 import { PersonaInitialsColor } from '../../Persona';
 import { ImageFit } from '../../Image';
+import { IButtonProps } from '../../Button';
 
 export interface IDocumentCardProps extends React.Props<DocumentCard> {
   /**
@@ -153,7 +154,7 @@ export interface IDocumentCardActionsProps extends React.Props<DocumentCardActio
   views?: Number;
 }
 
-export interface IDocumentCardAction {
+export interface IDocumentCardAction extends IButtonProps {
   /**
    * The icon for this action.
    */
diff --git a/src/components/DocumentCard/DocumentCardActions.tsx b/src/components/DocumentCard/DocumentCardActions.tsx
index 44ab8e2635540..8668c9bce350f 100644
--- a/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/src/components/DocumentCard/DocumentCardActions.tsx
@@ -10,16 +10,14 @@ export class DocumentCardActions extends React.Component<IDocumentCardActionsPro
     return (
       <div className='ms-DocumentCardActions'>
 
-        { actions && actions.map((action, index) => (
-        <div className='ms-DocumentCardActions-action' key={ index }>
-          <Button
-            buttonType={ ButtonType.icon }
-            icon={ action.icon }
-            onClick={ action.onClick }
-            rootProps={ { title:'' } }
-            description='' />
-        </div>
-        )) }
+        { actions && actions.map((action, index) => {
+          action.buttonType = ButtonType.icon;
+          return (
+            <div className='ms-DocumentCardActions-action' key={ index }>
+              <Button { ...action } />
+            </div>
+          )
+        }) }
 
         { views && (
         <div className='ms-DocumentCardActions-views'>
diff --git a/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx b/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx
index 163fd4e2188c9..10a86032caf31 100644
--- a/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx
+++ b/src/demo/pages/DocumentCardPage/examples/DocumentCard.Complete.Example.tsx
@@ -62,28 +62,37 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
             }
           />
           <DocumentCardActions
-            actions={
-              [
-                { icon: 'share', onClick: (ev: any) => {
-                    console.log('You clicked the share action.');
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                  }
+          actions={
+            [
+              {
+                icon: 'share',
+                onClick: (ev: any) => {
+                  console.log('You clicked the share action.');
+                  ev.preventDefault();
+                  ev.stopPropagation();
                 },
-                { icon: 'pinLeft', onClick: (ev: any) => {
-                    console.log('You clicked the pin action.');
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                  }
+                ariaLabel: 'share action'
+              },
+              {
+                icon: 'pinLeft',
+                onClick: (ev: any) => {
+                  console.log('You clicked the pin action.');
+                  ev.preventDefault();
+                  ev.stopPropagation();
                 },
-                { icon: 'bell', onClick: (ev: any) => {
-                    console.log('You clicked the bell action.');
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                  }
+                ariaLabel: 'pin left action'
+              },
+              {
+                icon: 'bell',
+                onClick: (ev: any) => {
+                  console.log('You clicked the bell action.');
+                  ev.preventDefault();
+                  ev.stopPropagation();
                 },
-              ]
-            }
+                ariaLabel: 'bell action'
+              },
+            ]
+          }
             views={ 432 }
           />
         </DocumentCard>

From 6e8f2f03819f9de575deae5f73b7f3a0f6458903 Mon Sep 17 00:00:00 2001
From: Yimin Wu <yimwu@microsoft.com>
Date: Fri, 19 Aug 2016 16:26:43 -0700
Subject: [PATCH 3/4] Add missing semicolon

---
 src/components/DocumentCard/DocumentCardActions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocumentCard/DocumentCardActions.tsx b/src/components/DocumentCard/DocumentCardActions.tsx
index 8668c9bce350f..8dbdcec9bc255 100644
--- a/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/src/components/DocumentCard/DocumentCardActions.tsx
@@ -16,7 +16,7 @@ export class DocumentCardActions extends React.Component<IDocumentCardActionsPro
             <div className='ms-DocumentCardActions-action' key={ index }>
               <Button { ...action } />
             </div>
-          )
+          );
         }) }
 
         { views && (

From db8c528fe2ce3f115d4f870d39b52ae1b162b40a Mon Sep 17 00:00:00 2001
From: Yimin Wu <yimwu@microsoft.com>
Date: Fri, 19 Aug 2016 17:13:58 -0700
Subject: [PATCH 4/4] remove IDocumentCardAction interface since we actually
 only need button props.

---
 src/components/DocumentCard/DocumentCard.Props.ts | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/components/DocumentCard/DocumentCard.Props.ts b/src/components/DocumentCard/DocumentCard.Props.ts
index 02a56fd68fec9..22bd40bb8b61e 100644
--- a/src/components/DocumentCard/DocumentCard.Props.ts
+++ b/src/components/DocumentCard/DocumentCard.Props.ts
@@ -146,22 +146,10 @@ export interface IDocumentCardActionsProps extends React.Props<DocumentCardActio
   /**
    * The actions available for this document.
    */
-  actions: IDocumentCardAction[];
+  actions: IButtonProps[];
 
   /**
    * The number of views this document has received.
    */
   views?: Number;
 }
-
-export interface IDocumentCardAction extends IButtonProps {
-  /**
-   * The icon for this action.
-   */
-  icon: string;
-
-  /**
-   * Function to run when clicking the action.
-   */
-  onClick?: (ev?: any) => void;
-}