Create unique aria labels for buttons in reactable

Question

I am using reactable to create interactive tables in an HTML document in R Markdown. In order to make my tables better compliant with WCAG standards, I need to assign unique aria labels to buttons embedded in the tables, so that screen readers can distinguish which buttons do what. I can customize the aria label through reactableLang and detailsExpandLabel with a character string. However, this only allows me to replace the default static label (“Toggle details”) with another static label. I would like to have a unique label for each button based on the value from another column in the same row. However, I cannot figure out the syntax or if what I want to do is even possible using this method. Thank you!

The line in question is detailsExpandLabel = . . . I tried using paste0("Notes for ", df$Unique.ID), but that created the same aria label for each button consisting of all the values for df$Unique.ID. I also tried writing a function with [index] and also a for loop, but did not have any success.

library(tidyverse)
library(reactable)

df <- iris %>% dplyr::mutate(Unique.ID = sample(500, size = nrow(iris), replace = FALSE),
                             Notes = dplyr::case_when(Petal.Length < 1.5 | Petal.Width > 2.1 ~ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                                                      TRUE ~ NA_character_)) %>%
               dplyr::relocate(Unique.ID, .before = Sepal.Length)


reactable::reactable(
            dplyr::select(df, -Notes),
            details = reactable::colDef(
              name = "Notes",
              details = function(index) {
                note <- df$Notes[index]
                if (!is.na(note)) {
                  return(note)
                }
              }
            ),
            language =  reactable::reactableLang(
                detailsExpandLabel = "Notes for {Unique.ID}"
              )
            )

score 1 · Answer 1 · answered Apr 23 '23 at 03:45

I'm not familiar with the frameworks so I don't know what the code would look like to generate it, but what you're looking for are row headers.

Example:

    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Favorite Snack</td>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">James</th>
          <td >Donuts</td>
          <td><button>Details</button></td>
        </tr>
        <tr>
          <th scope="row">Goku</th>
          <td>Rice</td>
          <td><button>Details</button></td>
        </tr>
      </tbody>
    </table>

Using this approach, the user can gain all the context they need from the table headers. If they navigate horizontally through row 1, they know they are still in the James row (or can find that out easily). From there, if the user navigates down to the next Details button it will announce its relationship to the Goku row header cell, giving them sufficient context.

Quick note on the button itself. I'm inferring that the Details button will show additional contents inline or something similar, so it'd be worth taking a look at the Disclosure design pattern in the WAI-ARIA documentation.

Create unique aria labels for buttons in reactable

1 Answers1