[TASK] Improve accessibility of access module

Use buttons instead of span tags to make the module more accessible.

Resolves: #90872
Releases: master
Change-Id: Id183fa8de13ec3bea992cb9cdbe851127b1bc15c
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/64000


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Jonas Eberle <flightvision@googlemail.com>
Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Jonas Eberle <flightvision@googlemail.com>
Reviewed-by: Guido Schmechel <guido.schmechel@brandung.de>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>

Build/Sources/Sass/typo3/_element_buttons.scss

@@ -43,3 +43,15 @@
         }
     }
 }
+
+.btn-clear {
+    &:focus {
+        outline: 1px dotted #000;
+    }
+
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    outline: inherit;
+}

Build/Sources/TypeScript/beuser/Resources/Public/TypeScript/Permissions.ts

@@ -79,7 +79,7 @@ class Permissions {
       // Replace content
       $(elementSelector).replaceWith(data);
       // Reinitialize tooltip
-      $(elementSelector).find('span').tooltip();
+      $(elementSelector).find('button').tooltip();
     });
   }
 

typo3/sysext/beuser/Classes/ViewHelpers/PermissionsViewHelper.php

@@ -85,7 +85,8 @@ class PermissionsViewHelper extends AbstractViewHelper
             }
 
             $label = static::$permissionLabels[$mask];
-            $icon .= '<span style="cursor:pointer"'
+            $icon .= '<button'
+                . ' aria-label="' . htmlspecialchars($label) . ', ' . htmlspecialchars($mode) . ', ' . htmlspecialchars($arguments['scope']) . '"'
                 . ' title="' . htmlspecialchars($label) . '"'
                 . ' data-toggle="tooltip"'
                 . ' data-page="' . htmlspecialchars($arguments['pageId']) . '"'
@@ -93,7 +94,7 @@ class PermissionsViewHelper extends AbstractViewHelper
                 . ' data-who="' . htmlspecialchars($arguments['scope']) . '"'
                 . ' data-bits="' . htmlspecialchars($mask) . '"'
                 . ' data-mode="' . htmlspecialchars($mode) . '"'
-                . ' class="t3-icon change-permission fa ' . htmlspecialchars($permissionClass) . '"></span>';
+                . ' class="t3-icon btn-clear change-permission fa ' . htmlspecialchars($permissionClass) . '"></button>';
         }
 
         return '<span id="' . htmlspecialchars($arguments['pageId'] . '_' . $arguments['scope']) . '">' . $icon . '</span>';

