How do I add tabindex="0" to every <li> in Arbre

173 views Asked by At

I'm updating some old code to be ADA compliant and need to give each <li> in the nav tabindex="0" so they are all accessible via keyboard.

This is the code that generates the navigation <li>s. It wasn't written by me and I only knew what Arbre was because a senior dev pointed it out but neither of us are sure how to add the 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

end

1

There are 1 answers

4
nathanvda On

While the documentation is compact, it says

Tag attributes including id and HTML classes are passed as a hash parameter and the tag body is passed as a block

So I would guess you could write something like

li tabindex: 0 do 

So I tested this:

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