Button: refactor to use hidden input and non-button tag

[bill]

This is a ticket to refactor the button to:

• implement form submission by having a display:none <input>, and (programatically) calling click() on that <input> when the user clicks the visible Button node (assuming the Button is enabled).
• replace the visible <button> node with a <div> (with waiRole=button)

This will solve the following issues

1. Rendering glitches on IE6/7: #10802 and many other tickets

2. Submitting a form on IE6 by clicking a dijit.form.Button will pass the names/values of all the submit buttons, rather than just the button the user pressed (see #10693, the failure in the Button regression tests on IE6)

3. Submitting a form on IE, the value of the button passed to the server is the innerHTML of the <button> tag, not whatever value the user set via value=... (#10834)

4. Possible removing hacks like _layoutHackIE7() and whatever changes we've made to compensate for IE adding in unrequested margin to buttons, see #10211

We are going to try to get this into 1.5, given the number of problems that the change can solve. After fixing it the above tickets (some of which are closed as wontfix or worksforme) can be properly closed.

[Douglas Hays]

patch to support hidden INPUT elements within Button templates

[bill]

The changes look good, I am getting a failure (on both safari and FF) in test_Button.html though. I get two failures in the new onclick tests, for "onClick::reset: return" and "onClick::reset: empty".

I also tried switching the <button> tag to a <span> and it seems to work fine. I removed some CSS hacks from the button section of dijit.css, and also from Button.js.

[bill]

Oh nevermind, the above failures are because your tests depend on #11005 being fixed. I checked in your patch for #11005 and now those errors don't occur.

[Douglas Hays]

(In [21894]) Fixes #10693, #10834. Refs #11003. Add hidden INPUT tag to Button templates. The BUTTON tag will invoke the click method of the INPUT tag. This fixes the IE issues with multiple submit buttons and with submit values. The BUTTON continues to have visible rich text content and the INPUT has a simple value name name attribute that actually gets submitted but is otherwise invisible to the user.

[bill]

(In [21895]) Converting <button> tags to <span> tags to avoid rendering problems on IE and to eliminate workaround code for (some of) said rendering problems. Fixes #11003, #10802 !strict.

[bill]

(In [21904]) Make focus border rectangular rather than irregular. Refs #11003.

[bill]

(In [21905]) This BIDI workaround code (for tooltip placement in RTL mode) is no longer needed on IE6 or IE7, and it actually messes up display of buttons with tooltips on IE7, making them stretch the width of the viewport. Refs #3893, #11003.

[bill]

(In [21956]) since dijit.form.Button widget no longer has <button> node, refs #11003

[bill]

(In [21981]) Refactoring code to make opening from DropDownButton via keyboard (space/enter key) work on IE8:

• make _HasDropDown setup handlers on the focusNode, rather than domNode (simply by removing _buttonNode attach point), so that those handlers are isolated from the hidden <input> (which also fires a click event), and so the handlers still fire even though the ondijitclick code does a evt.preventDefault()
• connect to onkeydown rather than onkeypress since the ondijitclick's evt.preventDefault() call (in the onkeydown handler) cancels the onkeypress event on IE8.

Fixes #11040, refs #11003.

[bill]

(In [21983]) Make focus border rectangular rather than irregular. Refs #11003.

[bill]

(In [22056]) now that <button> has been converted to <span> these rules are no longer needed, refs #11003

[bill]

(In [22061]) now that <button> has been converted to <span> this rules is no longer needed, refs #8309, #11003

[bill]

(In [22065]) Limit the height:100% setting on dijitArrowButtonInner to Spinner. It's not needed anywhere else because we use <table> or vertical-align:middle to center the arrow, and it was breaking DropDownButton in quirks mode. Fixes #11082, refs #11003

[bill]

(In [22084]) Center Select's arrow button in a11y by removing the height:100% setting for Select's dijitArrowButtonInner. It's not needed, because Select uses a <table> and that can easily center the arrow (either text or icon). Refs #11003.

[bill]

(In [22088]) Forgot that INPUT.dijitInnerButton should still be displayed in high contrast mode, because those nodes are used to show both the icon (in normal mode) or the character (in high contrast mode). Refs #11003.

[bill]

(In [22387]) Make hidden <input> tag visibility:hidden rather than display:none, so that on webkit, user can still submit forms by pressing ENTER while focused on an <input>. Refs #11003, fixes #11275.

[bill]

(In [22392]) [22084] accidentally centered the text of the Select widget, it should be left aligned (or right-aligned in RTL mode). Refs #11003.

[bill]

(In [22435]) type="button" is meaningless on a <span> tag, it's just leftover from when we were using a <button> tag. refs #11003, 2718.