_itemButtons navigation dots & a11y

[jamesrea83]

In a course I'm working on the blocks in the ABS do not have titles assigned. As a result the aria-labels for the navigation dots are blank, causing the screen reader to read out "unlabelled x button".

Giving the blocks a title solves the aria-label, but with the default styling part of the title is rendered in each of the navigation dots.

Would it make sense to change the template to aria-label="{{displayTitle}}" to give flexibility for cases like this?

[oliverfoster]

https://github.com/cgkineo/adapt-articleBlockSlider/blob/master/js/adapt-articleView.js#L111

_title: blocks[i].get('title') || blocks[i].get('displayTitle')

[jamesrea83]

Unfortunately that doesn't help- _title is being used by both aria-label & item-button-inner

adapt-articleBlockSlider/templates/articleBlockSlider-article.hbs

Line 52 in 228c42e

<button class="base item-button {{_className}}" aria-label="{{_title}}" data-block-slider="index" data-block-slider-index="{{this._index}}"><span class="item-button-inner">{{_title}}</span></button>

[moloko]

Might as well have a bit of a tidy up at the same time...!

_blockSliderConfigureVariables: function() {
  var blocks = this.model.getChildren().models;
  var itemButtons = [];
  
  blocks.forEach(function(block, i) {
    itemButtons.push({
      _className: (i === 0 ? 'home' : 'not-home') + (' i'+i),
      _index: i,
      _includeNumber: i !== 0,
      _title: block.get('title')
    });
  });
  
  this.model.set({
    _currentBlock: 0,
    _totalBlocks: blocks.length,
    _itemButtons: itemButtons
  });
}

how about this for the template?

<button class="base item-button {{_className}}" aria-label="{{#if _title}}{{_title}}{{else}}{{inc _index}}/{{../totalBlocks}}{{/if}}" data-block-slider="index" data-block-slider-index="{{this._index}}"></button>

[moloko]

oh, hang on - is this the one where the item-button is used both for the progress dots and for the tab buttons??

[moloko]

just to note the navigation dots are something that were created for a specific project/client and I don't think are normally supported by the out-of-the-box ABS - so not sure this ticket is necessarily relevant (here)

[moloko]

although note that this feature has been requested in #40 - but I think if we do that we should do it differently to what @jamesrea83 is looking at