change header to div.header in debugger for a11y

packages/debugger/src/sidebar.ts

@@ -223,7 +223,9 @@ namespace Private {
    * Create a sidebar header node.
    */
   export function createHeader(): HTMLElement {
-    const header = document.createElement('header');
+    const header = document.createElement('div');
+    header.classList.add('header');
+
     const title = document.createElement('h2');
 
     title.textContent = '-';

packages/debugger/style/sidebar.css

@@ -17,7 +17,7 @@
   height: 100%;
 }
 
-.jp-DebuggerSidebar header {
+.jp-DebuggerSidebar .header {
   border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
   box-shadow: var(--jp-toolbar-box-shadow);
   display: flex;
@@ -27,11 +27,11 @@
   height: 24px;
 }
 
-.jp-DebuggerSidebar > header {
+.jp-DebuggerSidebar > .header {
   background-color: var(--jp-layout-color1);
 }
 
-.jp-DebuggerSidebar header h2 {
+.jp-DebuggerSidebar .header h2 {
   text-transform: uppercase;
   font-weight: 600;
   font-size: var(--jp-ui-font-size0);
@@ -40,12 +40,12 @@
   padding-right: 4px;
 }
 
-.jp-DebuggerSidebar-body header {
+.jp-DebuggerSidebar-body .header {
   border-top: solid var(--jp-border-width) var(--jp-border-color1);
   background-color: var(--jp-layout-color2);
 }
 
-.jp-DebuggerSidebar-body .jp-DebuggerVariables header {
+.jp-DebuggerSidebar-body .jp-DebuggerVariables .header {
   border-top: none;
 }
 

packages/debugger/style/variables.css

@@ -36,7 +36,7 @@
   margin-left: 12px;
 }
 
-.jp-DebuggerVariables header .jp-Toolbar {
+.jp-DebuggerVariables .header .jp-Toolbar {
   margin-left: auto;
 }