From 40f4efab7c091e81788c54c9cd2ddc25c3cf1d75 Mon Sep 17 00:00:00 2001
From: DanielSPham <36108616+DanielSPham@users.noreply.github.com>
Date: Wed, 16 Sep 2020 17:17:23 -0700
Subject: [PATCH] Added heading role to pane title (#203)

Co-authored-by: Daniel Si Pham <v-danpha@microsoft.com>
---
 src/Explorer/Controls/GitHub/GitHubReposComponent.tsx    | 4 +++-
 src/Explorer/Panes/AddCollectionPane.html                | 2 +-
 src/Explorer/Panes/AddDatabasePane.html                  | 2 +-
 src/Explorer/Panes/BrowseQueriesPane.html                | 2 +-
 src/Explorer/Panes/CassandraAddCollectionPane.html       | 2 +-
 src/Explorer/Panes/DeleteCollectionConfirmationPane.html | 2 +-
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.html   | 2 +-
 src/Explorer/Panes/ExecuteSprocParamsPane.html           | 2 +-
 src/Explorer/Panes/GenericRightPaneComponent.tsx         | 4 +++-
 src/Explorer/Panes/GraphNewVertexPane.html               | 2 +-
 src/Explorer/Panes/GraphStylingPane.html                 | 2 +-
 src/Explorer/Panes/LoadQueryPane.html                    | 2 +-
 src/Explorer/Panes/RenewAdHocAccessPane.html             | 2 +-
 src/Explorer/Panes/SaveQueryPane.html                    | 2 +-
 src/Explorer/Panes/SettingsPane.html                     | 2 +-
 src/Explorer/Panes/SetupNotebooksPane.html               | 2 +-
 src/Explorer/Panes/StringInputPane.html                  | 2 +-
 src/Explorer/Panes/SwitchDirectoryPane.html              | 2 +-
 src/Explorer/Panes/Tables/TableEditEntityPane.html       | 2 +-
 src/Explorer/Panes/UploadFilePane.html                   | 2 +-
 src/Explorer/Panes/UploadItemsPane.html                  | 2 +-
 21 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx b/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
index c3e8ff6d0..bbd770976 100644
--- a/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
+++ b/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
@@ -66,7 +66,9 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr
 
     return (
       <>
-        <div className={"firstdivbg headerline"}>{header}</div>
+        <div className={"firstdivbg headerline"} role="heading" aria-level={2}>
+          {header}
+        </div>
         <div className={"paneMainContent"}>{content}</div>
         {!this.props.showAuthorizeAccess && (
           <>
diff --git a/src/Explorer/Panes/AddCollectionPane.html b/src/Explorer/Panes/AddCollectionPane.html
index 3bd94d06c..418b713a9 100644
--- a/src/Explorer/Panes/AddCollectionPane.html
+++ b/src/Explorer/Panes/AddCollectionPane.html
@@ -24,7 +24,7 @@
 <script type="text/html" id="add-collection-inputs">
                                                                 <!-- Add collection header - Start -->
   <div class="firstdivbg headerline">
-      <span id="containerTitle" data-bind="text: title"></span>
+      <span id="containerTitle" role="heading" aria-level="2" data-bind="text: title" ></span>
       <div class="closeImg" id="closeBtnAddCollection" role="button" aria-label="Add collection close pane"
           data-bind="click: cancel, event: { keypress: onCloseKeyPress }" tabindex="0">
           <img src="../../../images/close-black.svg" title="Close" alt="Close" />
diff --git a/src/Explorer/Panes/AddDatabasePane.html b/src/Explorer/Panes/AddDatabasePane.html
index de0e6db83..385a423a1 100644
--- a/src/Explorer/Panes/AddDatabasePane.html
+++ b/src/Explorer/Panes/AddDatabasePane.html
@@ -24,7 +24,7 @@
 <script type="text/html" id="add-database-inputs">
                                 <!-- Add database header - Start -->
   <div class="firstdivbg headerline">
-      <span id="databaseTitle" data-bind="text: title"></span>
+      <span id="databaseTitle" role="heading" aria-level="2" data-bind="text: title"></span>
       <div class="closeImg" role="button" aria-label="Close pane"
           data-bind="click: cancel, event: { keypress: onCloseKeyPress }" tabindex="0">
           <img src="../../../images/close-black.svg" title="Close" alt="Close" />
diff --git a/src/Explorer/Panes/BrowseQueriesPane.html b/src/Explorer/Panes/BrowseQueriesPane.html
index c606a895b..3a229e263 100644
--- a/src/Explorer/Panes/BrowseQueriesPane.html
+++ b/src/Explorer/Panes/BrowseQueriesPane.html
@@ -6,7 +6,7 @@
       <div class="paneContentContainer">
         <!-- Save Query header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/CassandraAddCollectionPane.html b/src/Explorer/Panes/CassandraAddCollectionPane.html
index ae3f8bd6f..c21bfa392 100644
--- a/src/Explorer/Panes/CassandraAddCollectionPane.html
+++ b/src/Explorer/Panes/CassandraAddCollectionPane.html
@@ -17,7 +17,7 @@
       >
         <!-- Add Cassandra collection header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/DeleteCollectionConfirmationPane.html b/src/Explorer/Panes/DeleteCollectionConfirmationPane.html
index f6891eba7..c333daf32 100644
--- a/src/Explorer/Panes/DeleteCollectionConfirmationPane.html
+++ b/src/Explorer/Panes/DeleteCollectionConfirmationPane.html
@@ -15,7 +15,7 @@
       >
         <!-- Delete Collection Confirmation header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/DeleteDatabaseConfirmationPane.html b/src/Explorer/Panes/DeleteDatabaseConfirmationPane.html
index e02f15784..59c429233 100644
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPane.html
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPane.html
@@ -15,7 +15,7 @@
       >
         <!-- Delete Database Confirmation header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/ExecuteSprocParamsPane.html b/src/Explorer/Panes/ExecuteSprocParamsPane.html
index 129232575..38ae5f170 100644
--- a/src/Explorer/Panes/ExecuteSprocParamsPane.html
+++ b/src/Explorer/Panes/ExecuteSprocParamsPane.html
@@ -11,7 +11,7 @@
       <form class="paneContentContainer" data-bind="submit: execute">
         <!-- Input params header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/GenericRightPaneComponent.tsx b/src/Explorer/Panes/GenericRightPaneComponent.tsx
index b3db7c358..296320d6c 100644
--- a/src/Explorer/Panes/GenericRightPaneComponent.tsx
+++ b/src/Explorer/Panes/GenericRightPaneComponent.tsx
@@ -70,7 +70,9 @@ export class GenericRightPaneComponent extends React.Component<GenericRightPaneP
   private renderPanelHeader = (): JSX.Element => {
     return (
       <div className="firstdivbg headerline">
-        <span id="databaseTitle">{this.props.title}</span>
+        <span id="databaseTitle" role="heading" aria-level={2}>
+          {this.props.title}
+        </span>
         <IconButton
           ariaLabel="Close pane"
           title="Close pane"
diff --git a/src/Explorer/Panes/GraphNewVertexPane.html b/src/Explorer/Panes/GraphNewVertexPane.html
index ddf778e2e..cbc9e31cc 100644
--- a/src/Explorer/Panes/GraphNewVertexPane.html
+++ b/src/Explorer/Panes/GraphNewVertexPane.html
@@ -6,7 +6,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- New Vertex header - Start -->
         <div class="firstdivbg headerline">
-          <span>New Vertex</span>
+          <span role="heading" aria-level="2">New Vertex</span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/GraphStylingPane.html b/src/Explorer/Panes/GraphStylingPane.html
index 3bfbcdf0e..09e6f2907 100644
--- a/src/Explorer/Panes/GraphStylingPane.html
+++ b/src/Explorer/Panes/GraphStylingPane.html
@@ -6,7 +6,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- Graph Styling header - Start -->
         <div class="firstdivbg headerline">
-          <span>Graph Styling</span>
+          <span role="heading" aria-level="2">Graph Styling</span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/LoadQueryPane.html b/src/Explorer/Panes/LoadQueryPane.html
index 61d33b716..a91eb7804 100644
--- a/src/Explorer/Panes/LoadQueryPane.html
+++ b/src/Explorer/Panes/LoadQueryPane.html
@@ -6,7 +6,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- Load Query header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/RenewAdHocAccessPane.html b/src/Explorer/Panes/RenewAdHocAccessPane.html
index 9151cb114..ffccc4173 100644
--- a/src/Explorer/Panes/RenewAdHocAccessPane.html
+++ b/src/Explorer/Panes/RenewAdHocAccessPane.html
@@ -11,7 +11,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- Renew ad-hoc access header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/SaveQueryPane.html b/src/Explorer/Panes/SaveQueryPane.html
index 25a9fa86b..f0be41c9b 100644
--- a/src/Explorer/Panes/SaveQueryPane.html
+++ b/src/Explorer/Panes/SaveQueryPane.html
@@ -6,7 +6,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- Save Query header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: cancel">
             <img src="../../../images/close-black.svg" title="Close" alt="Close" />
           </div>
diff --git a/src/Explorer/Panes/SettingsPane.html b/src/Explorer/Panes/SettingsPane.html
index 88e7982b6..6d022f73b 100644
--- a/src/Explorer/Panes/SettingsPane.html
+++ b/src/Explorer/Panes/SettingsPane.html
@@ -12,7 +12,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- Settings Confirmation header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/SetupNotebooksPane.html b/src/Explorer/Panes/SetupNotebooksPane.html
index f4df7a823..a7a955bad 100644
--- a/src/Explorer/Panes/SetupNotebooksPane.html
+++ b/src/Explorer/Panes/SetupNotebooksPane.html
@@ -6,7 +6,7 @@
       <div class="paneContentContainer">
         <!-- Setup notebooks header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/StringInputPane.html b/src/Explorer/Panes/StringInputPane.html
index c5e493c6f..5335d84fe 100644
--- a/src/Explorer/Panes/StringInputPane.html
+++ b/src/Explorer/Panes/StringInputPane.html
@@ -6,7 +6,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- String Input header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: cancel"></div>
         </div>
         <!-- String Input header - End -->
diff --git a/src/Explorer/Panes/SwitchDirectoryPane.html b/src/Explorer/Panes/SwitchDirectoryPane.html
index dbe141d5f..a7abe84a7 100644
--- a/src/Explorer/Panes/SwitchDirectoryPane.html
+++ b/src/Explorer/Panes/SwitchDirectoryPane.html
@@ -5,7 +5,7 @@
     <div class="contextual-pane-in">
       <!-- Switch Directory header - Start -->
       <div class="firstdivbg headerline">
-        <span data-bind="text: title"></span>
+        <span role="heading" aria-level="2" data-bind="text: title"></span>
         <div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: close">
           <img src="../../../images/close-black.svg" title="Close" alt="Close" />
         </div>
diff --git a/src/Explorer/Panes/Tables/TableEditEntityPane.html b/src/Explorer/Panes/Tables/TableEditEntityPane.html
index bc734b9d7..435d5ea3f 100644
--- a/src/Explorer/Panes/Tables/TableEditEntityPane.html
+++ b/src/Explorer/Panes/Tables/TableEditEntityPane.html
@@ -19,7 +19,7 @@
       >
         <!-- Edit table entity header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"
diff --git a/src/Explorer/Panes/UploadFilePane.html b/src/Explorer/Panes/UploadFilePane.html
index 041a380f1..fc98419bb 100644
--- a/src/Explorer/Panes/UploadFilePane.html
+++ b/src/Explorer/Panes/UploadFilePane.html
@@ -6,7 +6,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- Upload File header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: cancel">
             <img src="../../../images/close-black.svg" title="Close" alt="Close" />
           </div>
diff --git a/src/Explorer/Panes/UploadItemsPane.html b/src/Explorer/Panes/UploadItemsPane.html
index ba77e85bc..2073f1b6a 100644
--- a/src/Explorer/Panes/UploadItemsPane.html
+++ b/src/Explorer/Panes/UploadItemsPane.html
@@ -11,7 +11,7 @@
       <form class="paneContentContainer" data-bind="submit: submit">
         <!-- Upload items header - Start -->
         <div class="firstdivbg headerline">
-          <span data-bind="text: title"></span>
+          <span role="heading" aria-level="2" data-bind="text: title"></span>
           <div
             class="closeImg"
             role="button"