Zoom button accessibility functionality in hcmap() - bug or feature?

[humoroussmile]

Hello! Your package has inspired me and my team and I cannot thank you enough!

I'm piggy-backing a bit on the last issue that was posted about accessibility, but it made sense (to me) to start a new issue. Basically, I'm wondering if the zoom features of the hc_mapNavigation() function, when enabled, allow for keyboard functionality within the zoom buttons. While I'm able to navigate to the zoom buttons using the TAB key on the keyboard, pressing the ENTER key on the keyboard upon navigating successfully to these buttons does not zoom the map in nor zoom the map out - the buttons only work with the mouse. To get accessibility to work within hcmap(), I'm using a fork of your package that enable the accessibility module from @batpigandme: https://github.com/batpigandme/highcharter/tree/module-testing (which works WONDERFULLY, thank you @batpigandme!!)

The reproducible example below is from your highcharter articles: https://jkunst.com/highcharter/articles/maps.html.

library(highcharter)

cities <- data.frame(
  name = c("London", "Birmingham", "Glasgow", "Liverpool"),
  lat = c(51.507222, 52.483056, 55.858, 53.4),
  lon = c(-0.1275, -1.893611, -4.259, -3),
  z = c(1, 2, 3, 2)
)

hcmap("countries/gb/gb-all", showInLegend = FALSE) %>%
  hc_add_series(
    data = cities, 
    type = "mappoint",
    name = "Cities", 
    minSize = "1%",
    maxSize = "5%"
  ) %>%
  hc_mapNavigation(enabled = TRUE)

Session Info

R version 4.1.2 (2021-11-01) Platform: x86_64-w64-mingw32/x64 (64-bit) Running under: Windows 10 x64 (build 19042) Matrix products: default locale: [1] LC_COLLATE=English_United States.1252 LC_CTYPE=English_United States.1252 LC_MONETARY=English_United States.1252 [4] LC_NUMERIC=C LC_TIME=English_United States.1252 attached base packages: [1] stats graphics grDevices datasets utils methods base other attached packages: [1] dplyr_1.0.7 httr_1.4.2 jsonlite_1.7.2 geojsonio_0.9.4 highcharter_0.9.4.9000 loaded via a namespace (and not attached): [1] zoo_1.8-9 tidyselect_1.1.1 remotes_2.4.2 purrr_0.3.4 sf_1.0-7 lattice_0.20-44 V8_4.1.0 [8] vctrs_0.3.8 generics_0.1.0 htmltools_0.5.1.1 yaml_2.2.1 utf8_1.2.2 rlang_0.4.11 e1071_1.7-9 [15] pillar_1.6.2 foreign_0.8-81 glue_1.4.2 httpcode_0.3.0 DBI_1.1.1 geojsonsf_2.0.2 sp_1.4-6 [22] TTR_0.24.3 lifecycle_1.0.0 quantmod_0.4.18 stringr_1.4.0 rgeos_0.5-9 htmlwidgets_1.5.4 maptools_1.1-3 [29] curl_4.3.2 class_7.3-19 fansi_0.5.0 broom_0.7.9 xts_0.12.1 Rcpp_1.0.7 KernSmooth_2.23-20 [36] renv_0.14.0 backports_1.2.1 classInt_0.4-3 digest_0.6.27 stringi_1.7.3 rlist_0.4.6.2 grid_4.1.2 [43] cli_3.0.1 jqr_1.2.3 tools_4.1.2 magrittr_2.0.1 lazyeval_0.2.2 proxy_0.4-26 geojson_0.3.4 [50] tibble_3.1.3 crul_1.2.0 crayon_1.4.1 tidyr_1.1.3 pkgconfig_2.0.3 ellipsis_0.3.2 data.table_1.14.0 [57] lubridate_1.7.10 rstudioapi_0.13 assertthat_0.2.1 R6_2.5.0 units_0.8-0 igraph_1.2.11 compiler_4.1.2

[batpigandme]

Hey @humoroussmile,

I made a very naïve re-creation of one of the native Highcharts Maps demos with the accessibility module enabled, and, like you described, I can focus on the zoom button with keyboard navigation, but I am not able to click on it by pressing enter.

