Skip to content

Use semantic elements in sidebar #580

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 10, 2023
Merged

Use semantic elements in sidebar #580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2533799
Use `<header>` for default `.sidebar-title` element
gadenbuie May 15, 2023
a1cdea3
Use `<aside>` for sidebar element
gadenbuie May 15, 2023
af1b38a
feat(sidebar): Don't set `role="main"`
gadenbuie Oct 6, 2023
f5eeccf
tests: Update snaps
gadenbuie Oct 6, 2023
2d78f9a
docs: Add NEWS item
gadenbuie Oct 10, 2023
de74229
Merged origin/main into sidebar/header
gadenbuie Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions NEWS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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

Expand Down
8 changes: 3 additions & 5 deletions R/sidebar.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 <-
Expand All @@ -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(
Expand Down Expand Up @@ -212,7 +211,6 @@ layout_sidebar <- function(
}

main <- div(
role = "main",
class = "main",
class = if (fillable) "bslib-gap-spacing",
style = css(
Expand Down
2 changes: 1 addition & 1 deletion man/sidebar.Rd
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions tests/testthat/_snaps/page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down