Joomla and Make the menu more accessible

Question

I am trying to make a Joomla menu more accessible. I am using Bootstrap 3 and letting Joomla generate the menu and dropdowns but I need to add ' data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" ' to the top level href among some other aria elements (See example below). However cannot figure out how to use the template overrides to input the information I need. I would prefer not to have to code the menu manually but I will if I have too.

<ul class="nav  navbar-nav" >
   <li class="dropdown">
      <a href="#" 
         id="toplevelitem" 
         class="dropdown-toggle" 
         data-toggle="dropdown" 
         role="button" 
         aria-haspopup="true" 
         aria-expanded="false"
      >
       Top Level Item
       <span class="caret"></span></a>
       <ul class="dropdown-menu" role="menu" aria-labelledby="toplevelitem">
          <li role="presentation"><a role="menuitem" href="#">Item 1</a></li>
          <li role="presentation"><a role="menuitem" href="#">Item 2</a></li>
          <li role="presentation"><a role="menuitem" href="#">Item 3</a></li>
       </ul>
   </li>
</ul>

Answer 1

Copy these files

• ../modules/mod_menu/tmpl/default.php
• ../modules/mod_menu/tmpl/default_url.php

to folder

• ../templates/your_template_name/html/mod_menu/

Edit the file ../templates/your_template_name/html/mod_menu/default.php and change this code below (arround lines 62) :

if ($item->deeper)
    {
        $class .= ' deeper';
    }

    if ($item->parent)
    {
        $class .= ' parent';
    }

to

if ($item->deeper)
    {
        $class .= ' dropdown';
    }

    if ($item->parent)
    {
        $class .= ' parent';
    }
    if (($item->level == 2) && ($item->parent)) {
        $class .= ' dropdown-submenu';
    }
    if (!empty($class))
    {
        $class = ' class="' . trim($class) . '"';
    }

and at line 86

if ($item->deeper)
    {
        echo '<ul class="nav-child unstyled small">';
    }

to

if ($item->deeper)
    {
        echo '<ul class="dropdown-menu">';
    }

then open file ../templates/your_template_name/html/mod_menu/default_url.php and add this code

if ($item->parent)
{
    $attributes['class'] = 'dropdown-toggle';
    $attributes['data-toggle'] = 'dropdown';
    $attributes['role'] = 'button';
    $attributes['aria-haspopup'] = 'true';
    $attributes['aria-expanded'] = 'false';
    $linktype = $item->title . '<span class="caret"></span>';

}

I haven't tested it yet, but you should get the idea for further modifications, if needed.