FocusTrapZone: FocusTrapZone

FocusTrapCalloutR Documentation



FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.

Note: Trapping focus will restrict interaction with other elements in the website such as the side nav. Turn off the "Use trap zone" toggle control to allow this interaction to happen again.

For more details and examples visit the official docs. The R package cannot handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.






Props to pass to the component. The allowed props are listed below in the Details section.


  • ariaLabelledBy string
    Sets the aria-labelledby attribute.

  • componentRef ⁠IRefObject<IFocusTrapZone>⁠
    Optional callback to access the IFocusTrapZone interface. Use this instead of ref for accessing the public methods and properties of the component.

  • disabled boolean
    Whether to disable the FocusTrapZone's focus trapping behavior.

  • disableFirstFocus boolean
    Do not put focus onto the first element inside the focus trap zone.

  • elementToFocusOnDismiss HTMLElement
    Sets the element to focus on when exiting the FocusTrapZone.

  • enableAriaHiddenSiblings boolean
    Puts aria-hidden=true on all non-ancestors of the current element, for screen readers. This is an experimental feature that will be graduated to default behavior after testing. This flag will be removed with the next major release.

  • firstFocusableSelector ⁠string | (() => string)⁠
    Class name (not actual selector) for first focusable item. Do not append a dot. Only applies if focusPreviouslyFocusedInnerElement is false.

  • focusPreviouslyFocusedInnerElement boolean
    Specifies which descendant element to focus when focus() is called. If false, use the first focusable descendant, filtered by the firstFocusableSelector property if present. If true, use the element that was focused when the trap zone last had a focused descendant (or fall back to the first focusable descendant if the trap zone has never been focused).

  • forceFocusInsideTrap boolean
    Whether the focus trap zone should force focus to stay inside of it.

  • ignoreExternalFocusing boolean
    If false (the default), the trap zone will restore focus to the element which activated it once the trap zone is unmounted or disabled. Set to true to disable this behavior.

  • isClickableOutsideFocusTrap boolean
    Whether clicks are allowed outside this FocusTrapZone.


Object with shiny.tag class suitable for use in the UI of a Shiny app.



ui <- function(id) {
  ns <- NS(id)

server <- function(id) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    output$focusTrapZone <- renderReact({
      useTrapZone <- isTRUE(input$useTrapZone)
      stackStyles <- list(root = list(
        border = if (useTrapZone) '2px solid #ababab' else 'transparent',
        padding = 10
      textFieldStyles <- list(root = list(width = 300));
      stackTokens = list(childrenGap = 8);

          disabled = !useTrapZone,
            horizontalAlign = "start",
            tokens = stackTokens,
            styles = stackStyles,
              value = FALSE,
              label = "Use trap zone",
              onText = "On (toggle to exit)",
              offText = "Off (toggle to trap focus)"
              label = "Input inside trap zone",
              styles = textFieldStyles
              href = "",
              target = "_blank",
              "Hyperlink inside trap zone"
          href = "",
          target = "_blank",
          "Hyperlink outside trap zone"

if (interactive()) {
  shinyApp(ui("app"), function(input, output) server("app"))

Appsilon/shiny.fluent documentation built on June 4, 2024, 7:02 p.m.