Use <button> or <input type="button"/> exclusively

phetsims / a11y-research

a repository to track PhETs research into accessibility, or "a11y" for short

MIT License

3 stars 0 forks source link

Use <button> or <input type="button"/> exclusively #97

Open zepumph opened 6 years ago

zepumph commented 6 years ago

From https://github.com/phetsims/scenery/issues/748,

there are multiple places where we use both. I think we should decide which one is best. I think for the majority we use tagName: "button", but, for example in RoundStickyToggleButton, not always.

Marking for dev meeting and tagging @terracoda @mbarlow12 @jessegreenberg for opinions on how to proceed (or if you think it doesn't matter to have the inconsistency).

terracoda commented 6 years ago

@zepumph, button is the better, more flexible and more modern choice. In its early days it had some styling issues with IE6. Those days are over.

I do not know what a RoundStickyToggleButton is, but toggle behaviour can be created by using a button element with the aria-pressed attribute.

jessegreenberg commented 6 years ago

Agreed - button is also more simple HTML and will require fewer options from the Accessibility trait.

zepumph commented 6 years ago

I see 6 occurences in the project of inputType: 'button', should we fix these, or is it sometimes preferred to use this strategy, see:

[x] goPauseButton.js (both the "Go" and the "Pause")
[x] ObservationWindow.js
[x] ResetAllButton.js
[ ] RoundStickyToggleButton.js
[ ] In AccessibilityTests.js

Side note: Should we keep this in a11y tests even if we don't want to use input type buttons in the project, just to make sure we support it and nothing breaks?

zepumph commented 6 years ago

From dev meeting, @jessegreenberg will take this on.