Added heading role to pane title (#203)

Co-authored-by: Daniel Si Pham <v-danpha@microsoft.com>

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 && (
           <>

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" />

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" />

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"

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"

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"

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"

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"

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"

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"

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"

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"

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"

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>

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"

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"

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 -->

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>

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"

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>

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"