如何为Arbre生成的所有<li>标签添加tabindex="0"？

我来帮你搞定这个ADA合规的问题！在Arbre框架里给<li>标签设置tabindex="0"其实非常直接，咱们只需要利用Arbre元素的属性设置语法——它允许你在创建元素时直接传入HTML属性的哈希参数。

修改思路 #

Arbre的元素构造方法（比如li、a）都支持接收一个属性哈希作为第一个参数，用来设置对应的HTML标签属性。咱们只需要在创建<li>的时候，把tabindex: 0作为参数传进去就行。

修改后的完整代码 #

def nav_item_column_list(nav_item, row_number, column_number)
  sub_item = nav_item.children.where(column_number: column_number).all[row_number]
  if sub_item.present?
    Arbre::Context.new({:helper => self}) do
      ul do
        # 给顶级导航<li>添加tabindex="0"
        li(tabindex: 0) do
          a sub_item.title, href: sub_item.url
          if sub_item.children.count > 0
            ul do
              sub_item.children.each do |child|
                # 给子菜单的每个<li>添加tabindex="0"
                li(tabindex: 0) do
                  a child.title, href: child.url
                end
              end
            end
          end
        end
      end
    end
  end
end

说明 #

这样修改后，生成的每个<li>标签都会带上tabindex="0"属性，满足ADA合规中键盘可访问的要求。如果之后需要给这些元素添加其他HTML属性（比如role、aria-label等），也可以用同样的方式，直接在li方法里添加对应的键值对即可，比如：

li(tabindex: 0, role: "menuitem") do
  # ... 内容
end

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