Language picker inaccessibility

Affected page

Language picker in main menu for curriculum.

Discussion

The language picker in the main menu in the curriculum is currently inaccessible to keyboard only users because the change is triggered as soon as you press the down arrow key (which triggers a change event causing the language to be changed immediately). There really is no good way to use a <select> here if you want the change to be triggered without clicking a separate button to initiate the change (this just isn’t how selects were intended to operate). You basically have to implement an alternative solution that is accessible to keyboard users.

I have spent the past few days creating an alternative, accessible solution, and am just about ready to submit the PR, but before I do that I can’t help thinking that this might be over-complicating the issue and there is a better way. I’d like to suggest that we move the language picker to the user’s settings page. If we did that then we could have a button that initiates the change and then we could use a plain old <select> which would reduce the complexity of implementing this functionality considerably. We could still include the language picker in the main menu, but it would just be a link that takes the user to their settings page.

[bbsmooth]

If we change the “English” in the menu to a button with area “Change Language”, it should do the trick?

You are reading my mind. That’s exactly what I did (before I even read this).

[bbsmooth]

Only every time you complete a challenge/project.

Ahh, thank you. I don’t complete a lot of challenges so this example didn’t come to mind. Yes, this is what I am referring to when talking about a modal dialog for the language picker. I do agree that they are often misused and this contributes to their bad rep, but obviously we wouldn’t be misusing it here since we would only open it on user interaction. As for usability, I don’t see too much of an issue in this case. Dialogs can often enhance accessibility by focusing the user on a specific task and making it much clearer what the intent and results of their actions will be. In this case I think having a button that says “Change Language” (or whatever) is a little clearer than causing the change by interacting with the item directly in the list.

Just to be clear, while I think a modal approach might be a little better I’m perfectly fine with keeping it entirely within the menu and using a custom submenu approach. I will submit my PR soon and you can check out what I’ve done and then we can go from there.