The original demo from the Highcharts site is here https://www.highcharts.com/demo/maps/doubleclickzoomto, which can be opened in jsFiddle and/or CodePen where you can add the accessibility module. However, since there are a lot of frames involved on those sites, I find it tricky to test keyboard navigation stuff there. So I re-created it locally to test out (I put the files in a gist here).

I haven't worked with Highcharts Maps before, so it's possible I'm missing something, but I wasn't able to find anything obvious in the Maps API docs on mapNavigation. Maybe playing around with which type of navigation features are enabled would yield some of the keyboard navigation features you're hoping for?

My guess is that, since it doesn't work outside of highcharter (i.e. when using the Highcharts Maps API directly), that the fault isn't in the R package itself.

Let me know if you get it working or find a working example of what you're trying to do in Highcharts directly, and I'm happy to help see if we can try and re-create it with highcharter. That's basically my go-to method with this package! 🙂

Mara

[humoroussmile]

Hi @batpigandme,

Thank you for the quick reply! It looks like you and I went down most of the same paths (except I did not re-create the original demo locally to test it out, I simply opened it in CodePen to add the accessibility module, but like you was overwhelmed by all of the frames involved and so found keyboard navigation basically impossible). I'm very glad, albeit disappointed, that I'm not the only one unable to do this, and that it's not something obvious I've missed.

I'm very new to Highcharts Maps (and Highcharts/Highcharter in general), but spent a few hours in the Maps API docs on mapNavigation, like you, but found nothing obvious that would enable this feature. I agree it seems unlikely that it's the R package, but instead perhaps something in Highcharts (accessibility.js?).

I'll keep playing around! Basically, I'm just futzing around with the accessibility features with an undetermined goal at this time. One key approach I often take when developing any interactive graphics/plots for public consumption using other R packages is not including any features that cannot be accessed without a mouse, and I usually run into this sort of problem when developing Shiny apps. Therefore, in this case, I would disable all zoom features or other tooltips features (such as when using ggplotly()). I don't necessarily find zoom features in maps to be enormously helpful, but I'm curious (and determined) to get this to work anyway to argue for yet another excellent feature of accessible interactivity in Highcharts Maps (and other charts) that is unavailable in other interactive tools.

I'll develop a working example that could demonstrate a use case for zooming in on a map (perhaps USA to state to county) where mappoint information is too clustered to see when zoomed out and share back here. Thank you so much for offering to help and already digging into this with me!

[batpigandme]

I wanted to "quickly see" if I could get the accessibility module working with highcharter, and ended up writing five blog posts on it, and giving a talk. So, obviously I can relate! 😂

Looking forward to hearing what you come up with in the end. Luckily, the Highcharts docs are pretty darn good (I've also spent hours in there when trying to get specific features working). Good luck!

[humoroussmile]

I'm wrapping back around with an update! This is the product/dashboard we've developed: TBD

Basically what we're running into is that we have several overlapping dots in one area of this Highcharter map (Maryland/DC area of the United States of America). We'd like users to be able to zoom into this area using the Zoom buttons provided in Highcharts/Highcharter so they can easily access each dot without struggling to see how many dots there are fully zoomed out while easily accessing their tooltips, but we have to remove the zoom buttons as they are not 508 compliant, i.e., as mentioned before users can navigate to the zoom buttons with the keyboard but they cannot activate them using the keyboard.

I think I agree that this may actually be an accessibility functionality that does not exist in highcharts, and therefore not in highcharter, but if there is another option or work around I'd love input. Otherwise this would be a great accessibility feature to add to the accessibility module if possible!

[batpigandme]

Otherwise this would be a great accessibility feature to add to the accessibility module if possible!

Have you filed a feature request in Highcharts (Highcharts GitHub repo here)?

I agree that it would be a great feature—the accessibility module is just an import from their library of modules, so I think this would be best resolved upstream. 🙂

[humoroussmile]

Done! Thanks, @batpigandme!

[humoroussmile]

Hi Everyone! Bumping this conversation to see if there is a way to confirm that the fix from https://github.com/highcharts/highcharts/issues/17355 requires a new version or if the import from the accessibility module via this package is enough? Thanks!!

[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.