Add support for tabkey and accesskey navigation

1 files changed, 26 insertions, 20 deletions

diff --git a/index.html b/index.html
index d126273..399cbd3 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a id="navigation-home" class="navbar-brand" href="#" title="Intelligent tutor system">
+                    <a id="navigation-home" class="navbar-brand" tabindex="10" accesskey="1" href="#" title="Intelligent tutor system">
                         <img src="res/CodeQ_logo-sivi.png" class="img-responsive">
                     </a>
                     <!--a class="navbar-brand" id="title"></a-->
@@ -71,28 +71,28 @@
                 <!-- Collect the nav links, forms, and other content for toggling -->
                 <div class="collapse navbar-collapse">
                     <ul class="nav navbar-nav">
-                        <li style="display: none;" id="navigation-problem_list"><a href="" data-tkey="problem_list">Problems</a></li>
-                        <li style="display: none;" id="navigation-python"><a href="" data-tkey="python">Python</a></li>
-                        <li style="display: none;" id="navigation-prolog"><a href="" data-tkey="prolog">Prolog</a></li>
-                        <li style="display: none;" id="navigation-robot"><a href="" data-tkey="robot">Robot</a></li>
+                        <li style="display: none;" id="navigation-problem_list"><a href="" tabindex="20" accesskey="2" data-tkey="problem_list">Problems</a></li>
+                        <li style="display: none;" id="navigation-python"><a href="" tabindex="30" accesskey="3" data-tkey="python">Python</a></li>
+                        <li style="display: none;" id="navigation-prolog"><a href="" tabindex="30" accesskey="3" data-tkey="prolog">Prolog</a></li>
+                        <li style="display: none;" id="navigation-robot"><a href="" tabindex="30" accesskey="3" data-tkey="robot">Robot</a></li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right" style="display:none;">
                         <p class="navbar-text"><span data-tkey="signed_in_as">Signed in as </span><span id="signed-in-title">Janez</span></p>
                         <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
+                            <a href="#" class="dropdown-toggle" tabindex="40" accesskey="4" data-toggle="dropdown" aria-expanded="true">
                                 <span class="glyphicon glyphicon glyphicon-user"></span>
                             </a>
                             <ul class="dropdown-menu">
-                                <li id="navigation-logout"><a href="#" data-tkey="logout">Logout</a></li>
-                                <li id="navigation-profile"><a href="#" data-tkey="profile">Profile</a></li>
+                                <li id="navigation-logout"><a href="#" tabindex="41" data-tkey="logout">Logout</a></li>
+                                <li id="navigation-profile"><a href="#" tabindex="42" data-tkey="profile">Profile</a></li>
                                 <li class="saml-login-hide divider" role="separator"></li>
-                                <li class="saml-login-hide"><a href="#" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li>
+                                <li class="saml-login-hide"><a href="#" tabindex="43" data-toggle="modal" data-target="#modalChangePassword" data-tkey="change_pass" id="change-password">Change password</a></li>
                                 <li class="divider" role="separator"></li>
-                                <li id="navigation-about"><a href="#" data-tkey="about">About</a></li>
+                                <li id="navigation-about"><a href="#" tabindex="44" data-tkey="about">About</a></li>
                             </ul>
                         </li>
                         <li id="settings_dropdown_menu"> <!-- class="dropdown"-->
-                            <a href="" class="dropdown-toggle" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
+                            <a href="" class="dropdown-toggle" tabindex="50" accesskey="5" data-toggle="dropdown" id="settingsTrigger" title="Settings, options..." aria-expanded="true"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a>
                         </li>
                     </ul>
                 </div><!--/.nav-collapse -->
@@ -296,17 +296,23 @@
         <!-- main screen: programming language selection, settings, etc. -->
         <div class="container" id="screen_language" style="text-align: center; display: none;">
             <div class="row">
-                <div class="col-lg-4" id="choose-prolog">
-                    <img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140">
-                    <h2>Prolog</h2>
+                <div class="col-lg-4">
+                    <a href="#" id="choose-prolog" style="display: block;" tabindex="100">
+                        <img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140">
+                        <h2>Prolog</h2>
+                    </a>
                 </div><!-- /.col-lg-4 -->
-                <div class="col-lg-4" id="choose-python">
-                    <img class="img-circle" src=res/python.png alt="Generic placeholder image" width="140" height="140">
-                    <h2>Python</h2>
+                <div class="col-lg-4">
+                    <a href="#" id="choose-python" style="display: block;" tabindex="101">
+                        <img class="img-circle" src=res/python.png alt="Generic placeholder image" width="140" height="140">
+                        <h2>Python</h2>
+                    </a>
                 </div><!-- /.col-lg-4 -->
-                <div class="col-lg-4" id="choose-robot">
-                    <img class="img-circle" src=res/eve.png alt="Generic placeholder image" width="140" height="140">
-                    <h2>Robot</h2>
+                <div class="col-lg-4">
+                    <a href="#" id="choose-robot" style="display: block;" tabindex="102">
+                        <img class="img-circle" src=res/eve.png alt="Generic placeholder image" width="140" height="140">
+                        <h2>Robot</h2>
+                    </a>
                 </div><!-- /.col-lg-4 -->
             </div><!-- /.row -->
         </div>