Fix duplicate navigation for lesson nav

[renintw]

Fixes #2782

This PR removes the entire screen-reader-text div - ie. the nav & the first "completed" button are removed.
Also added a visible "Previous Lesson" button to sensei lesson actions.
And since the style of the Sensei next lesson button cannot align well with the previous lesson button on smaller screens (either it doesn't automatically become two rows or it becomes unclickable), a new "Next Lesson" button is also added.

I haven't figured out how to indicate that the current lesson is already completed. Initially it was a button-like div, but it caused confusion, so I removed it. Any thoughts on this? @WordPress/meta-design

Screencasts

Before

Before.mov

After

After.mp4

Smaller screen

[jasmussen]

The progressbar is the main piece.

Changing the text of the button, and making it disabled, is a good idea. Could look like this:

Noting here that the button is disabled, and disabled elements do not need to meet contrast requirements, and therefore it is intentionally very light. We can also darken that text to charcoal 5:

[renintw]

Thanks @jasmussen. Does this match your expectations of the result?

lesson.complete.mp4

[jasmussen]

Yes it does. There may still be optimizations to do with regards to the next/previous lesson buttons and where they sit, perhaps they are reduced to just "Next" and "Previous", and are arrows instead of the bigger buttons. But we're getting into a detail territory that isn't necessarily a blocker for this particular PR.

[ryelle]

Changing the text of the button, and making it disabled, is a good idea.
Noting here that the button is disabled, and disabled elements do not need to meet contrast requirements, and therefore it is intentionally very light.

I disagree with this. Part of the original feedback in the a11y issue was that "the second button is an interactive control that is not disabled, but does not do anything. This is confusing for all users. It should just be text, and not be an interactive element."

It is not really a disabled button, it's meant to convey information to the user. There's a suggestion that we could add the "completed" label to the main lesson title, and I think that would be better - maybe something like this

Then we could remove the "Completed" faux-button from the end of the lesson, so it only has the next/previous buttons.

[ryelle]

This could be done with CSS — display:none hides content from everyone, including screen readers.

.sensei-lesson-footer .screen-reader-text {
    display: none;
}

[renintw]

Ah, yeah, I was initially thinking about completely removing it, so I went ahead and did it that way. Thanks!
2899198

[renintw]

It is not really a disabled button, it's meant to convey information to the user. There's a suggestion that we could add the "completed" label to the main lesson title, and I think that would be better - maybe something like this

Yeah, actually this is what I had in mind originally, but I also feel that using a disabled button could be acceptable, maybe just treating it as a button-like div, as with that commit, the screen reader wouldn't read it as a button, it would just read the text "lesson completed." But it might be a bit confusing to sighted users and adding a label is definitely better.

[renintw]

maybe something like this

I'll try this first. However, I was originally thinking about adding a green label somewhere to make it more obvious, for example like adding an icon like you did and making the entire title green. Also, the "completed" status icon in the sidebar should probably be green as well, to make it more consistent with other places. This can be done post-launch, though.

[ryelle]

Looks good! I tested with VoiceOver and no extra buttons/links exist. I think the title update can be handled in a future PR. Good to merge pending the unused CSS removal.

[ryelle]

I think you can remove this style, since the disabled button has been removed.

[renintw]

21f09df

[ryelle]

However, I was originally thinking about adding a green label somewhere to make it more obvious, for example like adding an icon like you did and making the entire title green. Also, the "completed" status icon in the sidebar should probably be green as well, to make it more consistent with other places. This can be done post-launch, though.

This was definitely thrown together in dev tools for a suggestion. I think this can wait until post-launch so we can get some proper design input for it.

[renintw]

This was definitely thrown together in dev tools for a suggestion. I think this can wait until post-launch so we can get some proper design input for it.

Opened an issue for this.