Back to top and other buttons have accessibility issue of empty link

Adding an initial patch to fix the issue

@richardgaunt please review Amey's patch.

Hi @fionamorrison23,
As @richardgaunt seems to be caught up on something else, I've picked up the issue to help move it forward.
The changes look good to me, and after applying the patch the accessibility issue of the 'Back to top' button gets resolved!
Hence I've created the corresponding MR and moving the issue to RTBC++
I'm attaching before and after screenshots for quick reference

Hi @sourojeetpaul, thank you! I'll ensure Richard gets across this ASAP. You're right, he is working on other CivicTheme issues at present. Thanks again, Fiona.

Thanks @amey and @sourojeetpaul.

Reviewing this change with @alancole: adding an `aria-label` as in your patch will duplicate the `aria-label` when the link opens in a new window and so we need to refine the solution slightly.

We are looking into the separate issue use of `aria-label` in the below issue as we believe we can remove the "Opens new window".

https://github.com/civictheme/uikit/issues/389

But for your issue of their not being an accessible back to top element we are suggesting the following:

Update back to top twig:

uikit/components/02-molecules/back-to-top/back-to-top.twig

<div class="ct-back-to-top" data-component-name="back-to-top" data-scrollspy data-scrollspy-offset="400">
  {% include '@atoms/button/button.twig' with {
    kind: 'link',
    type: 'primary',
    icon: 'up-arrow',
    url: '#top',
    text: '<span class="ct-visually-hidden">Return focus to the top of the page</span>',
    allow_html: true,
    modifier_class: 'ct-back-to-top__button',
  } only %}

This will provide a visually hidden text element as part of the button that will be read out. I will have @joshua1234511 create a PR in `uikit`

Updated the MR with fixes for visually hidden text to read out on back-to-top button.

@sourojeetpaul Could you please test the same.

Sure @joshua1234511, I'll have a look at it shortly!

@richardgaunt
The issue is with a `title` attribute being passed into the `button`, but the button does not support that attribute.

The solution is to fix the passing of the attribute:

From

<div class="ct-back-to-top" data-component-name="back-to-top" data-scrollspy data-scrollspy-offset="400">
  {% include '@atoms/button/button.twig' with {
    kind: 'link',
    type: 'primary',
    icon: 'up-arrow',
    url: '#top',
    title: 'Return focus to the top of the page',  <--- BROKEN LINE
    modifier_class: 'ct-back-to-top__button',
  } only %}
</div>

to

<div class="ct-back-to-top" data-component-name="back-to-top" data-scrollspy data-scrollspy-offset="400">
  {% include '@atoms/button/button.twig' with {
    kind: 'link',
    type: 'primary',
    icon: 'up-arrow',
    url: '#top',
    attributes: 'title="Return focus to the top of the page"', <----FIXED HERE
    modifier_class: 'ct-back-to-top__button',
  } only %}
</div>

The button component does not have the `title` prop exposed on purpose: it is not possible to predict what attributes would be needed so exposing only some of them is inconsistent.

Please consider reverting the commit in favour of the proposed fix.

@alex.skrypnyk title attribute only works when no text is in the tag and so yes your PR would work. The PR that has been committed
also works because it adds visually hidden text.

https://github.com/civictheme/uikit/pull/391

We might add your change to provide a tooltip for back to top as this would be nice feature to have but on this issue at hand both work correctly.

richardgaunt → credited alan.cole → .

Hi, sorry for the delay. I was a bit tied up on other development work. As per the latest conversations over here, I'd echo with @richardgaunt,
as we're using visually hidden class, so it'll be accessible by screen readers on the other hand incorporating the title attribute so as that we can have a nice tooltip over it, sounds a good progressive enhancement.

Verified and tested on 1.x-dev

Testing Results:
1. Back to top has a visually hidden text - PASS
2. Screenreader can readout visually hidden text of back to top - PASS

Screenshots:

Moving to RTBC

Automatically closed - issue fixed for 2 weeks with no activity.