From 2518068bb4b30126d737b5e5ccfd1da10906dbed Mon Sep 17 00:00:00 2001
From: Amr Sharaf <t-amrsha@microsoft.com>
Date: Wed, 17 Apr 2019 16:02:43 -0700
Subject: [PATCH] Added button role to clickable divs for accessibility

---
 src/client/src/components/Details/index.tsx                 | 1 +
 src/client/src/components/SelectableCard/index.tsx          | 1 +
 src/client/src/components/SummaryTile/index.tsx             | 1 +
 src/client/src/containers/AzureFunctionsSelection/index.tsx | 1 +
 src/client/src/containers/CosmosDBSelection/index.tsx       | 1 +
 src/client/src/containers/Footer/index.tsx                  | 4 +++-
 src/client/src/containers/Header/index.tsx                  | 1 +
 src/client/src/containers/ProjectNameAndOutput/index.tsx    | 4 +++-
 src/client/src/containers/Welcome/index.tsx                 | 4 +++-
 9 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/client/src/components/Details/index.tsx b/src/client/src/components/Details/index.tsx
index 0286419620..bc738b3d8c 100644
--- a/src/client/src/components/Details/index.tsx
+++ b/src/client/src/components/Details/index.tsx
@@ -82,6 +82,7 @@ const Details = ({
       <div className={styles.container}>
         <div className={styles.backContainer}>
           <div
+            role="button"
             tabIndex={0}
             onClick={handleBackClick}
             onKeyDown={keyDownHandler}
diff --git a/src/client/src/components/SelectableCard/index.tsx b/src/client/src/components/SelectableCard/index.tsx
index 7034e9a643..ceefab9c90 100644
--- a/src/client/src/components/SelectableCard/index.tsx
+++ b/src/client/src/components/SelectableCard/index.tsx
@@ -57,6 +57,7 @@ const SelectableCard = ({
 
   return (
     <div
+      role="button"
       tabIndex={0}
       onClick={() => {
         onCardClick(cardNumber);
diff --git a/src/client/src/components/SummaryTile/index.tsx b/src/client/src/components/SummaryTile/index.tsx
index 9838bd8761..8b38a93194 100644
--- a/src/client/src/components/SummaryTile/index.tsx
+++ b/src/client/src/components/SummaryTile/index.tsx
@@ -131,6 +131,7 @@ const SummaryTile = ({
     >
       {isDraggable && <ReorderSVG className={styles.reorder} />}
       <div
+        role="button"
         tabIndex={isEditable ? 0 : -1}
         className={classnames({
           [styles.indent]: withIndent,
diff --git a/src/client/src/containers/AzureFunctionsSelection/index.tsx b/src/client/src/containers/AzureFunctionsSelection/index.tsx
index 22935468eb..ea885493a2 100644
--- a/src/client/src/containers/AzureFunctionsSelection/index.tsx
+++ b/src/client/src/containers/AzureFunctionsSelection/index.tsx
@@ -86,6 +86,7 @@ const AzureFunctionsSelection = ({
                   className={styles.edit}
                   onClick={openAzureFunctionsModal}
                   onKeyDown={onEditKeyDownHandler}
+                  role="button"
                 >
                   <FormattedMessage
                     id="azureFunctionsSelection.edit"
diff --git a/src/client/src/containers/CosmosDBSelection/index.tsx b/src/client/src/containers/CosmosDBSelection/index.tsx
index fa8c31981b..67a55b8b54 100644
--- a/src/client/src/containers/CosmosDBSelection/index.tsx
+++ b/src/client/src/containers/CosmosDBSelection/index.tsx
@@ -49,6 +49,7 @@ const CosmosDBSelection = ({
           <div className={styles.headerContainer}>
             <div>{intl.formatMessage(serviceType)}</div>
             <div
+              role="button"
               tabIndex={0}
               className={styles.edit}
               onClick={openCosmosDbModal}
diff --git a/src/client/src/containers/Footer/index.tsx b/src/client/src/containers/Footer/index.tsx
index bbf237b33c..fe1703a6ec 100644
--- a/src/client/src/containers/Footer/index.tsx
+++ b/src/client/src/containers/Footer/index.tsx
@@ -231,7 +231,9 @@ const mapStateToProps = (state: AppState): IStateProps => ({
   isValidNameAndProjectPath: isValidNameAndProjectPathSelector(state)
 });
 
-const mapDispatchToProps = (dispatch: ThunkDispatch<AppState,void,RootAction>): IDispatchProps => ({
+const mapDispatchToProps = (
+  dispatch: ThunkDispatch<AppState, void, RootAction>
+): IDispatchProps => ({
   setRouteVisited: (route: string) => {
     dispatch(setVisitedWizardPageAction(route));
   },
diff --git a/src/client/src/containers/Header/index.tsx b/src/client/src/containers/Header/index.tsx
index 369df9e1c0..9d8e966bb3 100644
--- a/src/client/src/containers/Header/index.tsx
+++ b/src/client/src/containers/Header/index.tsx
@@ -42,6 +42,7 @@ const Header = (props: Props) => {
         <div className={styles.azureProfile}>
           <div className={styles.profileName}>{email}</div>
           <div
+            role="button"
             className={styles.button}
             tabIndex={0}
             onClick={signOutClick}
diff --git a/src/client/src/containers/ProjectNameAndOutput/index.tsx b/src/client/src/containers/ProjectNameAndOutput/index.tsx
index 71e726d239..f14922e234 100644
--- a/src/client/src/containers/ProjectNameAndOutput/index.tsx
+++ b/src/client/src/containers/ProjectNameAndOutput/index.tsx
@@ -162,7 +162,9 @@ const mapStateToProps = (state: AppState): IStateProps => ({
   projectNameValidation: getProjectNameValidation(state)
 });
 
-const mapDispatchToProps = (dispatch: Dispatch<RootAction>): IDispatchProps => ({
+const mapDispatchToProps = (
+  dispatch: Dispatch<RootAction>
+): IDispatchProps => ({
   updateProjectName: (projectName: string) => {
     dispatch(updateProjectNameAction(projectName));
   },
diff --git a/src/client/src/containers/Welcome/index.tsx b/src/client/src/containers/Welcome/index.tsx
index f60041e6b3..2db250ed1b 100644
--- a/src/client/src/containers/Welcome/index.tsx
+++ b/src/client/src/containers/Welcome/index.tsx
@@ -68,7 +68,9 @@ const Welcome = ({
   );
 };
 
-const mapDispatchToProps = (dispatch: Dispatch<RootAction>): IDispatchProps => ({
+const mapDispatchToProps = (
+  dispatch: Dispatch<RootAction>
+): IDispatchProps => ({
   updateProjectName: (projectName: string) => {
     dispatch(updateProjectNameAction(projectName));
   },