Add support for tabkey and accesskey navigation

4 files changed, 43 insertions, 29 deletions

diff --git a/css/codeq.css b/css/codeq.css
index b0c6066..f7ec93b 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -45,6 +45,10 @@ body {
 #screen_language .col-lg-4 {
     cursor: pointer;
 }
+#screen_language .col-lg-4 a {
+    color: inherit;
+    text-decoration: none;
+}
 
 /* screen about*/
 
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>
diff --git a/js/codeq/language.js b/js/codeq/language.js
index b861560..e86b09e 100644
--- a/js/codeq/language.js
+++ b/js/codeq/language.js
@@ -7,16 +7,17 @@
         jqProlog = $('#choose-prolog'),

         jqPython = $('#choose-python'),

         jqRobot = $('#choose-robot'),

-        chooseProlog = function () {codeq.globalStateMachine.transition('problem_list', 'prolog');},

-        choosePython = function () {codeq.globalStateMachine.transition('problem_list', 'python');},

-        chooseRobot = function () {codeq.globalStateMachine.transition('problem_list', 'robot');};

+        choose = function (language) {

+            codeq.globalStateMachine.transition('problem_list', language);

+            return false;

+        };

 

     codeq.globalStateMachine.register('language',{

         'enter': function(){

             jqScreen.css('display', '');

-            jqProlog.on('click', chooseProlog);

-            jqPython.on('click', choosePython);

-            jqRobot.on('click', chooseRobot);

+            jqProlog.on('click', function () { return choose('prolog') });

+            jqPython.on('click', function () { return choose('python') });

+            jqRobot.on('click', function () { return choose('robot') });

         },

         'exit' : function(){

             jqProlog.off();

diff --git a/js/codeq/problem_list.js b/js/codeq/problem_list.js
index 853c8cb..cc9e716 100644
--- a/js/codeq/problem_list.js
+++ b/js/codeq/problem_list.js
@@ -200,7 +200,8 @@
                 Ngroups = groups.length,
                 html = [],
                 problemReferences = [],
-                group, problems, Nproblems, problem, i, j;
+                group, problems, Nproblems, problem, i, j, nrefs,
+                baseTabIndex = 200; // tabindex attribute of the first problem link
             var langDict = convertTranslations(rawTranslations, 'name', 'description'), // this will be the resulting dictionary: multi-level keys that lead up to the lang-dict
                 groupDict, problemDict;
             // title: HTML structure for "name" and "desc"
@@ -218,9 +219,10 @@
                 problems = group.problems || [];
                 Nproblems = problems.length;
                 for (j = 0; j < Nproblems; j++) {
+                    nrefs = problemReferences.length;
                     problem = problems[j] || {};
                     problemDict = convertTranslations(problem.translations, 'name');
-                    html.push('<li><a class="problem-', '' + problemReferences.length, '" ', ta(problemDict.name), '></a></li>');
+                    html.push('<li><a href="#" tabindex="' + (baseTabIndex+nrefs) + '"' + ' class="problem-', '' + nrefs, '" ', ta(problemDict.name), '></a></li>');
                     problemReferences.push({'g': group.identifier || 'nogroup', 'p': problem.identifier || 'noproblem', 'id': problem.id});
                 }
                 html.push('</ul>');
@@ -254,7 +256,7 @@
                     ref = data.refs[index];
                 if (!ref) {
                     codeq.log.error('Clicked on a problem link having erroneous index: ' + index);
-                    return;
+                    return false;
                 }
                 codeq.wait(
                         Q.all([
@@ -272,6 +274,7 @@
                         alert('Failed to obtain the problem definition: ' + reason);
                     })
                     .done();
+                return false;
             });
         },