Use semantic elements in sidebar (#580)

gadenbuie · web-flow · commit 11a82812d9ba · 2023-10-10T16:09:32.000-04:00
diff --git a/NEWS.md b/NEWS.md
@@ -38,6 +38,8 @@
 
 * `layout_sidebar()` received a new design. The button to collapse and expand the sidebar now appears at the top edge of the sidebar, and we now use the [arrow-bar-left](https://icons.getbootstrap.com/icons/arrow-bar-left/) icon instead of [chevron-left](https://icons.getbootstrap.com/icons/chevron-left/). On mobile devices, the sidebar now fills the `layout_sidebar()` area as an overlay, rather than expanding from above the main content area. **Note** the `max_mobile_height` argument of `sidebar()` determines the maximum height of the sidebar area on mobile, but it now only applies when `open = "always"`. (#798)
 
+* `layout_sidebar()` now uses an `<aside>` element for the sidebar's container and a `<header>` element for the sidebar title. The classes of each element remain the same, but the semantic meaning of the elements is now better reflected in the HTML markup. (#580)
+
 ## Bug fixes
 
 * `toggle_switch()` now works correctly when called from within a Shiny module. `update_switch()` worked as expected, but `toggle_switch()` didn't apply the module's namespace to the `id` of the switch to be updated. (#769)
@@ -46,6 +48,8 @@
 
 * A double border no longer appears when an accordion is used inside a `sidebar(open="always")` context. (#795)
 
+* `layout_sidebar()` no longer gives the sidebar main content area the `role="main"` attribute. (#580)
+
 
 # bslib 0.5.1
 
diff --git a/R/sidebar.R b/R/sidebar.R
@@ -42,7 +42,7 @@
 #' @param id A character string. Required if wanting to re-actively read (or
 #'   update) the `collapsible` state in a Shiny app.
 #' @param title A character title to be used as the sidebar title, which will be
-#'   wrapped in a `<div>` element with class `sidebar-title`. You can also
+#'   wrapped in a `<header>` element with class `sidebar-title`. You can also
 #'   provide a custom [htmltools::tag()] for the title element, in which case
 #'   you'll likely want to give this element `class = "sidebar-title"`.
 #' @param bg,fg A background or foreground color. If only one of either is
@@ -119,7 +119,7 @@ sidebar <- function(
   }
 
   if (rlang::is_bare_character(title) || rlang::is_bare_numeric(title)) {
-    title <- div(title, class = "sidebar-title")
+    title <- tags$header(title, class = "sidebar-title")
   }
 
   collapse_tag <-
@@ -135,9 +135,8 @@ sidebar <- function(
     }
 
   res <- list2(
-    tag = tags$div(
+    tag = tags$aside(
       id = id,
-      role = "complementary",
       class = c("sidebar", class),
       hidden = if (open == "closed") NA,
       tags$div(
@@ -212,7 +211,6 @@ layout_sidebar <- function(
   }
 
   main <- div(
-    role = "main",
     class = "main",
     class = if (fillable) "bslib-gap-spacing",
     style = css(
diff --git a/man/sidebar.Rd b/man/sidebar.Rd
diff --git a/tests/testthat/_snaps/page.md b/tests/testthat/_snaps/page.md
@@ -35,10 +35,10 @@
       <body class="bslib-page-fill bslib-gap-spacing bslib-page-sidebar html-fill-container" style="padding:0px;gap:0px;--bslib-page-fill-mobile-height:auto;">
         <h1 class="bslib-page-title">Title</h1>
         <div class="bslib-sidebar-layout bslib-mb-spacing html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-init="TRUE" data-bslib-sidebar-open="always" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--bslib-sidebar-width:250px;--bslib-sidebar-max-height-mobile:250px;">
-          <div class="main bslib-gap-spacing html-fill-container" role="main">main</div>
-          <div role="complementary" class="sidebar">
+          <div class="main bslib-gap-spacing html-fill-container">main</div>
+          <aside class="sidebar">
             <div class="sidebar-content bslib-gap-spacing"></div>
-          </div>
+          </aside>
           <script data-bslib-sidebar-init>bslib.Sidebar.initCollapsibleAll()</script>
         </div>
       </body>
@@ -51,10 +51,10 @@
       <body class="bslib-page-fill bslib-gap-spacing bslib-page-sidebar html-fill-container" style="padding:0px;gap:0px;--bslib-page-fill-mobile-height:auto;">
         <h1 class="bslib-page-title">Title</h1>
         <div class="bslib-sidebar-layout bslib-mb-spacing html-fill-item" data-bslib-sidebar-border="false" data-bslib-sidebar-border-radius="false" data-bslib-sidebar-init="TRUE" data-bslib-sidebar-open="desktop" data-require-bs-caller="layout_sidebar()" data-require-bs-version="5" style="--bslib-sidebar-width:250px;--bslib-sidebar-max-height-mobile:250px;">
-          <div class="main bslib-gap-spacing html-fill-container" role="main">main</div>
-          <div id="bslib-sidebar-4785" role="complementary" class="sidebar">
+          <div class="main bslib-gap-spacing html-fill-container">main</div>
+          <aside id="bslib-sidebar-4785" class="sidebar">
             <div class="sidebar-content bslib-gap-spacing">side</div>
-          </div>
+          </aside>
           <button class="collapse-toggle" type="button" title="Toggle sidebar" aria-expanded="true" aria-controls="bslib-sidebar-4785"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="bi bi-arrow-bar-left collapse-icon" style="height:;width:;fill:currentColor;vertical-align:-0.125em;" aria-hidden="true" role="img" ><path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z"></path></svg></button>
           <script data-bslib-sidebar-init>bslib.Sidebar.initCollapsibleAll()</script>
         </div>
