jquery.makeCollapsible: Use .prop() for value attribute of list item

The issue with "value" attributes is popularised through form
fields (e.g. change <input> value with prop, because it doesn't work
with attribute, attributes only change the DOM, not the live rendering).
However the attribute/property issue isn't limited to form fields and the
typical value/selected/disabled properties . It applies to all properties
and for any element that affects active state (if it changes the display,
one should use a property, not an attribute).

As far as I know, unlike for form fields, browsers do actually synchronise
attributes in the many of those cases (including list items), so there is
no immediate danger. But since it's caught by jQuery Migrate and a good
practice regardless, change it to use prop() as well.

To test:
 https://test.wikipedia.org/?oldid=199994#head-collapsible-ol

Change-Id: I246c26bd2958209feed73fc2ef31cf678b12fa3b

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index 314d518..05745f8 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -351,9 +351,9 @@
                                                // Make sure the numeral order doesn't get messed up, force the first (soon to be second) item
                                                // to be "1". Except if the value-attribute is already used.
                                                // If no value was set WebKit returns "", Mozilla returns '-1', others return 0, null or undefined.
-                                               firstval = $firstItem.attr( 'value' );
+                                               firstval = $firstItem.prop( 'value' );
                                                if ( firstval === undefined || !firstval || firstval === '-1' || firstval === -1 ) {
-                                                       $firstItem.attr( 'value', '1' );
+                                                       $firstItem.prop( 'value', '1' );
                                                }
                                                $toggleLink = buildDefaultToggleLink();
                                                $toggleLink.wrap( '<li class="mw-collapsible-toggle-li"></li>' ).parent().prependTo( $collapsible );