0

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>
  • Link to site and more info about the template in question would be nice. – Mikan Nov 8 '16 at 10:55
  • @Mikan I didn't include a link to the site because its not needed, it is a basic question of how to inset additional information into the Joomla href at run-time via the template overrides. – Chad J Treadway Nov 9 '16 at 14:37
  • OK, if you say so... – Mikan Nov 9 '16 at 14:56
0

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.

  • I am marking this a accetped, however I did make a few adjustments to get the final product: I used: if ($item->level == 2) vs if (($item->level == 2) && ($item->parent)) The line 86 I added the item id: echo '<ul class="dropdown-menu" role="menu" aria-labelledby="'.$itemId.'">'; The rest was spot on! I also added the Paypal Bootstrap Accessibility Plugin and it works like a charm! paypal.github.io/bootstrap-accessibility-plugin – Chad J Treadway Nov 17 '16 at 11:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.