Mouse dependency (Page 29): Research guides tab widget

[gtvj]

This panel needs to be reimplemented as a aria-tabpanel. See 'solution' from DAC report and example tab panel provided by W3C https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

Estimate & timings

Timings
Estimate	Development (Medium)
Start date
End date
Actual date
Confidence

[AshGDS]

Hi @gtvj

I am almost finished with the basic prototype of this.

As the images for this in the old implementation are giving meaning (green tick = available, red cross = unavailable), should these be re-implemented as <img> tags with adequate alt attributes? If not, we need a way to show to screen readers some are available and some are unavailable.

[AshGDS]

Also, I am using this to solve the None Some All issue with the View Online category:

https://tink.uk/using-the-aria-current-attribute/

[AshGDS]

Here's my current implementation:

https://tna-tabpanel.netlify.com/

(After discussion on Slack, I have been made aware that I should keep the styles the same as the old, and only change colours for rebrand)

[gtvj]

@AshTNA is working on this and has shown me progress today. He has had to rethink some of the technical accessibility aspects (regarding ARIA roles) but it is near completion.

[AshGDS]

This is ready to be merged into TNA following a final OK on the design from @sdwilkes

https://github.com/nationalarchives/tna/pull/227

[AshGDS]

This isn't working on Firefox so this needs to be fixed before it is merged

[AshGDS]

@gtvj It turns out that we needed to implement keyboard navigation for the tabs (I believe this is what W3 had implemented when we looked at it together.) I have taken the implementation from MDN, and modified it to use jQuery for simplicity.

Here's the MDN docs I referred to: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role

Here's the new version of the tabpanel, using the keyboard arrows for tab navigation: https://tna-tabpanel.netlify.com/

Thanks :+1:

$(function() {
   const $tabs = $('[role="tab"]');
   const $tabList = $('[role="tablist"]');
   const $tabPanels = $('[role="tabpanel"]') ;

   let changeTabs = function(e) {
       const $target = $(this);

       console.log($target);

       $tabs.each(function () {
           $(this).attr('aria-selected', false);
           $(this).parent().removeClass('active');
       })

       $target.attr('aria-selected', true);
       $target.parent().addClass('active');
       $tabPanels.each(function () {
           $(this).hide();
       })

       let targetDiv = $target.attr('id');
       $('[aria-labelledby="'+targetDiv+'"]').show();
   }

   $tabs.each(function () {
       $(this).on('click', changeTabs);
   })

   let tabFocus = 0;
   let rightArrow = 39;
   let leftArrow = 37;

   $tabList.on('keydown', function (e) {
       if(e.which === rightArrow || e.which === leftArrow) {

           console.log('Tab focus is', tabFocus);
           let $currentTab = $($tabs.get(tabFocus));

           $currentTab.attr("tabindex", -1);

           if(e.which === rightArrow) {
               tabFocus++;
                // If we're at the end, go to the start
               if(tabFocus >= $tabs.length) {
                   tabFocus = 0;
               }
           }
           else if(e.which === leftArrow) {
               tabFocus--;
               // If we're at the start, move to the end
               if (tabFocus < 0) {
                   tabFocus = $tabs.length - 1;
               }
           }

           $currentTab = $($tabs.get(tabFocus));

           $currentTab.attr("tabindex", 0);
           $currentTab.focus();
       }
   });
});

[gtvj]

Hi @AshTNA - I've looked at this code and it all looks good. Not yet tested in a browser but I'll let you do that. Please proceed with this implementation. Thanks 👍

[AshGDS]

This is now implemented on TNA.