Adds selection state of elements for screenreader

[adeelkhan]

Dashboard header was missing aria-current and
aria-selected attributes causing no information
exposed to screen reader about selection.This
would enable such info to be passed to screen
reader

LEARNER-6611

[MichaelRoytman]

This looks good to me, but I'm going to hold off on approving it until the failing accessibility tests are passing.

[wittjeff]

jenkins run a11y

[wittjeff]

The problem is a role/state mismatch. See https://www.stefanjudis.com/blog/aria-selected-and-when-to-use-it/.
I'll look into a suggestion for a fix.

[wittjeff]

I think this will work if we just use aria-current="page" and omit aria-selected (which was an older method before aria-current came in with ARIA1.1).

[wittjeff]

jenkins run a11y

[adeelkhan]

jenkins run a11y

[fysheets]

Hey @adeelkhan can we spin up a sandbox for this? Based on the notes from this URL the default for aria-current should be false. Based on this line of code: https://github.com/edx/edx-platform/pull/19360/files#diff-9e702e24e0c4050c5f6038511aa82b29R34 I would expect that by setting else '' it would default false and work as expected. But if that is not happening I think actually seeing the code in action would be useful for determining why. Also, is there a reason why we can't just call out else 'false' here instead of empty string?

[wittjeff]

Noting for the record that the Axe tests were failing due to the package (v1.1) not recognizing aria-current. Aria-current rules were added with v2.2. Adeel is testing a bump to current version (v3.1.2). There's also this issue regarding aria-current="". dequelabs/axe-core#994

[MichaelRoytman]

I tried bumping the version of axe-core in edx/edx-custom-a11y-rules and installed from my branch into edx-platform to see if that was the culprit, but it looks like it's still failing. Either my branch was not installed correctly into edx-platform, or the version of axe-core in edx/edx-custom-a11y-rules is not relevant for these tests.

https://github.com/edx/edx-custom-a11y-rules/tree/mroytman/update-axe-core

[adeelkhan]

jenkins run all

[adeelkhan]

@fysheets Here is the sandbox you asked. https://learner-6611-exposing-selection-state.sandbox.edx.org
It has the changes appearing correctly, please do review.

[fysheets]

@MichaelRoytman Looking at the link you sent, I'm not sure that your changes were released? Wouldn't we need to do a release of your changes in that repo then update the version in the platform package.json?

[MichaelRoytman]

@fysheets I was trying to npm install my changes from the branch in edx-custom-a11y-rules. Do you suspect that that's not working?

[fysheets]

Ah - Perhaps? If you try to install it that way locally, do you see the expected version installed? I think we had some issues with branch installations recently, didn't we?

[adeelkhan]

jenkins run lettuce
jenkins run quality

[edx-status-bot]

Your PR has finished running tests. There were no failures.

[edx-pipeline-bot]

EdX Release Notice: This PR has been deployed to the staging environment in preparation for a release to production on Thursday, December 20, 2018.

[edx-pipeline-bot]

EdX Release Notice: This PR has been deployed to the production environment.