Keyboard navigation (accessibility setting) not working

[jenfly]

Hello! I'm using Highcharter (v 0.8.2) to create charts in a Shiny app, and I'm trying to enable the keyboard navigation option for accessibility, but I can't seem to get it working and am wondering if it's a bug?

The expected behaviour I'm trying to achieve is shown here -- when I use the Tab key in the Codepen output, the focus ring goes first to the "something focusable" link, then to the first bar in the chart, where I can use the right arrow to navigate through the bars (allowing a screen reader to read each one, for example), and if I press tab again, it goes to the legend, then to the context menu button, and finally to the generic "Button" I included at the bottom of the page.

Whereas in this example Shiny app, when I tab through the page, the keyboard focus goes to the "something focusable" link and then skips the chart entirely and goes to the generic "Button" at the bottom of the page. The code for this example is below:

# app.R

library(highcharter)
library(shiny)

ui <- fluidPage(
  h1("Highcharts Test"), 
  p("Here is ", a(href="#", "something focusable")), 
  highchartOutput("fruits"),
  actionButton("button1", "Button")
)

server <- function(input, output, session){

  data <- data.frame(
    fruit = c("apple", "banana", "orange", "pear"),
    count = c(2, 3, 5, 4)
  )

  hc_opts <- list( 
    accessibility = list(
      enabled = TRUE,
      keyboardNavigation = list(enabled = TRUE)
    ),  
    exporting = list(
      enabled = TRUE
    )
  )

  output$fruits <- renderHighchart({    
    highchart(hc_opts) %>%
      hc_xAxis(categories = data$fruit) %>% 
      hc_add_series(
        type = "column",
        name = "Count", 
        data = data$count
      ) %>%
      hc_title(text = "Fruits")
  })
}

shinyApp(ui = ui, server = server)

I also tried modifying the above example by adding %>% hc_add_dependency("modules/accessibility.js") to the highchart object, and it caused the bars in the bar chart to disappear (and the keyboard focus still wouldn't go onto the chart at all).

Thank you!

[batpigandme]

I have been able to get all but one of the accessibility features working in highcharter, so this might be an issue with Shiny interaction (i.e. a duplicate of issue #719)

Example below (you'll have to run, since you can't see the keyboard navigation, etc. in a webshot)

I wrote simpler versions using tidied data, but there wasn't a way to add the dual encoding for dashStyle, since it's not an aesthetic property.

# Indiv data series in different style ------------------------------------
# recreating first example here: https://www.highcharts.com/docs/accessibility/accessibility-module
# using Joshua Kunst's pattern fill examples as a model
# see them here: https://jkunst.com/highcharter/articles/modules.html#pattern-fills-1

library(tidyverse)
library(highcharter)

url <- "https://gist.githubusercontent.com/batpigandme/aeb30566f899cdcdeb6024c0344d1ae1/raw/9cbafbbc99311c04b1a675e0ebb3953692fd51b8/pop-screenreaders.csv"
raw_dat <- read_csv(url)

# turn Category into ordered factor and remove inconsistent period
sr_dat3 <- raw_dat %>%
  mutate(Category = str_replace_all(Category, "\\.", "")) %>%
  mutate(Category = as_factor(Category))

# OK, this one works — gives legend and double encoding
# But, I can't get the range in the xAxis screen reader description
hc_sr_setup <- highchart() %>%
  # add dependencies
  hc_add_dependency(name = "plugins/series-label.js") %>%
  hc_add_dependency(name = "plugins/accessibility.js") %>%
  hc_add_dependency(name = "plugins/exporting.js") %>%
  hc_add_dependency(name = "plugins/export-data.js") %>%
  hc_chart(type = "spline") %>%
  hc_title(text = "Most common desktop screen readers") %>%
  hc_subtitle(text = "Source: WebAIM.") %>%
  hc_caption(text = "Line chart demonstrating some accessibility features of Highcharts. The chart displays the most commonly used screen readers in surveys taken by WebAIM from December 2010 to September 2019. JAWS was the most used screen reader until 2019, when NVDA took over. VoiceOver is the third most used screen reader, followed by Narrator. ZoomText/Fusion had a surge in 2015, but usage is otherwise low. The overall use of other screen readers has declined drastically the past few years.") %>%
  hc_xAxis(categories = sr_dat3$Category,
           title = list(text = "Time"),
           accesibility = list(
             enabled = TRUE,
             description = "Time from December 2010 to September 2019"
             )
  ) %>%
  hc_yAxis(
    title = list(text = "Percentage usage"),
    accessibility = list(description = "Percentage usage")
  ) %>%
  hc_plotOptions(
    spline = list(
      accessibility = list(
        enabled = TRUE,
        keyboardNavigation = list(enabled = TRUE)
      )
    )
  )

# try adding the series
hc_sr_setup %>%
  hc_add_series(
    data = sr_dat3$NVDA,
    name = "NVDA",
    color = "#49a65e",
    label = list(enabled = TRUE)
    ) %>%
  hc_add_series(
    data = sr_dat3$JAWS,
    name = "JAWS",
    color = "#5f98cf",
    dashStyle = "ShortDashDot",
    label = list(enabled = TRUE)
    ) %>%
  hc_add_series(
    data = sr_dat3$VoiceOver,
    name = "VoiceOver",
    color = "#434348",
    dashStyle = "ShortDot",
    label = list(enabled = TRUE)
    ) %>%
  hc_add_series(
    data = sr_dat3$Narrator,
    name = "Narrator",
    color = "#b381b3",
    dashStyle = "Dash",
    label = list(enabled = TRUE)
    ) %>%
  hc_add_series(
    data = sr_dat3$`ZoomText/Fusion`,
    name = "ZoomText/Fusion",
    color = "#b68c51",
    dashStyle = "ShortDot",
    label = list(enabled = TRUE)
    ) %>%
  hc_add_series(
    data = sr_dat3$Other,
    name = "Other", color = "#f45b5b",
    dashStyle = "ShortDash",
    label = list(enabled = TRUE)
    ) %>%
  hc_exporting(
    enabled = TRUE,
    accessibility = list(
      enabled = TRUE
    )
  ) %>%
  hc_tooltip(valueSuffix = "%")

[batpigandme]

Rendered example here: http://rpubs.com/maraaverick/accessible-highcharter

[batpigandme]

And here's your example (albeit outside of shiny) working https://rpubs.com/maraaverick/highcharter-fruits-example

[jenfly]

Thank you @batpigandme! This does indeed seem to be an issue with Shiny interaction.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. Feel free to reopen it if you find it necessary.

[Tilskot]

This still seems to be an issue. Has anyone found a solution here? Would be highly appreciated.

[humoroussmile]

I recommend checking the following issues and forks:

https://github.com/jbkunst/highcharter/pull/780 https://github.com/jbkunst/highcharter/issues/755