Navigation (bootstrap)

Bug 1465107: Use Bootstrap CSS Framework
Applied bootstrap tabs and tidy up form styling
Mobile menu
Add bootstrap accessibility, tab styling to bootstrap

Change-Id: Ifa42d482f5fd7e1cdfb52bae1ebb5ff3bf5085a9

htdocs/admin/site/options.php

@@ -40,7 +40,7 @@ $spamtraps = available_spam_traps();
 $siteoptionform = array(
     'name'       => 'siteoptions',
     'jsform'     => true,
-    'renderer'   => 'table',
+    'renderer'   => 'div',
     'plugintype' => 'core',
     'pluginname' => 'admin',
     'jssuccesscallback' => 'checkReload',

htdocs/js/mahara.js

@@ -331,7 +331,7 @@ function sendjsonrequest(script, data, rtype, successcallback, errorcallback, qu
         }
 
         var errtype = false;
-        if (!data.error) { 
+        if (!data.error) {
             errtype = 'ok';
         }
         else if (data.error == 'local') {
@@ -402,7 +402,7 @@ function newfilename(oldname, fileexistsfunc) {
 
 // Return the filename part of a full path
 function basename(path) {
-    if (path.indexOf('/') > -1) { 
+    if (path.indexOf('/') > -1) {
         var separator = '/';
     }
     else {
@@ -470,7 +470,7 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
     else if (section) {
         key = pluginType + '/' + pluginName + '/' + section;
         url_params.section = section;
-    } 
+    }
     else {
         key = pluginType + '/' + pluginName + '/' + formName + '/' + helpName;
         url_params.form = formName;
@@ -680,16 +680,16 @@ function clearCookie( name ) {
 }
 
 // expires is in seconds
-function setCookie( name, value, expires, path, domain, secure ) 
+function setCookie( name, value, expires, path, domain, secure )
 {
     // set time, it's in milliseconds
     var today = new Date();
     today.setTime( today.getTime() );
 
     /*
-    if the expires variable is set, make the correct 
-    expires time, the current script below will set 
-    it for x number of days, to make it for hours, 
+    if the expires variable is set, make the correct
+    expires time, the current script below will set
+    it for x number of days, to make it for hours,
     delete * 24, for minutes, delete * 60 * 24
     */
     if (expires) {
@@ -699,8 +699,8 @@ function setCookie( name, value, expires, path, domain, secure )
     var expires_date = new Date( today.getTime() + (expires) );
 
     document.cookie = name + "=" + escape( value ) +
-    ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) + 
-    ( ( path ) ? ";path=" + path : "" ) + 
+    ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
+    ( ( path ) ? ";path=" + path : "" ) +
     ( ( domain ) ? ";domain=" + domain : "" ) +
     ( ( secure ) ? ";secure" : "" );
 }
@@ -712,7 +712,7 @@ function toggleChecked(c) {
         for (cb in e) {
         if (e[cb].checked == true) {
                 e[cb].checked = '';
-            } 
+            }
             else {
                 e[cb].checked = 'checked';
             }
@@ -741,7 +741,7 @@ function countKeys(x) {
 }
 
 function keepElementInViewport(element) {
-    var pixels = getViewportPosition().y + getViewportDimensions().h 
+    var pixels = getViewportPosition().y + getViewportDimensions().h
         - getElementPosition(element).y - getElementDimensions(element).h;
     if (pixels < 0) {
         window.scrollBy(0,-pixels);
@@ -811,7 +811,7 @@ function augment_tags_control(elem, returnContainer) {
     }
 
     var help = getFirstElementByTagAndClassName('span', 'help', elem.parentNode);
-    
+
     var newNode = DIV();
     swapDOM(elem, newNode);
     appendChildNodes(newNode, tagContainer, elem, ' ', help);

htdocs/lang/en.utf8/mahara.php

@@ -638,7 +638,7 @@ $string['email']                    = 'Email';
 $string['emails']                    = 'Emails';
 $string['subject']                  = 'Subject';
 $string['message']                  = 'Message';
-$string['messageoptional']          = 'Message <span class="accessible-hidden">(optional)</span>';
+$string['messageoptional']          = 'Message <span class="accessible-hidden sr-only">(optional)</span>';
 $string['messagesent']              = 'Your message has been sent';
 $string['nosendernamefound']        = 'No sender name was submitted';
 $string['emailnotsent']             = 'Failed to send contact email. Error message: "%s"';
@@ -1184,4 +1184,3 @@ $string['vspace'] = 'Vertical space';
 $string['hspace'] = 'Horizontal space';
 $string['border'] = 'Border width';
 $string['alignment'] = 'Alignment';
-

htdocs/lib/form/elements/checkboxes.php

@@ -35,7 +35,7 @@ function pieform_element_checkboxes(Pieform $form, $element) {/*{{{*/
 
     $elementtitle = '';
     if (isset($element['title'])) {
-        $elementtitle = '<span class="accessible-hidden">' . $element['title'] . ': </span>';
+        $elementtitle = '<span class="accessible-hidden sr-only">' . $element['title'] . ': </span>';
     }
 
     foreach ($element['elements'] as $e) {

htdocs/lib/form/elements/color.php

@@ -48,7 +48,7 @@ EOF;
 
         $title = '';
         if (!empty($element['title'])) {
-            $title = '<span class="accessible-hidden">' . $element['title'] . ':</span>';
+            $title = '<span class="accessible-hidden sr-only">' . $element['title'] . ':</span>';
         }
 
         $optional .= ' <input type="checkbox" '
@@ -119,4 +119,3 @@ function pieform_element_color_get_headdata($element) {
     );
     return $result;
 }
-

htdocs/lib/pieforms/pieform.php

@@ -1467,7 +1467,7 @@ EOF;
             }
 
             if (!empty($element['hiddenlabel'])) {
-                $labelclass = ' class="accessible-hidden"';
+                $labelclass = ' class="accessible-hidden sr-only"';
             }
             else {
                 $labelclass = '';

htdocs/lib/pieforms/pieform/elements/bytes.php

@@ -73,7 +73,7 @@ function pieform_element_bytes(Pieform $form, $element) {/*{{{*/
         $numberinput .= ' aria-describedby="' . $form->element_descriptors($element) . '"';
     }
     $numberinput .= ">\n";
-    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden">' . get_string('units') . '</label>';
+    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden sr-only">' . get_string('units') . '</label>';
     $uselect .= '<select name="' . $name . '_units" id="' . $formname . '_' . $name . '_units"' . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
     if (isset($element['description'])) {
         $uselect .= ' aria-describedby="' . $form->element_descriptors($element) . '"';

htdocs/lib/pieforms/pieform/elements/date.php

@@ -77,7 +77,7 @@ EOF;
 
     // Year
     $value = pieform_element_date_get_timeperiod_value('year', $element['minyear'], $element['maxyear'], $element, $form);
-    $year = '<label for="' . $name . '_year" class="accessible-hidden">' . get_string('year') . '</label>';
+    $year = '<label for="' . $name . '_year" class="accessible-hidden sr-only">' . get_string('year') . '</label>';
     $year .= '<select name="' . $name . '_year" id="' . $name . '_year"'
         . (!$required && !$dateisset ? ' disabled="disabled"' : '')
         . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
@@ -92,7 +92,7 @@ EOF;
 
     // Month
     $value = pieform_element_date_get_timeperiod_value('month', 1, 12, $element, $form);
-    $month = '<label for="' . $name . '_month" class="accessible-hidden">' . get_string('month') . '</label>';
+    $month = '<label for="' . $name . '_month" class="accessible-hidden sr-only">' . get_string('month') . '</label>';
     $month .= '<select name="' . $name . '_month" id="' . $name . '_month"'
         . (!$required && !$dateisset ? ' disabled="disabled"' : '')
         . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
@@ -108,7 +108,7 @@ EOF;
 
     // Day
     $value = pieform_element_date_get_timeperiod_value('day', 1, 31, $element, $form);
-    $day = '<label for="' . $name . '_day" class="accessible-hidden">' . get_string('day') . '</label>';
+    $day = '<label for="' . $name . '_day" class="accessible-hidden sr-only">' . get_string('day') . '</label>';
     $day .= '<select name="' . $name . '_day" id="' . $name . '_day"'
         . (!$required && !$dateisset ? ' disabled="disabled"' : '')
         . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';

htdocs/lib/pieforms/pieform/elements/expiry.php

@@ -73,7 +73,7 @@ function pieform_element_expiry(Pieform $form, $element) {/*{{{*/
         $numberinput .= ' aria-describedby="' . $form->element_descriptors($element) . '"';
     }
     $numberinput .= (isset($element['error']) ? ' class="error"' : '') . ">\n";
-    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden">' . get_string('units', 'mahara') . '</label>';
+    $uselect = '<label for="' . $formname . '_' . $name . '_units" class="accessible-hidden sr-only">' . get_string('units', 'mahara') . '</label>';
     $uselect .= '<select onchange="' . $name . '_change()" ';
     $uselect .= 'name="' . $name . '_units" id="' . $formname . '_' . $name . '_units"' . ' tabindex="' . Pieform::hsc($element['tabindex']) . '"';
     if (isset($element['description'])) {

htdocs/lib/pieforms/pieform/elements/radio.php

@@ -55,12 +55,12 @@ function pieform_element_radio(Pieform $form, $element) {
     $nolabels = isset($element['nolabels']) ? $element['nolabels'] : false;
     $classname = '';
     if (!empty($element['hiddenlabels'])) {
-        $classname = ' class="accessible-hidden"';
+        $classname = ' class="accessible-hidden sr-only"';
     }
 
     $titletext = '';
     if (!empty($element['title'])) {
-        $titletext = '<span class="accessible-hidden">' . Pieform::hsc($element['title']) . ': </span>';
+        $titletext = '<span class="accessible-hidden sr-only">' . Pieform::hsc($element['title']) . ': </span>';
     }
 
     $i = 0;

htdocs/lib/pieforms/pieform/renderers/div.php

@@ -32,6 +32,7 @@
  * @return string          The element rendered inside an appropriate container
  */
 function pieform_renderer_div(Pieform $form, $element) {/*{{{*/
+
     $formname = $form->get_name();
     // Set the class of the enclosing <div> to match that of the element
     $result = '<div';
@@ -39,7 +40,14 @@ function pieform_renderer_div(Pieform $form, $element) {/*{{{*/
         $result .= ' id="' . $formname . '_' .  Pieform::hsc($element['name']) . '_container"';
     }
     if (!empty($element['class'])) {
+
+        // add form-group classes to all real form fields
+        if ($element['class'] !== 'html') {
+            $element['class'] = $element['class'] . ' form-group';
+        }
+
         $result .= ' class="' . Pieform::hsc($element['class']) . '"';
+
     }
     $result .= '>';
 

htdocs/theme/bootstrap/artefact/blog/templates/import/blogs.tpl

@@ -42,7 +42,7 @@
             {foreach from=$displaydecisions key=opt item=displayopt}
                 {if !$blog.disabled[$opt]}
                 <input id="decision_{$blog.id}_{$opt}" class="blogdecision" id="{$blog.id}" type="radio" name="decision_{$blog.id}" value="{$opt}"{if $blog.decision == $opt} checked="checked"{/if}>
-                <label for="decision_{$blog.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$blog.title})</span></label><br>
+                <label for="decision_{$blog.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$blog.title})</span></label><br>
                 {/if}
             {/foreach}
         </div>
@@ -117,7 +117,7 @@
                 {foreach from=$displaydecisions key=opt item=displayopt}
                     {if !$post.disabled[$opt]}
                     <input id="decision_{$post.id}_{$opt}" class="postdecision" type="radio" name="decision_{$post.id}" value="{$opt}"{if $post.decision == $opt} checked="checked"{/if}>
-                    <label for="decision_{$post.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$post.title})</span></label><br>
+                    <label for="decision_{$post.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$post.title})</span></label><br>
                     {/if}
                 {/foreach}
             </div>

htdocs/theme/bootstrap/artefact/file/templates/form/filebrowser.tpl

@@ -90,10 +90,10 @@
 <input type="hidden" name="{$prefix}_move" id="{$prefix}_move" value="" />
 <input type="hidden" name="{$prefix}_moveto" id="{$prefix}_moveto" value="" />
 {/if}
-  
+
 {if $config.createfolder}
   <div id="createfolder"{if $uploaddisabled} class="hidden"{/if}><div id="{$prefix}_createfolder_messages" class="createfolder-message"></div>
-    <label for="{$prefix}_createfolder_name" class="accessible-hidden">{str tag=createfolder section=artefact.file}</label>
+    <label for="{$prefix}_createfolder_name" class="accessible-hidden sr-only">{str tag=createfolder section=artefact.file}</label>
     <input type="text" class="text" name="{$prefix}_createfolder_name" id="{$prefix}_createfolder_name" size="40" />
     <input type="submit" class="submit" name="{$prefix}_createfolder" id="{$prefix}_createfolder" value="{str tag=createfolder section=artefact.file}" /></div>
 {/if}

htdocs/theme/bootstrap/artefact/file/templates/form/filelist.tpl

@@ -18,7 +18,7 @@
    <th class="right"></th>
   {/if}
    <th class="right nowrap">
-       <span class="accessible-hidden">{str tag=edit}</span>
+       <span class="accessible-hidden sr-only">{str tag=edit}</span>
    </th>
   </tr>
  </thead>
@@ -41,7 +41,7 @@
     {assign var=displaytitle value=$file->title|safe}
     {if $file->artefacttype == 'folder'}
       <a href="{$querybase|safe}folder={$file->id}{if $owner}&owner={$owner}{if $ownerid}&ownerid={$ownerid}{/if}{/if}" id="changefolder:{$file->id}" class="changefolder" title="{str tag=gotofolder section=artefact.file arg1=$displaytitle}">
-        <span class="accessible-hidden">{str tag=folder section=artefact.file}:</span>
+        <span class="accessible-hidden sr-only">{str tag=folder section=artefact.file}:</span>
         <span class="display-title {if $file->isparent}accessible-hidden{/if}">{$displaytitle}</span>
     </a>
     {elseif !$publishable}

htdocs/theme/bootstrap/artefact/file/templates/form/ownertabs.tpl

 <ul class="artefactchooser-tabs files">
   {foreach from=$tabs.tabs item=displayname key=name}
-  <li{if $tabs.owner == $name} class="current"{/if}><a class="changeowner" href="{$querybase}owner={$name}">{$displayname}<span class="accessible-hidden">({str tag=tab}{if $tabs.owner == $name} {str tag=selected}{/if})</span></a></li>
+  <li{if $tabs.owner == $name} class="current"{/if}><a class="changeowner" href="{$querybase}owner={$name}">{$displayname}<span class="accessible-hidden sr-only">({str tag=tab}{if $tabs.owner == $name} {str tag=selected}{/if})</span></a></li>
   {/foreach}
 </ul>

htdocs/theme/bootstrap/artefact/file/templates/import/files.tpl

@@ -29,7 +29,7 @@
             {foreach from=$displaydecisions key=opt item=displayopt}
                 {if !$file.disabled[$opt]}
                 <input id="decision_{$file.id}_{$opt}" class="filedecision" id="{$file.id}" type="radio" name="decision_{$file.id}" value="{$opt}"{if $file.decision == $opt} checked="checked"{/if}>
-                <label for="decision_{$file.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$file.title})</span></label><br>
+                <label for="decision_{$file.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$file.title})</span></label><br>
                 {/if}
             {/foreach}
         </div>

htdocs/theme/bootstrap/artefact/file/templates/profileicons.tpl

 {include file="header.tpl"}
             {$settingsformtag|safe}
-            <table id="profileicons" class="hidden tablerenderer fullwidth">
+            <table id="profileicons" class="hidden tablerenderer fullwidth table">
                 <thead>
                     <tr>
                         <th class="profileiconcell">{str tag="image"}</th>

htdocs/theme/bootstrap/artefact/internal/static/style/style.css

-/**
- * CSS rules for the internal artefact plugin
- *
- * @author     Catalyst IT Ltd
- * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL version 3 or later
- * @copyright  For copyright information on Mahara, please see the README file distributed with this software.
- */
-input#myfriends_addfriend_add {
-    font-weight: bold;
-}
-#userfriendstable a {
-    display: block;
-}
-#userfriendstable .membername a {
-    display: inline;
-}
-#sendmessage input,
-#invitetogroup #invitetogroup_submit_container input {
-    margin: 0;
-}
-#email_list {
-    line-height: 2em;
-}
-#email_list a {
-    color: #ca0000;
-    text-decoration: none;
-    margin-left: 5px;
-}
-fieldset.safe-hidden .mceEditor {
-    display: none;
-}
\ No newline at end of file

htdocs/theme/bootstrap/artefact/internal/templates/import/profilefields.tpl

@@ -38,7 +38,7 @@
                             <input id="decision_{$fieldvalue.id}_{$opt}" class="fieldvaluedecision" type="radio" name="decision_{$fieldvalue.id}" value="{$opt}"{if $fieldvalue.decision == $opt} checked="checked"{/if}>
                             <label for="decision_{$fieldvalue.id}_{$opt}">
                                 {$displayopt}
-                                <span class="accessible-hidden">({str tag=$fieldname section=artefact.internal}: {$fieldvalue.html|safe|strip_tags|str_shorten_text:80:true})</span></label><br>
+                                <span class="accessible-hidden sr-only">({str tag=$fieldname section=artefact.internal}: {$fieldvalue.html|safe|strip_tags|str_shorten_text:80:true})</span></label><br>
                             {/if}
                         {/foreach}
                     </div>

htdocs/theme/bootstrap/artefact/internal/templates/notes.tpl

@@ -7,7 +7,7 @@
       <th>{str tag=currenttitle section=artefact.internal}</th>
       <th>{str tag=containedin section=artefact.internal}</th>
       <th class="center"><img src="{theme_url filename="images/attachment.png"}" title="{str tag=Attachments section=artefact.resume}" alt="{str tag=Attachments section=artefact.resume}" /></th>
-      <th><span class="accessible-hidden">{str tag=edit}</span></th>
+      <th><span class="accessible-hidden sr-only">{str tag=edit}</span></th>
     </tr>
   </thead>
   <tbody>
@@ -15,9 +15,9 @@
     <tr class="{cycle values='r1,r0'}">
       <td class="note-name">
       {if $n->locked}
-        <h3 class="title"><a class="notetitle" href="" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden">{str tag=clickformore}</span></a></h3>
+        <h3 class="title"><a class="notetitle" href="" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
       {else}
-        <h3 class="title"><a class="notetitle" href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden">{str tag=clickformore}</span></a></h3>
+        <h3 class="title"><a class="notetitle" href="{$WWWROOT}artefact/internal/editnote.php?id={$n->id}" id="n{$n->id}">{$n->title|str_shorten_text:80:true} <span class="accessible-hidden sr-only">{str tag=clickformore}</span></a></h3>
       {/if}
        <div id="n{$n->id}_desc" class="hidden detail">{$n->description|clean_html|safe}
             {if $n->files}

htdocs/theme/bootstrap/artefact/internal/templates/socialprofiles.tpl

 <br /><div class="rbuttons">
     <a class="btn" href="{$WWWROOT}artefact/internal/socialprofile.php">{str tag=newsocialprofile section=artefact.internal}</a>
 </div>
-<table id="socialprofilelist" class="tablerenderer fullwidth">
+<table id="socialprofilelist" class="tablerenderer fullwidth table">
     <thead>
         <tr>
             <th class="icons"></th>
             <th>{str tag='service' section='artefact.internal'}</th>
             <th>{str tag='profileurl' section='artefact.internal'}</th>
             {if $controls}<th class="btns2">
-                <span class="accessible-hidden">{str tag=edit}</span>
+                <span class="accessible-hidden sr-only">{str tag=edit}</span>
             </th>{/if}
         </tr>
     </thead>
@@ -29,5 +29,3 @@
     </tbody>
 </table>
 {$pagination.html|safe}
-
-

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/activitylistin.tpl

@@ -22,9 +22,9 @@
     <td>
     {if $item->message}
       <a href="" onclick="showHideMessage({$item->id}, '{$item->table}'); return false;">
-        {if !$item->read} <span class="accessible-hidden">{str tag='unread' section='activity'}: </span> {/if}
+        {if !$item->read} <span class="accessible-hidden sr-only">{str tag='unread' section='activity'}: </span> {/if}
         {$item->subject|truncate:60}
-        <span class="accessible-hidden">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>
+        <span class="accessible-hidden sr-only">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>
       </a>
 
       <div id="message-{$item->table}-{$item->id}" class="hidden">{$item->message|safe}
@@ -86,12 +86,12 @@
       {if $item->read}
         <img src="{theme_url filename='images/star.png'}" alt="{str tag=read section=activity}">
       {else}
-        <label class="accessible-hidden" for="unread-{$item->table}-{$item->id}">{str tag='markasread' section='activity'}</label>
+        <label class="accessible-hidden sr-only" for="unread-{$item->table}-{$item->id}">{str tag='markasread' section='activity'}</label>
         <input type="checkbox" class="tocheckread" name="unread-{$item->table}-{$item->id}" id="unread-{$item->table}-{$item->id}">
   {/if}
     </td>
     <td class="center">
-        <label class="accessible-hidden" for="delete-{$item->table}-{$item->id}">{str tag='delete' section='mahara'}</label>
+        <label class="accessible-hidden sr-only" for="delete-{$item->table}-{$item->id}">{str tag='delete' section='mahara'}</label>
         <input type="checkbox" class="tocheckdel" name="delete-{$item->table}-{$item->id}" id="delete-{$item->table}-{$item->id}">
     </td>
   </tr>

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/activitylistout.tpl

@@ -15,7 +15,7 @@
       {if $item->message}
         <a href="" onclick="showHideMessage({$item->id}, '{$item->table}'); return false;">
           {$item->subject|truncate:60}
-          <span class="accessible-hidden">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>
+          <span class="accessible-hidden sr-only">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>
         </a>
         <div id="message-{$item->table}-{$item->id}" class="hidden">
           {$item->message|safe}
@@ -41,7 +41,7 @@
         <span id="short{$item->id}">
           <a onclick="return toggleMe('long{$item->id}', 'short{$item->id}');" href="javascript:void(0)">
             <img class="togglebtn" src="{theme_url filename='images/expand.png'}" />
-            {*<span class="accessible-hidden">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>*}
+            {*<span class="accessible-hidden sr-only">{str tag='clickformore' section='artefact.multirecipientnotification'}</span>*}
           </a>
           {assign var="tousr" value=$item->tousr[0]}
           {if $tousr['link']}<a href="{$tousr['link']}">{/if}
@@ -71,9 +71,9 @@
     <td>{$item->date}</td>
     <td class="center">
       {if $item->table === 'artefact_multirecipient_notification'}
-        <label class="accessible-hidden" for="delete-{$item->table}-{$item->id}">{str tag='delete' section='mahara'}</label>
+        <label class="accessible-hidden sr-only" for="delete-{$item->table}-{$item->id}">{str tag='delete' section='mahara'}</label>
         <input type="checkbox" class="tocheckdel" name="delete-{$item->table}-{$item->id}" id="delete-{$item->table}-{$item->id}">
       {/if}
     </td>
   </tr>
-{/foreach}
\ No newline at end of file
+{/foreach}

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/indexin.tpl

@@ -14,7 +14,7 @@
         <table id="activitylist" class="fullwidth">
             <thead>
                 <tr>
-                    <th><span class="accessible-hidden">{str section='activity' tag='messagetype'}</span></th>
+                    <th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
                     <th>{str section='artefact.multirecipientnotification' tag='fromuser'}</th>
                     <th>{str section='activity' tag='subject'}</th>
                     <th>{str section='artefact.multirecipientnotification' tag='touser'}</th>
@@ -29,13 +29,13 @@
                 <td class="center">
                     <a href="" onclick="toggleChecked('tocheckread'); return false;">
                         {str section='activity' tag='selectall'}
-                        <span class="accessible-hidden"> {str tag='selectallread' section='artefact.multirecipientnotification'}</span>
+                        <span class="accessible-hidden sr-only"> {str tag='selectallread' section='artefact.multirecipientnotification'}</span>
                     </a>
                 </td>
                 <td class="center">
                     <a href="" onclick="toggleChecked('tocheckdel'); return false;">
                         {str section='activity' tag='selectall'}
-                        <span class="accessible-hidden">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
+                        <span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
                     </a>
                 </td>
             </tr>

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/indexout.tpl

@@ -14,7 +14,7 @@
         <table id="activitylist" class="fullwidth">
             <thead>
                 <tr>
-                    <th><span class="accessible-hidden">{str section='activity' tag='messagetype'}</span></th>
+                    <th><span class="accessible-hidden sr-only">{str section='activity' tag='messagetype'}</span></th>
                     <th>{str section='artefact.multirecipientnotification' tag='fromuser'}</th>
                     <th>{str section='activity' tag='subject'}</th>
                     <th>{str section='artefact.multirecipientnotification' tag='touser'}</th>
@@ -28,7 +28,7 @@
                     <td class="center">
                         <a href="" onclick="toggleChecked('tocheckdel'); return false;">
                             {str section='activity' tag='selectall'}
-                            <span class="accessible-hidden">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
+                            <span class="accessible-hidden sr-only">{str tag='selectalldelete' section='artefact.multirecipientnotification'}</span>
                         </a>
                     </td>
                 </tr>

htdocs/theme/bootstrap/artefact/multirecipientnotification/templates/sendmessage.tpl

@@ -11,7 +11,7 @@
           <td>
             <h5>
               {if ($message->fromusrlink)}<a href="{$message->fromusrlink}">{/if}
-                  <span class="accessible-hidden">{str tag='From' section='mahara'}</span>
+                  <span class="accessible-hidden sr-only">{str tag='From' section='mahara'}</span>
                   {$message->fromusrname}
               {if ($message->fromusrlink)}</a>{/if}
               <span class="postedon">{$message->ctime|strtotime|format_date}</span>
@@ -21,7 +21,7 @@
 
                 {foreach from=$message->tousrs item=recipient key="index"}
                     {if $recipient['link']}<a href="{$recipient['link']}">{/if}
-                        <span class="accessible-hidden">{str tag='labelrecipients' section='artefact.multirecipientnotification'}</span>
+                        <span class="accessible-hidden sr-only">{str tag='labelrecipients' section='artefact.multirecipientnotification'}</span>
                         {$recipient['display']}{if ($index + 1) < count($message->tousrs)}; {/if}
                     {if $recipient['link']}</a>{/if}
                 {/foreach}
@@ -29,7 +29,7 @@
             <div class="subjectdiv">
                 <label>{str tag='labelsubject' section='artefact.multirecipientnotification'}</label>&nbsp;
                     <a href="{$link}?replyto={$message->id}&returnto={$returnto}">
-                        <span class="accessible-hidden">{str tag='labelsubject' section='artefact.multirecipientnotification'}</span>
+                        <span class="accessible-hidden sr-only">{str tag='labelsubject' section='artefact.multirecipientnotification'}</span>
                         {$message->subject}
                     </a>
             </div>

htdocs/theme/bootstrap/artefact/plans/templates/import/plans.tpl

@@ -45,7 +45,7 @@
             {foreach from=$displaydecisions key=opt item=displayopt}
                 {if !$plan.disabled[$opt]}
                 <input id="decision_{$plan.id}_{$opt}" class="plandecision" id="{$plan.id}" type="radio" name="decision_{$plan.id}" value="{$opt}"{if $plan.decision == $opt} checked="checked"{/if}>
-                <label for="decision_{$plan.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$plan.title})</span></label><br>
+                <label for="decision_{$plan.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$plan.title})</span></label><br>
                 {/if}
             {/foreach}
         </div>
@@ -69,7 +69,7 @@
                 {foreach from=$displaydecisions key=opt item=displayopt}
                     {if !$task.disabled[$opt]}
                     <input id="decision_{$task.id}_{$opt}" class="taskdecision" type="radio" name="decision_{$task.id}" value="{$opt}"{if $task.decision == $opt} checked="checked"{/if}>
-                    <label for="decision_{$task.id}_{$opt}">{$displayopt}<span class="accessible-hidden">({$task.title})</span></label><br>
+                    <label for="decision_{$task.id}_{$opt}">{$displayopt}<span class="accessible-hidden sr-only">({$task.title})</span></label><br>
                     {/if}
                 {/foreach}
             </div>

htdocs/theme/bootstrap/artefact/plans/templates/taskrows.tpl

@@ -22,7 +22,7 @@
                 {if $task->completed == 1}
                     <td class="c3 completed"><img src="{$WWWROOT}theme/raw/static/images/success_small.png" alt="{str tag=completed section=artefact.plans}" /></td>
                 {else}
-                    <td><span class="accessible-hidden">{str tag=incomplete section=artefact.plans}</span></td>
+                    <td><span class="accessible-hidden sr-only">{str tag=incomplete section=artefact.plans}</span></td>
                 {/if}
             </tr>
         {/if}

htdocs/theme/bootstrap/artefact/plans/templates/taskslist.tpl

@@ -13,7 +13,7 @@
             {if $task->completed == 1}
                 <td class="completed"><img src="{$WWWROOT}theme/raw/static/images/success_small.png" alt="{str tag=completed section=artefact.plans}" /></td>
             {else}
-                <td><span class="accessible-hidden">{str tag=incomplete section=artefact.plans}</span></td>
+                <td><span class="accessible-hidden sr-only">{str tag=incomplete section=artefact.plans}</span></td>
             {/if}
 
     {/if}