switcher as web component

[dgrammatiko]

Pull Request for Issue # .

Summary of Changes

Switcher is now a true web component.

Why?

• Truly decouple css of the component from any css framework
• Allow the component to disconnect/reconnect without breaking (eg try resizing the article edit and you'll figure out what's fixed there)
• support for web components is looking great now (Chrome, Opera, Safari, FF(next ver)) only MS is missing, but should come before J4
• Prepare for the future, eg support all the frameworks out there: check https://custom-elements-everywhere.com

Testing Instructions

@ciar4n can you check that everything is ok here (eg edit an article and check that the resize is working ok now and also that save is not messed up)

Expected result

Not broken

Actual result

Broken

Documentation Changes Required

@wilsonge you'll need to merge this

[ciar4n]

Very nice. I am unable to find any issues. Working well with shadow dom on Chrome. Fallback back to CE also working (Firefox).

[chmst]

The switcher works fine but I suggest to discuss if we need a visible label?
I think if there is no visible label at all, everyone understands what the switcher shows and what to do. Green (or dark for colorblind) = on. Light = off. Click on the switcher to change th state.

Now the switcher for example shows green = yes. The label says "no".
Or the switcher is muted, but the label says "yes". This is confusing.

Alternatives are:

• The text additionally is visible on the switcher itself, but this makes Problems with translated text.

• Labels left and right: "yes" - buttons -"no".
  This is correct and everyone understands (but is is a challenge for designers) because the swichers then are not in line with input fields.
  .

[dgrammatiko]

but this makes Problems with translated text.

That shouldn't be a problem as we're using properly translatable strings there

but is is a challenge for designers

that will make a lot of people angry

[brianteeman]

Using colour alone to signify any meaning will be an a11y fail. If you can't see colours etc then it's a problem. The golden rule is always to have at least two visual indicators

[chmst]

@brianteeman in this case, the different intensity of colour could be sufficient. Because the colour has no meaning, a switcher could be blue or pink as well. The colour of the muted buttons or the label is an a11y issue, a contrast ratio of about 1.5 is too low. But this is easily changed in the css so I did not mention it.

@dgrammatiko the difficulty is that longer texts ar not readable on switchers. Have a look here: https://issues.joomla.org/tracker/joomla-cms/add - to understand the "view mode" switcher you have to inspect the source code - depending on the active language.

[dgrammatiko]

Reminder here, implement a solution (eg attribute inverted) for: joomla/joomla-cms#20314

[Bakual]

I agree that the labels are confusing as it is.

I also think colors will not be enough. Especially when it comes to parameters where "enabled" is where you actually turn something off. We have this in J3 in several places where the button colors are inverted (eg red for 1 and green for 0). The most known example being the "Site Offline" parameter.
With the switcher, it will be green when the site is set offline, it should be red.

[chmst]

@Bakual green/red or other colours are an a11y issue. But your example shows very well why colours are wrong on switchers.
See for example the issue tracker.

If the label would be "Show Help?" Then the swicher would change the state on = yes/off = no. No red/green or green/blue but different intensity of a colour - this is correct in the implementation by @dgrammatiko

Or View Mode: Helpmode - Switcher - Professional mode

[dgrammatiko]

Since people were unhappy with the encapsulation here is another approach:

PROS

• Still true web component
• uses regular file.css, lazy loaded (only once)
• overrides still work (eg /templates/mything/css...)

Cons

• css and js paths are predefined and correlated ( eg something/css/file.css and something/js/file.js)

@ciar4n @wilsonge

[wilsonge]

So after discussion in skype this is approved pending the implementation of CSS variables (and a issue in the tracker to discuss ie11 effects)

[C-Lodder]

type="text/css" << not needed

[dgrammatiko]

unfortunately document.currentScript doesn't work with IE, so we have to encapsulate the css here. To ease the pain for newcomers we will also provide a PWA where someone will be able to tweak the colours or the scss and get an installable plugin that will create overrides to the current template and then self destruct. (or something like that...)

[C-Lodder]

Im simply referring to the type attribute which is not required in this case when using HTML5