[a11y] slider aria label compliance

[Etat-Plateforme]

Sliders should be labelled and a reference to this label should be provided using aria-labelledby.

[wesleycho]

What component is this for? There is no slider in UI Bootstrap currently.

[Tobino]

I think, it's more an issue on documentation than the component rating it self.

As you can see on bootstrap, they suggest tip for a11y
<div class="btn-group" role="group" aria-label="...">
http://getbootstrap.com/components/#btn-groups-single

They also provide warning on accessibility:
http://getbootstrap.com/components/#callout-btn-group-accessibility

Something similar will be very helpfull.

Example:

<div ng-controller="RatingDemoCtrl">
    <h4 id="rating">Default</h4>
    <rating aria-labelledby="rating" ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" ></rating>
    [...]
</div>

I don't know what is the best solution.

[wesleycho]

If this is for the rating component, is there nothing that needs to be added to the template for each star to support accessibility?

[Tobino]

You are right, we shoud add aria-valuetext for a better accessibility support.
The best thing is to open another issue.
A quick dirty hard coded example:

aria-valuetext="{{value}} star{{ value > 1 ? 's' : '' }}"

<script type="text/ng-template" id="template/rating/rating.html">

    <span ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="{{range.length}}" aria-valuetext="{{value}} star{{ value > 1 ? 's' : '' }}" aria-valuenow="{{value}}">
        <i ng-repeat="r in range track by $index" ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="glyphicon" ng-class="$index < value && (r.stateOn || 'glyphicon-star') || (r.stateOff || 'glyphicon-star-empty')">
            <span class="sr-only">({{ $index < value ? '*' : ' ' }})</span>
        </i>
    </span>

</script>

Live version here:
https://tobino.github.io/rgaa_bibliotheques_javascript/tutoriels/angular-ui.html#slider_link