Improved a11y of radio buttons
authorMarcel Werk <burntime@woltlab.com>
Sun, 7 Oct 2018 17:21:24 +0000 (19:21 +0200)
committerMarcel Werk <burntime@woltlab.com>
Sun, 7 Oct 2018 17:21:24 +0000 (19:21 +0200)
templates/conversationAddParticipants.tpl
templates/conversationLabelManagement.tpl
templates/conversationLeave.tpl

index 55be1e83815b30b0e5b5deba93c0e32e7df83ce5..cca3719d6b4714d91067145c1afc840cf49db3b8 100644 (file)
@@ -7,8 +7,8 @@
 </dl>
 {if !$conversation->isDraft}
        {if $conversation->canAddParticipantsUnrestricted()}
-               <dl class="jsRestrictVisibility">
-                       <dt>{lang}wcf.conversation.visibility{/lang}</dt>
+               <dl role="group" aria-labelledby="messageVisibilityLabel" class="jsRestrictVisibility">
+                       <dt><label id="messageVisibilityLabel">{lang}wcf.conversation.visibility{/lang}</label></dt>
                        <dd>
                                <label><input type="radio" name="messageVisibility" value="all" checked> {lang}wcf.conversation.visibility.all{/lang}</label>
                                <small>{lang}wcf.conversation.visibility.all.description{/lang}</small>
index 7ef21e749bd6de63a360ddb3d32baad9bd9cccfd..b915eef36eb7ca15cb3efbfa25b585d71a54a81c 100644 (file)
@@ -24,7 +24,7 @@
        <dl>
                <dt>{lang}wcf.conversation.label.cssClassName{/lang}</dt>
                <dd>
-                       <ul id="labelManagementList">
+                       <ul role="group" aria-label="{lang}wcf.conversation.label.cssClassName{/lang}" id="labelManagementList">
                                {foreach from=$cssClassNames item=cssClassName}
                                        <li><label>
                                                <input type="radio" name="cssClassName" value="{@$cssClassName}"{if $cssClassName == 'none'} checked{/if}>
index 36458bd45fd3abb41722c21cad7095da97373567..7350529203dc69c23003946bc58ce3bfc75fd891 100644 (file)
@@ -1,4 +1,4 @@
-<dl class="wide">
+<dl role="group" aria-label="{lang}wcf.conversation.hideConversation{/lang}" class="wide">
        {if $hideConversation == 1}
                <dd>
                        <label><input type="radio" name="hideConversation" value="0"> {lang}wcf.conversation.hideConversation.restore{/lang}</label>
@@ -17,4 +17,4 @@
 
 <div class="formSubmit">
        <button id="hideConversation" class="buttonPrimary">{lang}wcf.global.button.submit{/lang}</button>
-</div>
\ No newline at end of file
+</div>