Current page is not visually indicated when users are using High Contrast Mode

Description

This issue was identified by Microsoft during an internal audit for accessibility.

Currently, when a Windows user has enabled High Contrast mode, there is no visual indicator that a particular item in the course nav is the page they are currently on.

In the image above, I would expect to be able to tell that I am on the Notes page in the nav.

Elsewhere in the platform, we bold the text in links and buttons for the current page. I suggest the same fix here. I'm pretty sure you can fix it in this class definition here:
https://github.com/edx/edx-platform/blob/master/lms/static/sass/course/layout/_courseware_header.scss#L59

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Activity

Show:
Michael Terry
November 15, 2017, 9:57 PM

This also happens on the top of the page of courses.edx.org/dashboard

Michael Terry
November 16, 2017, 7:48 PM

Bolding would work, but I imagine we'd want the same user experience as the normal view here. (That is, in high contrast, there's only an underline underneath the current tab, not under the others.) I'll look into why that's not happening here.

Mark Sadecki
November 16, 2017, 8:39 PM

that would be happening because all states have a bottom border, although you may not see it because its the same color as the background. Windows High Contrast mode overrides the author defined styles/colors for things like font foreground and background colors, and border colors. It happens to be choosing the exact same color for both the focus/hover, and default states. Authors (we devs) have no control over what color the OS chooses in HC mode, so another solution has to be found. One that would work, but could be a PITA to implement (not difficult, just annoying) would be to remove the bottom border and replace it with a bottom margin of the same thickness of the current border for the default states, then the focus/hover/active states could set that margin to 0 and implement the colored bottom border.

Michael Terry
November 16, 2017, 9:07 PM

It looks like moving from a pattern of:

a {
border-bottom: solid transparent;
&.active {
border-bottom-color: $color;
}
}

to:

a {
border-bottom: hidden $color;
&.active {
border-bottom-style: solid;
}
}

will fix this. (i.e. instead of toggling the color, toggle the border style)

It seems aggressive of the browser to adjust a transparent color. But it seems to be doing so.

Mark Sadecki
November 16, 2017, 9:16 PM

I'm not sure border-bottom: hidden is going to do what we want here since, according to the spec, hidden is the same as none, which has a width of zero. That means we have to replace that width somewhere else in the box model, like the margin, as I recommended above. Without replacing the width somewhere else, the text of the active/hover/focused state will be that much higher in the box, making the text appear to jump up on hover/focus/active.

Fixed

Assignee

Michael Terry

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Priority

CAT-3
Configure