diff --git a/docs/_layouts/api.html b/docs/_layouts/api.html
index f759d376c..500932009 100644
--- a/docs/_layouts/api.html
+++ b/docs/_layouts/api.html
@@ -20,7 +20,7 @@
 
                     {% assign tree_url = site.baseurl | append: "/docs/" | append : tree[0] | append: "/v3/api/" %}
 
-                    <li class="c-tree__item o-list-bare__item">
+                    <li class="c-tree__item o-list-bare__item" role="treeitem">
                         <div class="c-tree__toggle js-tree-toggle{% if page_url == tree_url %} is-open is-active{% endif %}">
                             <a href="{{ tree_url }}" {% if page_url == tree_url %}class="is-active"{% endif %}>
                                 {{ tree[0] }}
diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index 6c075a425..f922bffad 100644
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -24,7 +24,7 @@
             <div class="o-layout__item u-1/4@tablet c-tree-stick">
                 <ul id="site-tree" class="c-tree o-list-bare" role="tree">
                     {% for tree in site.data.tree %}
-                    <li class="c-tree__item o-list-bare__item">
+                    <li class="c-tree__item o-list-bare__item" role="treeitem">
                         <div class="c-tree__toggle js-tree-toggle">
                             {{ tree[0] }}
                         </div>
diff --git a/docs/_sass/settings/_settings.colors.scss b/docs/_sass/settings/_settings.colors.scss
index 34310cceb..369635b2a 100644
--- a/docs/_sass/settings/_settings.colors.scss
+++ b/docs/_sass/settings/_settings.colors.scss
@@ -1308,7 +1308,7 @@ $ms-gray: (
 
 /// @group Black
 /// @type Color
-$ms-black-100: #f2f2f2;
+$ms-black-100: #f5f5f5;
 
 /// @group Black
 /// @type Color
diff --git a/docs/app/js/sanddance-app.js b/docs/app/js/sanddance-app.js
index 3f71492d8..259253063 100644
--- a/docs/app/js/sanddance-app.js
+++ b/docs/app/js/sanddance-app.js
@@ -56437,10 +56437,10 @@ function Sidebar(props) {
     }, (0, _base.base).react.createElement("div", {
         className: "sidebar-content"
     }, (0, _base.base).react.createElement((0, _dataScope.DataScope), Object.assign({}, props.dataScopeProps)), (0, _base.base).react.createElement("div", {
-        className: "vbuttons",
-        role: 'tablist'
+        className: "vbuttons"
     }, (0, _base.base).react.createElement("div", {
-        className: "sidebar-dialogs"
+        className: "sidebar-dialogs",
+        role: 'tablist'
     }, sidebuttons.map((sidebutton, i)=>(0, _base.base).react.createElement((0, _sideButton.Sidebutton), Object.assign({
             key: i
         }, props, sidebutton, {
diff --git a/docs/dist/sanddance-explorer/v4/sanddance-explorer.js b/docs/dist/sanddance-explorer/v4/sanddance-explorer.js
index c40c0f9ab..7bbd59670 100644
--- a/docs/dist/sanddance-explorer/v4/sanddance-explorer.js
+++ b/docs/dist/sanddance-explorer/v4/sanddance-explorer.js
@@ -47152,10 +47152,10 @@ function $a4defabaac4a9afe$export$1ba59dacbcbf90fe(props) {
     }, (0, $a601a4135959dcb0$export$e2253033e6e1df16).react.createElement("div", {
         className: "sidebar-content"
     }, (0, $a601a4135959dcb0$export$e2253033e6e1df16).react.createElement((0, $86b892255d8eb4f0$export$3fb74a6ae4f1171d), Object.assign({}, props.dataScopeProps)), (0, $a601a4135959dcb0$export$e2253033e6e1df16).react.createElement("div", {
-        className: "vbuttons",
-        role: 'tablist'
+        className: "vbuttons"
     }, (0, $a601a4135959dcb0$export$e2253033e6e1df16).react.createElement("div", {
-        className: "sidebar-dialogs"
+        className: "sidebar-dialogs",
+        role: 'tablist'
     }, sidebuttons.map((sidebutton, i)=>(0, $a601a4135959dcb0$export$e2253033e6e1df16).react.createElement((0, $d7542c73853af2f5$export$a8fc19311f33df91), Object.assign({
             key: i
         }, props, sidebutton, {
diff --git a/docs/tests/data-inference/v1/index.html b/docs/tests/data-inference/v1/index.html
index d9e60143b..eefe448bd 100644
--- a/docs/tests/data-inference/v1/index.html
+++ b/docs/tests/data-inference/v1/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
     <meta charset="utf-8" />
@@ -7,8 +7,8 @@
     <title>Data-Inference test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <script src="https://unpkg.com/vega@^5.30/build/vega.js" charset="utf-8"></script>
-    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/default.min.css">
-    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.0/styles/a11y-light.css">
+    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.0/highlight.min.js"></script>
     <script src="js/data-inference.js"></script>
 
     <style>
diff --git a/docs/tests/v4/es6/js/sanddance-app.js b/docs/tests/v4/es6/js/sanddance-app.js
index 3f71492d8..259253063 100644
--- a/docs/tests/v4/es6/js/sanddance-app.js
+++ b/docs/tests/v4/es6/js/sanddance-app.js
@@ -56437,10 +56437,10 @@ function Sidebar(props) {
     }, (0, _base.base).react.createElement("div", {
         className: "sidebar-content"
     }, (0, _base.base).react.createElement((0, _dataScope.DataScope), Object.assign({}, props.dataScopeProps)), (0, _base.base).react.createElement("div", {
-        className: "vbuttons",
-        role: 'tablist'
+        className: "vbuttons"
     }, (0, _base.base).react.createElement("div", {
-        className: "sidebar-dialogs"
+        className: "sidebar-dialogs",
+        role: 'tablist'
     }, sidebuttons.map((sidebutton, i)=>(0, _base.base).react.createElement((0, _sideButton.Sidebutton), Object.assign({
             key: i
         }, props, sidebutton, {
diff --git a/packages/sanddance-explorer/src/controls/sidebar.tsx b/packages/sanddance-explorer/src/controls/sidebar.tsx
index a6229ba9a..061b2b6c8 100644
--- a/packages/sanddance-explorer/src/controls/sidebar.tsx
+++ b/packages/sanddance-explorer/src/controls/sidebar.tsx
@@ -70,8 +70,8 @@ export function Sidebar(props: Props) {
                 <DataScope
                     {...props.dataScopeProps}
                 />
-                <div className="vbuttons" role='tablist'>
-                    <div className="sidebar-dialogs">
+                <div className="vbuttons">
+                    <div className="sidebar-dialogs" role='tablist'>
                         {sidebuttons.map((sidebutton, i) => (
                             <Sidebutton
                                 key={i}