Skip to content

Commit

Permalink
[TASK] Use buttons in Permissions module
Browse files Browse the repository at this point in the history 
The permissions module previously used a lot of
anchor elements without a target defined.

To improve accessibility and semantic correctness
these selectors are now changed to button tags.

Resolves: #93306
Releases: master, 10.4
Change-Id: I181264307294bd84e0896d1602ddd8c9dc313167
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67478
Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Benni Mack <benni@typo3.org>
  • Loading branch information
@o-ba @bmack
o-ba authored and bmack committed Jan 21, 2021
1 parent e2a0439 commit 078dae1
Show file tree
Hide file tree
Showing 6 changed files with 40 additions and 34 deletions.
16 changes: 9 additions & 7 deletions Build/Sources/TypeScript/beuser/Resources/Public/TypeScript/Permissions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,14 +154,15 @@ class Permissions {
let html = $('<span/>', {
'id': 'o_' + page,
});
let aSelector = $('<a/>', {
'class': 'ug_selector changeowner',
let buttonSelector = $('<button/>', {
'type': 'button',
'class': 'ug_selector changeowner btn btn-link',
'data-page': page,
'data-owner': $element.data('owner'),
'data-username': usernameHtml,
'text': username,
});
html.append(aSelector);
html.append(buttonSelector);

// Replace content
$('#o_' + page).replaceWith(html);
Expand Down Expand Up @@ -220,14 +221,15 @@ class Permissions {
let html = $('<span/>', {
'id': 'g_' + page,
});
let aSelector = $('<a/>', {
'class': 'ug_selector changegroup',
let buttonSelector = $('<button/>', {
'type': 'button',
'class': 'ug_selector changegroup btn btn-link',
'data-page': page,
'data-group': $element.data('groupId'),
'data-group-id': $element.data('groupId'),
'data-groupname': groupnameHtml,
'text': groupname,
});
html.append(aSelector);
html.append(buttonSelector);

// Replace content
$('#g_' + page).replaceWith(html);
Expand Down
32 changes: 16 additions & 16 deletions typo3/sysext/beuser/Classes/Controller/PermissionAjaxController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,16 +201,16 @@ protected function renderUserSelector($page, $ownerUid, $username = '')
$elementId = 'o_' . $page;
$options = '<option value="0"></option>' . $options;
$selector = '<select name="new_page_owner" id="new_page_owner">' . $options . '</select>';
$saveButton = '<a class="saveowner btn btn-default" data-page="' . $page . '" data-owner="' . $ownerUid
. '" data-element-id="' . $elementId . '" title="Change owner">'
$saveButton = '<button class="saveowner btn btn-default" data-page="' . $page . '" data-owner="' . $ownerUid
. '" data-element-id="' . $elementId . '" title="Change owner" type="button">'
. $this->iconFactory->getIcon('actions-document-save', Icon::SIZE_SMALL)->render()
. '</a>';
$cancelButton = '<a class="restoreowner btn btn-default" data-page="' . $page . '" data-owner="' . $ownerUid
. '</button>';
$cancelButton = '<button class="restoreowner btn btn-default" data-page="' . $page . '" data-owner="' . $ownerUid
. '" data-element-id="' . $elementId . '"'
. (!empty($username) ? ' data-username="' . htmlspecialchars($username) . '"' : '')
. ' title="Cancel">'
. ' title="Cancel" type="button">'
. $this->iconFactory->getIcon('actions-close', Icon::SIZE_SMALL)->render()
. '</a>';
. '</button>';
return '<span id="' . $elementId . '">'
. $selector
. '<span class="btn-group">'
Expand Down Expand Up @@ -258,16 +258,16 @@ protected function renderGroupSelector($page, $groupUid, $groupname = '')
$elementId = 'g_' . $page;
$options = '<option value="0"></option>' . $options;
$selector = '<select name="new_page_group" id="new_page_group">' . $options . '</select>';
$saveButton = '<a class="savegroup btn btn-default" data-page="' . $page . '" data-group-id="' . $groupUid
. '" data-element-id="' . $elementId . '" title="Change group">'
$saveButton = '<button class="savegroup btn btn-default" data-page="' . $page . '" data-group-id="' . $groupUid
. '" data-element-id="' . $elementId . '" title="Change group" type="button">'
. $this->iconFactory->getIcon('actions-document-save', Icon::SIZE_SMALL)->render()
. '</a>';
$cancelButton = '<a class="restoregroup btn btn-default" data-page="' . $page . '" data-group-id="' . $groupUid
. '</button>';
$cancelButton = '<button class="restoregroup btn btn-default" data-page="' . $page . '" data-group-id="' . $groupUid
. '" data-element-id="' . $elementId . '"'
. (!empty($groupname) ? ' data-groupname="' . htmlspecialchars($groupname) . '"' : '')
. ' title="Cancel">'
. ' title="Cancel" type="button">'
. $this->iconFactory->getIcon('actions-close', Icon::SIZE_SMALL)->render()
. '</a>';
. '</button>';
return '<span id="' . $elementId . '">'
. $selector
. '<span class="btn-group">'
Expand All @@ -288,13 +288,13 @@ protected function renderToggleEditLock($page, $editLockState)
{
$page = (int)$page;
if ($editLockState === 1) {
$ret = '<span id="el_' . $page . '"><a class="editlock btn btn-default" data-page="' . $page
$ret = '<span id="el_' . $page . '"><button type="button" class="editlock btn btn-default" data-page="' . $page
. '" data-lockstate="1" title="The page and all content is locked for editing by all non-Admin users.">'
. $this->iconFactory->getIcon('actions-lock', Icon::SIZE_SMALL)->render() . '</a></span>';
. $this->iconFactory->getIcon('actions-lock', Icon::SIZE_SMALL)->render() . '</button></span>';
} else {
$ret = '<span id="el_' . $page . '"><a class="editlock btn btn-default" data-page="' . $page .
$ret = '<span id="el_' . $page . '"><button type="button" class="editlock btn btn-default" data-page="' . $page .
'" data-lockstate="0" title="Enable the &raquo;Admin-only&laquo; edit lock for this page">'
. $this->iconFactory->getIcon('actions-unlock', Icon::SIZE_SMALL)->render() . '</a></span>';
. $this->iconFactory->getIcon('actions-unlock', Icon::SIZE_SMALL)->render() . '</button></span>';
}
return $ret;
}
Expand Down
7 changes: 4 additions & 3 deletions typo3/sysext/beuser/Resources/Private/Partials/Permission/Groupname.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<span id="g_{pageId}">
<a
class="ug_selector changegroup"
<button
type="button"
class="ug_selector changegroup btn btn-link"
data-page="{pageId}"
data-group-id="{groupId}"
data-groupname="{groupname}"
Expand Down Expand Up @@ -33,5 +34,5 @@
</f:if>
</f:else>
</f:if>
</a>
</button>
</span>
7 changes: 4 additions & 3 deletions typo3/sysext/beuser/Resources/Private/Partials/Permission/Ownername.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
{namespace be=TYPO3\CMS\Backend\ViewHelpers}
<span id="o_{pageId}">
<a
class="ug_selector changeowner"
<button
type="button"
class="ug_selector changeowner btn btn-link"
data-page="{pageId}"
data-owner="{userId}"
data-username="{username}"
Expand Down Expand Up @@ -34,5 +35,5 @@
</f:if>
</f:else>
</f:if>
</a>
</button>
</span>
10 changes: 6 additions & 4 deletions typo3/sysext/beuser/Resources/Private/Templates/Permission/Index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,24 +91,26 @@ <h1><f:translate key="LLL:EXT:beuser/Resources/Private/Language/locallang_mod_pe
<span id="el_{data.row.uid}">
<f:if condition="{data.row.editlock}">
<f:then>
<a
<button
type="button"
class="editlock btn btn-default"
data-page="{data.row.uid}"
data-lockstate="1"
title="{f:translate(key: 'LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:EditLock_descr')}"
>
<core:icon identifier="actions-lock" />
</a>
</button>
</f:then>
<f:else>
<a
<button
type="button"
class="editlock btn btn-default"
data-page="{data.row.uid}"
data-lockstate="0"
title="{f:translate(key: 'LLL:EXT:beuser/Resources/Private/Language/locallang_mod_permission.xlf:EditLock_descr2')}"
>
<core:icon identifier="actions-unlock" />
</a>
</button>
</f:else>
</f:if>
</span>
Expand Down
2 changes: 1 addition & 1 deletion typo3/sysext/beuser/Resources/Public/JavaScript/Permissions.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 078dae1

Please sign in to comment.