如何修改R Shiny中tabPanel的tabindex以修复键盘导航无障碍问题

问题背景 #

Shiny的tabPanel组件存在无障碍缺陷：标签页被点击访问后，其tabindex会被自动设置为-1，导致依赖键盘导航的用户无法再通过Tab键聚焦到这些标签页（初始状态下tabindex为0，可正常访问）。你使用Shiny 1.7.2和R 4.0.3，尝试过bslib、CSS、htmltools::tagAppendAttribute等方法均未解决。

解决方案：JavaScript强制重置tabindex #

核心思路是通过JavaScript监听标签页的切换事件，在每次切换完成后，强制将所有标签页的tabindex重置为0，覆盖Shiny的默认行为。

完整可运行代码 #

library(shiny)

# Define UI 
ui <- navbarPage(
    title = "Test accessibility issue",
    tabPanel(title = "Home", icon = icon("house"), value = "home",
             p("Test")),
    tabPanel(title = "Trends", icon = icon("list-ul"), value = "trends",
             p("Test")),
    tabPanel(title = "Geography", icon = icon("globe"), value = "geo",
             p("Test")),
    # 添加自定义JS修复tabindex问题
    tags$script(HTML("
        // 监听Shiny标签页切换完成事件
        $(document).on('shiny:tabChanged', function() {
            // 找到所有导航栏的标签页链接
            $('.navbar-nav .nav-link').each(function() {
                // 强制设置tabindex为0，确保键盘可访问
                $(this).attr('tabindex', '0');
            });
        });
        
        // 补充监听点击事件，避免即时逻辑覆盖设置
        $('.navbar-nav').on('click', '.nav-link', function() {
            setTimeout(function() {
                $('.navbar-nav .nav-link').attr('tabindex', '0');
            }, 100);
        });
    "))
)

# Define server logic 
server <- function(input, output) {

}

# Run the application 
shinyApp(ui = ui, server = server)

代码说明 #

1. shiny:tabChanged事件监听：捕获Shiny内置的标签页切换完成事件，确保每次切换后统一重置所有标签的tabindex。
2. 点击事件补充处理：添加短延迟后重置tabindex，规避Shiny即时JS逻辑对设置的覆盖。
3. 精准元素定位：通过.navbar-nav .nav-link选择器定位所有导航标签，确保覆盖所有tabPanel对应的可交互元素。

验证方法 #

运行代码后：

• 初始状态按Tab键，可依次聚焦所有标签页
• 点击任意标签页后，再次按Tab键，依然能正常聚焦到所有标签页，解决原键盘导航失效问题

内容的提问来源于stack exchange，提问作者jvilla