Social Media links on Dashboard have multiple accessibility issues

Description

It appears as though the same code that was used for the custom course options dropdown menu was used for the Twitter and Facebook links for each course on a user's dashboard. Because of this, there are a number of accessibility issues with the new controls:

1. They are not custom controls, so the aria-expanded and aria-haspopup attributes are inappropriate and mislead the user as to what they can expect when interacting with this control.
2. The screen reader text for each of these is not unique, nor does it fully describe what will happen when a user clicks on the link. The accessible label, or SR text in this case is simply "Twitter" and "Facebook". When a user is enrolled in multiple courses, they cannot distinguish between these links from one course to another. The label should be "Share DAT209x on Twitter" and "Share DAT209x on Facebook" that way its clear what will happen if the user follows the link. I have attached a screen shot that demonstrates how the links are not unique when viewed in a links list dialog box, which is how most screen reader users will encounter them.
3. The tooltip used on these controls is not accessible to keyboard only users. When you hover a mouse over these controls, a tooltip appears informing users what the control does. This should also happen when you TAB to these controls with a keyboard.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Ahsan Haq

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

Archived Product Areas - LMS

Customer

None

Partner Manager

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

1

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Components

Priority

CAT-3
Configure