【问题标题】:How do I add tabindex="0" to every <li> in Arbre如何将 tabindex="0" 添加到 Arbre 中的每个 <li>
【发布时间】:2019-12-19 14:53:44
【问题描述】:

我正在更新一些旧代码以符合 ADA 标准,并且需要在导航 tabindex="0" 中提供每个 &lt;li&gt;,以便它们都可以通过键盘访问。

这是生成导航&lt;li&gt;s 的代码。它不是我写的,我只知道 Arbre 是什么,因为一位高级开发人员指出了这一点,但我们都不知道如何添加 tabindex。

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 do
        a sub_item.title, href: sub_item.url
        if sub_item.children.count > 0
          ul do
            sub_item.children.each do |child|
              li do
                a child.title, href: child.url
              end
            end
          end
        end
      end
    end
  end
end

结束

【问题讨论】:

    标签: html ruby-on-rails arbre


    【解决方案1】:

    虽然文档很紧凑,但它说

    标签属性包括id和HTML类作为散列参数传递,标签主体作为块传递

    所以我猜你可以写类似的东西

    li tabindex: 0 do 
    

    所以我测试了这个:

    Arbre::Context.new { li tabindex: 0 }
    => <li tabindex="0"></li>
    

    【讨论】:

    • 我试过了,但没有看到 tabindex 被添加。
    • 好的,我安装了 gem 并尝试了它并且 afaik 它只是工作(我编辑了我的答案)。你是怎么尝试的?
    • 我将li do 替换为li tabindex: 0 do 在您编辑的答案中,Arbre::Context.new { li tabindex: 0 } =&gt; &lt;li tabindex="0"&gt;&lt;/li&gt; 会在我发布的代码中出现在哪里?我以前从未使用过 Arbre,这是我见过的网站中唯一使用它的部分,所以我对它的工作原理非常迷茫。
    • 您阅读文档了吗? Arbre::Context.new 需要一个块,所以你应该做同样的事情。您是否替换了所有出现的 li (因为它多次出现?我猜顶级是最重要的?您如何验证它是否有效?您可以测试该方法并检查 @ 中的输出吗? 987654328@?或者有没有测试覆盖?
    猜你喜欢
    • 2012-02-06
    • 1970-01-01
    • 1970-01-01
    • 2021-11-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-07
    • 1970-01-01
    相关资源
    最近更新 更多