Improved a11y of the poll form
authorMarcel Werk <burntime@woltlab.com>
Sun, 7 Oct 2018 17:22:28 +0000 (19:22 +0200)
committerMarcel Werk <burntime@woltlab.com>
Sun, 7 Oct 2018 17:22:28 +0000 (19:22 +0200)
See #2713

com.woltlab.wcf/templates/__messageFormPoll.tpl
com.woltlab.wcf/templates/__messageFormPollInline.tpl
wcfsetup/install/files/js/WCF.Poll.js
wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js

index c7f549086fc45089c00d7895c527280c2fd7ea88..e1d8fddc0c933cfaab14724a64cc66798aba6944 100644 (file)
@@ -41,7 +41,7 @@
                                <label for="pollEndTime">{lang}wcf.poll.endTime{/lang}</label>
                        </dt>
                        <dd>
-                               <input type="datetime" name="pollEndTime" id="pollEndTime" value="{if $pollEndTime}{@$pollEndTime|date:'c'}{/if}" class="medium">
+                               <input type="datetime" tabindex="-1" name="pollEndTime" id="pollEndTime" value="{if $pollEndTime}{@$pollEndTime|date:'c'}{/if}" class="medium">
                                {if $errorField == 'pollEndTime'}
                                        <small class="innerError">
                                                {lang}wcf.poll.endTime.error.{@$errorType}{/lang}
index b0f9a5450e01d5b958d16edcf29698fcef521d1d..48f4719005a44061f7a2b3855283baa40adf45c8 100644 (file)
@@ -38,7 +38,7 @@
                                <label for="pollEndTime_{$wysiwygSelector}">{lang}wcf.poll.endTime{/lang}</label>
                        </dt>
                        <dd>
-                               <input type="datetime" name="pollEndTime" id="pollEndTime_{$wysiwygSelector}" value="{if $pollEndTime}{@$pollEndTime|date:'c'}{/if}" class="medium">
+                               <input type="datetime" tabindex="-1" name="pollEndTime" id="pollEndTime_{$wysiwygSelector}" value="{if $pollEndTime}{@$pollEndTime|date:'c'}{/if}" class="medium">
                        </dd>
                </dl>
                <dl>
index e8cdb276ebaae4414cb16a36d6579602fde397cb..9dc00d18509b89565af5e1123b61467b7de34590 100644 (file)
@@ -124,8 +124,8 @@ if (COMPILER_TARGET_DEFAULT) {
                        // insert buttons
                        var $container = $('<div class="pollOptionInput" />').appendTo($listItem);
                        $('<span class="icon icon16 fa-arrows sortableNodeHandle" />').appendTo($container);
-                       $('<span class="icon icon16 fa-plus jsTooltip jsAddOption pointer" title="' + WCF.Language.get('wcf.poll.button.addOption') + '" />').click($.proxy(this._addOption, this)).appendTo($container);
-                       $('<span class="icon icon16 fa-times jsTooltip jsDeleteOption pointer" title="' + WCF.Language.get('wcf.poll.button.removeOption') + '" />').click($.proxy(this._removeOption, this)).appendTo($container);
+                       $('<a role="button" href="#" class="icon icon16 fa-plus jsTooltip jsAddOption pointer" title="' + WCF.Language.get('wcf.poll.button.addOption') + '" />').click($.proxy(this._addOption, this)).appendTo($container);
+                       $('<a role="button" href="#" class="icon icon16 fa-times jsTooltip jsDeleteOption pointer" title="' + WCF.Language.get('wcf.poll.button.removeOption') + '" />').click($.proxy(this._removeOption, this)).appendTo($container);
                        
                        // insert input field
                        var $input = $('<input type="text" value="' + optionValue + '" maxlength="255" />').keydown($.proxy(this._keyDown, this)).appendTo($container);
@@ -170,6 +170,8 @@ if (COMPILER_TARGET_DEFAULT) {
                 * @param        object                event
                 */
                _addOption: function (event) {
+                       event.preventDefault();
+                       
                        if (this._count === this._maxOptions) {
                                return false;
                        }
@@ -185,6 +187,8 @@ if (COMPILER_TARGET_DEFAULT) {
                 * @param        object                event
                 */
                _removeOption: function (event) {
+                       event.preventDefault();
+                       
                        $(event.currentTarget).closest('li', this._container[0]).remove();
                        
                        this._count--;
index aedf0ece6302aed90a26296c248ff52e2b880998..2e2e1d5b0a601d222ba752a27a4bd582d298b088 100644 (file)
@@ -161,7 +161,8 @@ define(['DateUtil', 'Language', 'ObjectMap', 'Dom/ChangeListener', 'Ui/Alignment
                                container.className = 'inputAddon';
                                
                                var button = elCreate('a');
-                               button.className = 'inputSuffix button';
+                               button.href = '#';
+                               button.className = 'inputSuffix button jsTooltip';
                                button.addEventListener(WCF_CLICK_EVENT, _callbackOpen);
                                container.appendChild(button);