[4.0] Custom Element Switcher [a11y]

[brianteeman]

The implementation of the switcher element completely fails accessibility. The label is not associated with the custom element so is ignored by the screen reader.

To make it easier for you this is a video recording using nvda

https://www.youtube.com/watch?v=hpo1qgFLZR0

I thought that the a11y team had tested and approved this

[brianteeman]

This article explains the problem and solution https://medium.com/@robdel12/creating-an-accessible-custom-checkbox-64bd87b5c195

[C-Lodder]

They had approved it.

[brianteeman]

So they obviously never tested it

[C-Lodder]

If I rightly remember, they tested the live link we provided, then Dimitris and myself wasted a Saturday discussing and rewriting it based on feedback.

[brianteeman]

Anyway the past is irrelevant. It is not accessible as it is and can't be used.

[chmst]

I said already here joomla/40-backend-template#395 that swithers are not userfriendly as they are. In the actual version it seemed to be better - I did not hear the speaker.

The only way for accessible switchers in my opinion this https://codepen.io/nickbottomley/pen/uhfmn.
Labels for the state on/off must be left and right of the switcher.
If this is not possible, then we better use Checkboxes or lists or simple radio buttons instead of swithers.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/20986.}

[brianteeman]

Labels for the state on/off must be left and right of the switcher.

What is the reasoning for this?

[zwiastunsw]

I tested it with a new template. Screen reader: NVDA 2018.2.1. Windows 10. The switch works correctly when you are in focus mode (NVDA + space). If you are in browse mode, the switch does not work.
I also tested with the ChromeVox. It is working properly.

[brianteeman]

In all my tests the label is never announced

[zwiastunsw]

see: test switcher, article option, j4

[brianteeman]

yes that is exactly what my first video showed. the label is never announced

[zwiastunsw]

You are right! The label is not announced.

[brianteeman]

finally

[dgrammatiko]

@brianteeman apart the not announced label are there any other problems with this component?

[brianteeman]

that was all i checked. read the article I linked to for the solution

[ciar4n]

What markup would be considered a11y?

The current switcher...

<span class="switcher active" tabindex="0" aria-checked="true" role="switch" aria-label="Yes">
	<input id="jform_params_menu_text0" name="jform[params][menu_text]" value="0" tabindex="-1" type="radio">
	<input id="jform_params_menu_text1" name="jform[params][menu_text]" value="1" checked="checked" class="active" tabindex="-1" type="radio">
	<span class="switch"></span>
</span>

[brianteeman]

@ciar4n it is not the switcher code itself it is that the label is never announced. read the article I linked to for the solution

[dgrammatiko]

read the article I linked to for the solution

well that article refers to a single checkbox, clearly what we have here is totally different

[brianteeman]

The issue as far as I can tell is that you have
// Aria-label ONLY in the container span!

[brianteeman]

Reopening.
The switcher should be a fieldset and the label from the xml used as a legend
The label should be the value eg JNO and JYES
If desired a more verbose aria-label can be added with a value of "label"-"value"

I created a codepen to show it can work (without any js)
https://codepen.io/brianteeman/pen/MRwJqd?

Does this really need to be a custom element?

Obviously the styling would need to be updated to match our styles

[brianteeman]

Sorry @chmst I completely forgot about the codepen that you shared. That also works if you add the fieldset and legend (its prettier than mine as well) https://codepen.io/nickbottomley/pen/uhfmn

[zwiastunsw]

Does this really need to be a custom element?

Your concept is the right one. It doesn't have to be a custom element. Because as you show, you can do it well without any JavaScript.

[dgrammatiko]

Does this really need to be a custom element?

It doesn't have to be a custom element.

YES ALL FIELDS NEEDS TO BE CUSTOM ELEMENTS
Here is the reasons:

• Custom elements are the only scripts that are lazily loaded
• Custom Elements are the only scripts that serve ES6 code to the newer browsers (>90%)
• Custom Elements leverage the browsers events so repeated fields work without any more code
• Custom Elements are modular by nature which is the right way to do it

That said, if a field doesn't have any javascript obviously doesn't have to be a custom element

[brianteeman]

If it needed any js that might be true
If they worked that might be true
If anyone understands them and is able to contribute that might be true
There is a reason @wilsonge called a moratorium on them

But all of that is off topic for this switcher

[dgrammatiko]

Unsubscribed...

[wilsonge]

I created a codepen to show it can work (without any js)
https://codepen.io/brianteeman/pen/MRwJqd?

This has a bug (I think) where i had to click on it twice to change the value (first time only gained focus but didn't toggle)

Sorry @chmst I completely forgot about the codepen that you shared. That also works if you add the fieldset and legend (its prettier than mine as well) https://codepen.io/nickbottomley/pen/uhfmn

Agree this is styled a bit nicer

Either way if we can do this without JS (and it works in IE11) then go with it and ditch this custom field

[brianteeman]

Going to have a go and see what code I can produce based on @chmst proposal

[brianteeman]

the code in the nickbottomley pen works on IE11 according to my test

[wilsonge]

Cool. then obviously I approve removing the javascript one in favour of the css based one if we don't need the JS. We obviously want to style it akin to the latest proposals https://coolcat-creations.com/joomla/#/screens/267320995 @coolcat-creations

[brianteeman]

For now I will just do some basic styling akin to the current switch

BTW do you know why com_config doesn't use the renderfield layout? I wasted a lot of time until I realised that

[wilsonge]

No clue. Feel free to convert if it doesn't break anything. I guess something to do with it being on the old MVC in J3 (although can't point at anything specific)

[joomla-cms-bot]

Set to "closed" on behalf of @franz-wohlkoenig by The JTracker Application at issues.joomla.org/joomla-cms/20986

[ghost]

closed as having Pull Request #24463