website themeing, accessibility

[thomaszwagerman]

Issue to record decision-making around website styling.

Just gathering some resources on accessibility, feel free to add:

• a11y theme
• image-alt option used where possible, alt text guidane
• prismatic, colour blindness https://emilhvitfeldt.github.io/prismatic/
• accessibility checker https://github.com/feddelegrand7/savonliquide, used with shiny in the past but never tried it with quarto?

[thomaszwagerman]

starting themeing in themeing branch, please feel free to contribute

[thomaszwagerman]

reactable table does not play nicely with dynamic changeing of themes (light/dark) in quarto. We need to implement something like this, which is a function I have used in Shiny:

#' Getting a reactable table theme according to light/darkmode
#'
#' @description This function returns a table of
#' general information for a minileague. Automatically return a
#' table for the current gameweek.
#'
#' @param current_theme the theme is format "dark" or "light"
#'
#' @export
#'
reactable_table_theme <- function(current_theme) {
  if (current_theme() == "dark") {
    reactable::reactableTheme(
      backgroundColor = "#37003c",
      borderColor = "black",
      color = "#00ff88"
      # style = list(
      #   fontFamily = reactablefmtr::google_font("Atkinson Hyperlegible")
      # )
    )
  } else {
    reactable::reactableTheme(
      backgroundColor = "white",
      borderColor = "black",
      color = "#37003c"
      # style = list(
      #   fontFamily = reactablefmtr::google_font("Atkinson Hyperlegible")
      # )
    )
  }
}

The issue is that this function does not carry over in Quarto, because current_theme() is a reactive, which we can't use here.

[thomaszwagerman]

Below is a static option, from https://glin.github.io/reactable/articles/examples.html#theming

options(reactable.theme = function() {
  theme <- reactableTheme(
    color = "hsl(233, 9%, 85%)",
    backgroundColor = "hsl(233, 9%, 19%)",
    borderColor = "hsl(233, 9%, 22%)",
    stripedColor = "hsl(233, 12%, 22%)",
    highlightColor = "hsl(233, 12%, 24%)",
    inputStyle = list(backgroundColor = "hsl(233, 9%, 25%)"),
    selectStyle = list(backgroundColor = "hsl(233, 9%, 25%)"),
    pageButtonHoverStyle = list(backgroundColor = "hsl(233, 9%, 25%)"),
    pageButtonActiveStyle = list(backgroundColor = "hsl(233, 9%, 28%)")
  )

  if (isTRUE(getOption("rstudio.notebook.executing"))) {
    if (requireNamespace("rstudioapi", quietly = TRUE) && rstudioapi::getThemeInfo()$dark) {
      return(theme)
    }
  }
})

This sets a global theme for reactable, but we need the quarto equivalent of rstudioapi::getThemeInfo()$dark

[thomaszwagerman]

need a way to call body.quarto-dark?