Use <button> in EuiToggleButton

[anishagg17]

Summary

Fixes #2982
Used button instead of input element

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[myasonik]

Hey Anish! Thanks for getting this started!

@snide Do you think we can deprecate EuiToggle? Scouring GitHub, I couldn't find any uses of it other than EuiButtonToggle...

[cchaos]

@myasonik I'd rather not deprecate utilities unless we absolutely have to. EuiToggle is just a bare-bones utility. I don't think it's necessary to remove during this PR, but we can discuss in a different issue.

[myasonik]

OK! Then @anishagg17, I think the changes done here should be done in EuiToggle and then EuiToggleButton mostly handles themeing and such.

I also just want to give you a heads up that because this PR will cause breaking changes, the EUI team will have to discuss the best way to roll this out still

[cchaos]

I'm not quite understanding why we need label, labelOn, and labelOff.... The labels, based on the value of the toggle, should be handled by the consuming application and not this component itself.

[myasonik]

Yeah, it's maybe a bit contrived... Not sure if it was the best way to solve this. (Very open to suggestions!) Here's the thing:

If we don't change the label of the text for the button, and only rely on style to communicate that the button is toggled on or off, we need to add aria-pressed="true"|"false".

If we do have separate texts for each state, then we shouldn't add aria-pressed at all.

[myasonik]

@anishagg17 Thank you so much for starting this PR! Your work here sparked some great discussion internally.

After looking at our existing Button components and the aria requirements for toggle buttons, we've decided to deprecate both the utility and this component all together.

Soon, I'll be writing up some docs to add to EUI on the path forward and how to recreate toggle buttons with our existing components.