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 can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

FocusTrapCallout(...)

FocusTrapZone(...)

Arguments

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.

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = reactOutput("focusTrapZone"),
    server = function(input, output) {
      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);

        div(
          FocusTrapZone(
            disabled = !useTrapZone,
            Stack(
              horizontalAlign = "start",
              tokens = stackTokens,
              styles = stackStyles,
              Toggle.shinyInput("useTrapZone",
                value = FALSE,
                label = "Use trap zone",
                onText = "On (toggle to exit)",
                offText = "Off (toggle to trap focus)"
              ),
              TextField.shinyInput("textInput", label = "Input inside trap zone", styles = textFieldStyles),
              Link(href = "https://bing.com", target = "_blank", "Hyperlink inside trap zone")
            )
          ),
          Link(href="https://bing.com", target="_blank", "Hyperlink outside trap zone")
        )
      })
    }
  )
}