typo3/sysext/beuser/Resources/Public/JavaScript/Permissions.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","jquery","TYPO3/CMS/Core/Ajax/AjaxRequest"],(function(e,t,a,r){"use strict";let o=new class{constructor(){this.options={containerSelector:"#typo3-permissionList"},this.ajaxUrl=TYPO3.settings.ajaxUrls.user_access_permissions,this.initializeEvents()}setCheck(e,t){if(document.editform[t]){let a=document.editform[t].value;for(let t=1;t<=5;t++)document.editform[e+"["+t+"]"].checked=a&Math.pow(2,t-1)}}checkChange(e,t){let a=0;for(let t=1;t<=5;t++)document.editform[e+"["+t+"]"].checked&&(a|=Math.pow(2,t-1));document.editform[t].value=a|("tx_beuser_system_beusertxpermission[check][perms_user]"===e?1:0),this.setCheck(e,t)}setPermissions(e){let t=e.data("page"),o=e.data("who"),n="#"+t+"_"+o;new r(this.ajaxUrl).post({page:t,who:o,permissions:e.data("permissions"),mode:e.data("mode"),bits:e.data("bits")}).then(async e=>{const t=await e.resolve();a(n).replaceWith(t),a(n).find("span").tooltip()})}toggleEditLock(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"toggle_edit_lock",page:t,editLockState:e.data("lockstate")}).then(async e=>{a("#el_"+t).replaceWith(await e.resolve())})}changeOwner(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"change_owner",page:t,ownerUid:e.data("owner"),newOwnerUid:a("#new_page_owner").val()}).then(async e=>{a("#o_"+t).replaceWith(await e.resolve())})}showChangeOwnerSelector(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"show_change_owner_selector",page:t,ownerUid:e.data("owner"),username:e.data("username")}).then(async e=>{a("#o_"+t).replaceWith(await e.resolve())})}restoreOwner(e){let t=e.data("page"),r=e.data("username"),o=r;void 0===r&&(r=a("<span>",{class:"not_set",text:"[not set]"}),o=r.html(),r=r.text());let n=a("<span/>",{id:"o_"+t}),s=a("<a/>",{class:"ug_selector changeowner","data-page":t,"data-owner":e.data("owner"),"data-username":o,text:r});n.append(s),a("#o_"+t).replaceWith(n)}changeGroup(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"change_group",page:t,groupUid:e.data("groupId"),newGroupUid:a("#new_page_group").val()}).then(async e=>{a("#g_"+t).replaceWith(await e.resolve())})}showChangeGroupSelector(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"show_change_group_selector",page:t,groupUid:e.data("groupId"),groupname:e.data("groupname")}).then(async e=>{a("#g_"+t).replaceWith(await e.resolve())})}restoreGroup(e){let t=e.data("page"),r=e.data("groupname"),o=r;void 0===r&&(r=a("<span>",{class:"not_set",text:"[not set]"}),o=r.html(),r=r.text());let n=a("<span/>",{id:"g_"+t}),s=a("<a/>",{class:"ug_selector changegroup","data-page":t,"data-group":e.data("groupId"),"data-groupname":o,text:r});n.append(s),a("#g_"+t).replaceWith(n)}initializeEvents(){a(this.options.containerSelector).on("click",".change-permission",e=>{e.preventDefault(),this.setPermissions(a(e.currentTarget))}).on("click",".editlock",e=>{e.preventDefault(),this.toggleEditLock(a(e.currentTarget))}).on("click",".changeowner",e=>{e.preventDefault(),this.showChangeOwnerSelector(a(e.currentTarget))}).on("click",".changegroup",e=>{e.preventDefault(),this.showChangeGroupSelector(a(e.currentTarget))}).on("click",".restoreowner",e=>{e.preventDefault(),this.restoreOwner(a(e.currentTarget))}).on("click",".saveowner",e=>{e.preventDefault(),this.changeOwner(a(e.currentTarget))}).on("click",".restoregroup",e=>{e.preventDefault(),this.restoreGroup(a(e.currentTarget))}).on("click",".savegroup",e=>{e.preventDefault(),this.changeGroup(a(e.currentTarget))})}};return TYPO3.Permissions=o,o}));
\ No newline at end of file
+define(["require","exports","jquery","TYPO3/CMS/Core/Ajax/AjaxRequest"],(function(e,t,a,r){"use strict";let o=new class{constructor(){this.options={containerSelector:"#typo3-permissionList"},this.ajaxUrl=TYPO3.settings.ajaxUrls.user_access_permissions,this.initializeEvents()}setCheck(e,t){if(document.editform[t]){let a=document.editform[t].value;for(let t=1;t<=5;t++)document.editform[e+"["+t+"]"].checked=a&Math.pow(2,t-1)}}checkChange(e,t){let a=0;for(let t=1;t<=5;t++)document.editform[e+"["+t+"]"].checked&&(a|=Math.pow(2,t-1));document.editform[t].value=a|("tx_beuser_system_beusertxpermission[check][perms_user]"===e?1:0),this.setCheck(e,t)}setPermissions(e){let t=e.data("page"),o=e.data("who"),n="#"+t+"_"+o;new r(this.ajaxUrl).post({page:t,who:o,permissions:e.data("permissions"),mode:e.data("mode"),bits:e.data("bits")}).then(async e=>{const t=await e.resolve();a(n).replaceWith(t),a(n).find("button").tooltip()})}toggleEditLock(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"toggle_edit_lock",page:t,editLockState:e.data("lockstate")}).then(async e=>{a("#el_"+t).replaceWith(await e.resolve())})}changeOwner(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"change_owner",page:t,ownerUid:e.data("owner"),newOwnerUid:a("#new_page_owner").val()}).then(async e=>{a("#o_"+t).replaceWith(await e.resolve())})}showChangeOwnerSelector(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"show_change_owner_selector",page:t,ownerUid:e.data("owner"),username:e.data("username")}).then(async e=>{a("#o_"+t).replaceWith(await e.resolve())})}restoreOwner(e){let t=e.data("page"),r=e.data("username"),o=r;void 0===r&&(r=a("<span>",{class:"not_set",text:"[not set]"}),o=r.html(),r=r.text());let n=a("<span/>",{id:"o_"+t}),s=a("<a/>",{class:"ug_selector changeowner","data-page":t,"data-owner":e.data("owner"),"data-username":o,text:r});n.append(s),a("#o_"+t).replaceWith(n)}changeGroup(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"change_group",page:t,groupUid:e.data("groupId"),newGroupUid:a("#new_page_group").val()}).then(async e=>{a("#g_"+t).replaceWith(await e.resolve())})}showChangeGroupSelector(e){let t=e.data("page");new r(this.ajaxUrl).post({action:"show_change_group_selector",page:t,groupUid:e.data("groupId"),groupname:e.data("groupname")}).then(async e=>{a("#g_"+t).replaceWith(await e.resolve())})}restoreGroup(e){let t=e.data("page"),r=e.data("groupname"),o=r;void 0===r&&(r=a("<span>",{class:"not_set",text:"[not set]"}),o=r.html(),r=r.text());let n=a("<span/>",{id:"g_"+t}),s=a("<a/>",{class:"ug_selector changegroup","data-page":t,"data-group":e.data("groupId"),"data-groupname":o,text:r});n.append(s),a("#g_"+t).replaceWith(n)}initializeEvents(){a(this.options.containerSelector).on("click",".change-permission",e=>{e.preventDefault(),this.setPermissions(a(e.currentTarget))}).on("click",".editlock",e=>{e.preventDefault(),this.toggleEditLock(a(e.currentTarget))}).on("click",".changeowner",e=>{e.preventDefault(),this.showChangeOwnerSelector(a(e.currentTarget))}).on("click",".changegroup",e=>{e.preventDefault(),this.showChangeGroupSelector(a(e.currentTarget))}).on("click",".restoreowner",e=>{e.preventDefault(),this.restoreOwner(a(e.currentTarget))}).on("click",".saveowner",e=>{e.preventDefault(),this.changeOwner(a(e.currentTarget))}).on("click",".restoregroup",e=>{e.preventDefault(),this.restoreGroup(a(e.currentTarget))}).on("click",".savegroup",e=>{e.preventDefault(),this.changeGroup(a(e.currentTarget))})}};return TYPO3.Permissions=o,o}));
\ No newline at end of file