Forums

Autonav, dropdown accessibility

Permalink
Hello,
I am developing a website on 8.5. Looking to make sub menus on autonav keyboard accessible. PHP is not my forte. I have tried adding classes to submenus

if ($ni->hasSubmenu) {
//class for items that have dropdown sub-menus
$classes[] = 'nav-dropdown';
}

However since concrete5 uses the same object for parent menus and submenus I am struggling to add custom classes to submenus. Any help appreciated.
 
drbiskit replied on at Permalink Best Answer Reply 1 Attachment
drbiskit
You can try this AutoNav custom template, it should do what you need. It uses 'parent' as the class for the li, and then 'submenu' as the class for the child ul.

You'll need to look at the classes and write some JS + CSS to go with it - let me know if you need any assistance with that side of things.

Change the file extension from .txt to .php

Add it into ./application/blocks/autonav/templates

Edit your Autonav block and select the new custom template.
JohntheFish replied on at Permalink Reply
JohntheFish
Nav output in an autonav template is generated from a simple list of nav items that is turned into a tree structure in a single loop. The body of the loop generates steps up and down within branches of the nav tree.

An alternate template could easily add to this for:

- classes based on the nav level (as suggested by @drbiskit)

- a tab index based on a loop counter or '0' for document source order
nivims replied on at Permalink Reply
Thank you for your help. I have created a custom autonav. Set classes for items before the loop:

if ($ni->isCurrent) {
        //class for the page currently being viewed
        $classes[] = 'nav-selected';
        $ni->ariaCurrentPage = 'aria-current="page"';
}
if ($ni->hasSubmenu) {
        //class for items that have dropdown sub-menus
        $classes[] = 'nav-dropdown';
        $ni->ariaHasPopup = 'aria-haspopup="true"';
        $ni->ariaExpanded = 'aria-expanded="false"';
    }


Then got them working on the loop 
foreach ($navItems as $ni) {
        $name = (isset($translate) && $translate == true) ? t($ni->name) : $ni->name;
    if ($ni->hasSubmenu) {
        echo '<li clas="'. $ni->classes .'" ' . $ni->areaCurrentPage . $ni->ariaHasPopup . $ni->ariaExpanded .'>';
        echo '<a href="#" target="' . $ni->target . '" class="' . $ni->classes . '">' . $name . '</a>';
} else {
 echo '<li class="' . $ni->classes . '" ' . $ni->ariaCurrentPage . '>'; //opens a nav item    
 echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $name . '</a>';
}
    if ($ni->hasSubmenu) {
        echo '<ul class="submenu">'; //opens a dropdown sub-menu
    }


Will look at targeting the output with js.
This only works when adding the autonav block to /concrete/blocks/autonav/templates. Is this a known issue on latest c5 version (currently using 8.5.1)