Improved a11y

See #2713

diff --git a/com.woltlab.wcf/templates/shareButtons.tpl b/com.woltlab.wcf/templates/shareButtons.tpl
index cdd793af0f3770cc32babdbce58c96c3aa312d14..7b06e5319e57f678bceb1f646002283a1961b876 100644 (file)
--- a/com.woltlab.wcf/templates/shareButtons.tpl
+++ b/com.woltlab.wcf/templates/shareButtons.tpl
@@ -4,7 +4,7 @@
        <ul class="inlineList">
                {if 'Facebook'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsShareFacebook" title="{lang}wcf.message.share.facebook{/lang}">
+                               <a href="#" role="button" class="button jsShareFacebook" title="{lang}wcf.message.share.facebook{/lang}" aria-label="{lang}wcf.message.share.facebook{/lang}">
                                        <span class="icon icon24 fa-facebook-official"></span>
                                        <span>{lang}wcf.message.share.facebook{/lang}</span>
                                </a>
@@ -12,7 +12,7 @@
                {/if}
                {if 'Twitter'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsShareTwitter" title="{lang}wcf.message.share.twitter{/lang}">
+                               <a href="#" role="button" class="button jsShareTwitter" title="{lang}wcf.message.share.twitter{/lang}" aria-label="{lang}wcf.message.share.twitter{/lang}">
                                        <span class="icon icon24 fa-twitter"></span>
                                        <span>{lang}wcf.message.share.twitter{/lang}</span>
                                </a>
@@ -20,7 +20,7 @@
                {/if}
                {if 'Google'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsShareGoogle" title="{lang}wcf.message.share.google{/lang}">
+                               <a href="#" role="button" class="button jsShareGoogle" title="{lang}wcf.message.share.google{/lang}" aria-label="{lang}wcf.message.share.google{/lang}">
                                        <span class="icon icon24 fa-google-plus-official"></span>
                                        <span>{lang}wcf.message.share.google{/lang}</span>
                                </a>
@@ -28,7 +28,7 @@
                {/if}
                {if 'Reddit'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsShareReddit" title="{lang}wcf.message.share.reddit{/lang}">
+                               <a href="#" role="button" class="button jsShareReddit" title="{lang}wcf.message.share.reddit{/lang}" aria-label="{lang}wcf.message.share.reddit{/lang}">
                                        <span class="icon icon24 fa-reddit"></span>
                                        <span>{lang}wcf.message.share.reddit{/lang}</span>
                                </a>
@@ -36,7 +36,7 @@
                {/if}
                {if 'WhatsApp'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsShareWhatsApp" title="{lang}wcf.message.share.whatsApp{/lang}">
+                               <a href="#" role="button" class="button jsShareWhatsApp" title="{lang}wcf.message.share.whatsApp{/lang}" aria-label="{lang}wcf.message.share.whatsApp{/lang}">
                                        <span class="icon icon24 fa-whatsapp jsTooltip"></span>
                                        <span>{lang}wcf.message.share.whatsApp{/lang}</span>
                                </a>
@@ -44,7 +44,7 @@
                {/if}
                {if 'LinkedIn'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsShareLinkedIn" title="{lang}wcf.message.share.linkedIn{/lang}">
+                               <a href="#" role="button" class="button jsShareLinkedIn" title="{lang}wcf.message.share.linkedIn{/lang}" aria-label="{lang}wcf.message.share.linkedIn{/lang}">
                                        <span class="icon icon24 fa-linkedin jsTooltip"></span>
                                        <span>{lang}wcf.message.share.linkedIn{/lang}</span>
                                </a>
@@ -52,7 +52,7 @@
                {/if}
                {if 'Pinterest'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsSharePinterest" title="{lang}wcf.message.share.pinterest{/lang}">
+                               <a href="#" role="button" class="button jsSharePinterest" title="{lang}wcf.message.share.pinterest{/lang}" aria-label="{lang}wcf.message.share.pinterest{/lang}">
                                        <span class="icon icon24 fa-pinterest-p jsTooltip"></span>
                                        <span>{lang}wcf.message.share.pinterest{/lang}</span>
                                </a>
@@ -60,7 +60,7 @@
                {/if}
                {if 'XING'|in_array:$__share_buttons_providers}
                        <li>
-                               <a href="#" class="button jsShareXing" title="{lang}wcf.message.share.xing{/lang}">
+                               <a href="#" role="button" class="button jsShareXing" title="{lang}wcf.message.share.xing{/lang}" aria-label="{lang}wcf.message.share.xing{/lang}">
                                        <span class="icon icon24 fa-xing jsTooltip"></span>
                                        <span>{lang}wcf.message.share.xing{/lang}</span>
                                </a>

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/JumpToTop.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/JumpToTop.js
index 5e696f32454294354f66cc22113050496bd38b3f..4b961da75d166ed70dec0a82c72bc8e92b853009 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/JumpToTop.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/JumpToTop.js
@@ -30,6 +30,7 @@ define(['Environment', 'Language', './Action'], function(Environment, Language,
                        button.className = 'jsTooltip';
                        button.href = '#';
                        elAttr(button, 'title', Language.get('wcf.global.scrollUp'));
+                       elAttr(button, 'role', 'button');
                        button.innerHTML = '<span class="icon icon32 fa-angle-up"></span>';
                        
                        button.addEventListener(WCF_CLICK_EVENT, this._jump.bind(this));