Automatic Tabindex

Hi guys

I just started my first Yii 2.0 project having worked on a large Yii 1 project for a year. This question could easily apply to Yii 1 but hey, I’m working on Yii 2 so I’ll post it here! :slight_smile:

Basically I have to make a site that is accessible (it’s an assignment for my Masters Accessibility course, I use 1.1.14 at work). Everything is fine so far and I’m nearly finished the project but for a few refinements here and there.

For example, I’d like to automate putting the tabindex attribute in links etc. Unfortunately, Javascript is a non-runner as a solution so it all has to happen in good old PHP and HTML.

My ‘solution’ has been to add a method to my custom helper class that increments a static variable.

When I call this method in the navbar in layouts/main.php, all is good. The logo link and the other links in the navbar get tab indexes that are incremented correctly. Any other links etc that implement this method in layout/main.php are also fine.

The problem comes when I implement the method in other view files that are rendered in main.php as $content. Lets say I have one link in the view to be rendered within layouts/main.php, it will get a tab index of 1 which mucks up all the tab indexes above it. I understand that it is all to do with the view rendering flow, so I’m just wondering if anyone has a trick to get around this, or maybe I’m just approaching the whole thing wrong.

For what it’s worth, here is the static method and variable in my helper class:




    /** 

     * @var int The static tab index number

     */

    protected static $tabIndexNum = 0;


    /**     

     * For automating tabindex in Yii rendered links etc

     * @return array

     */

    public static function autoTabIndex() {

        return ['tabindex' => ++static::$tabIndexNum];

    }


    /**

     * Extended List Options to be used in Yii rendered links etc

     * to automate tabindexing as well as adding any other options

     * @param null $options Other options such as 'class' etc

     * @return array

     */

    public static function extListOptions($options = null) {

        return array_merge(static::autoTabIndex(), is_null($options) ? [null] : $options);

    }



So I got it working with a quick and dirty fix.

As this particular project has a fixed amount of links in the navbar, I can set the initial value of the static tab index number variable to be the amount of links and buttons in the nafbar, plus the breadcrumbs links (luckily in this case, the structure of the project is so simple, that there will only ever be one link in the breadcrumbs, ‘Home’).

I then add a reset method to my helper class to reset the static variable back to zero again.

So when my view is rendered initially, it starts from 8 and increments from there. Then when it’s time for main.php to be rendered, the reset method is called (at beginning of main.php, urrgggghhh, :-X ) and the static variable is reset back to zero. I have no links in the bottom part of main.php, i.e., under $content, so I don’t have to worry about that.

This works for this particular project as my examiners are only concerned about the final output, html & css/javascript (which will be disabled initially, so I can’t rely on these).

However, this is clearly not flexible. One of the things I will be looking to improve on this year with my projects at work is to make my applications more responsive and accessible. These applications are much more complex and dynamic with a lot of partials, etc etc.

So if anybody has any clever ideas for this, I’m all ears! As I said, I don’t want to rely on javascript, so I need smart way to deal with the rendering flow, if it is possible.