Skip to content

Commit 32fdf46

Browse files
rr-itbmack
rr-it
authored and
bmack
committed
[BUGFIX] Make some buttons reachable by keyboard
This makes some buttons reachable by keyboard. Before these buttons were implemented as `a`-tags with missing `href`-attributes, and thereby were not focusable. Used RegExp to find candidates for fixing: `<a\b(?:(?!\b?href=)[^>])*>` This also updates the 'styleguide' for 'modals' to show correct trigger-buttons in example code. Resolves: #104901 Releases: main, 13.4 Change-Id: I3d94424cb1981449e29001892b67d1344479c092 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/86009 Tested-by: Benni Mack <benni@typo3.org> Reviewed-by: Benni Mack <benni@typo3.org> Reviewed-by: Simon Schaufelberger <simonschaufi+typo3@gmail.com> Tested-by: Riccardo De Contardi <erredeco@gmail.com> Tested-by: Michael Telgkamp <michael.telgkamp@mindscreen.de> Tested-by: core-ci <typo3@b13.com> Tested-by: Simon Schaufelberger <simonschaufi+typo3@gmail.com> Reviewed-by: Michael Telgkamp <michael.telgkamp@mindscreen.de>
1 parent cc5d6de commit 32fdf46

File tree

5 files changed

+18
-17
lines changed

5 files changed

+18
-17
lines changed

‎typo3/sysext/backend/Classes/Controller/PageLayoutController.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -327,9 +327,9 @@ protected function generateMessagesForCurrentPage(ServerRequestInterface $reques
327327
$infoBoxes[] = [
328328
'title' => $languageService->sL('LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:goToListModule'),
329329
'message' => '<p>' . $languageService->sL('LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:goToListModuleMessage') . '</p>'
330-
. '<a class="btn btn-primary" data-dispatch-action="TYPO3.ModuleMenu.showModule" data-dispatch-args-list="web_list">'
330+
. '<button type="button" class="btn btn-primary" data-dispatch-action="TYPO3.ModuleMenu.showModule" data-dispatch-args-list="web_list">'
331331
. $languageService->sL('LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:goToListModule')
332-
. '</a>',
332+
. '</button>',
333333
'state' => InfoboxViewHelper::STATE_INFO,
334334
];
335335
}

‎typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Modals/InsertElements.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ <h2 class="h3 t3-form-group-{insertRenderablePanelConfiguration.key}">
88
<div class="row">
99
<f:for each="{insertRenderablePanelConfiguration.elements}" as="element">
1010
<div class="col-4 mb-3">
11-
<a class="text-start t3-form-group-{insertRenderablePanelConfiguration.key} t3-form-type-{element.cssKey} btn btn-default d-block" title="{element.key}" data-element-type="{element.key}">
11+
<button type="button" class="text-start t3-form-group-{insertRenderablePanelConfiguration.key} t3-form-type-{element.cssKey} btn btn-default d-block" title="{element.key}" data-element-type="{element.key}">
1212
<core:icon identifier="{element.iconIdentifier}" alternativeMarkupIdentifier="inline" />
1313
<span>{element.label}</span>
14-
</a>
14+
</button>
1515
</div>
1616
</f:for>
1717
</div>

‎typo3/sysext/form/Resources/Private/Backend/Partials/FormEditor/Modals/InsertPages.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ <h2 class="h3 t3-form-group-{insertRenderablePanelConfiguration.key}">
88
<div class="row">
99
<f:for each="{insertRenderablePanelConfiguration.elements}" as="element">
1010
<div class="col-sm-4">
11-
<a class="t3-form-group-{insertRenderablePanelConfiguration.key} t3-form-type-{element.cssKey} btn btn-default d-block" title="{element.key}" data-element-type="{element.key}">
11+
<button type="button" class="t3-form-group-{insertRenderablePanelConfiguration.key} t3-form-type-{element.cssKey} btn btn-default d-block" title="{element.key}" data-element-type="{element.key}">
1212
<span class="float-start">
1313
<core:icon identifier="{element.iconIdentifier}" alternativeMarkupIdentifier="inline" />
1414
<span>{element.label}</span>
1515
</span>
1616
<span class="clearfix"></span>
17-
</a>
17+
</button>
1818
</div>
1919
</f:for>
2020
</div>

‎typo3/sysext/recycler/Resources/Private/Partials/RecordsTable/DeletedRecord.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,23 @@
2323
<td class="col-datetime">{record.tstamp}</td>
2424
<td class="col-control">
2525
<div class="btn-group">
26-
<a
26+
<button
27+
type="button"
2728
class="btn btn-default"
2829
data-action="undo"
2930
title="{f:translate(key: 'LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.undo')}"
30-
role="button"
3131
>
3232
<core:icon identifier="actions-edit-undo" />
33-
</a>
33+
</button>
3434
<f:if condition="{allowDelete}">
35-
<a
35+
<button
36+
type="button"
3637
class="btn btn-default"
3738
data-action="delete"
3839
title="{f:translate(key: 'LLL:EXT:recycler/Resources/Private/Language/locallang.xlf:button.delete')}"
39-
role="button"
4040
>
4141
<core:icon identifier="actions-edit-delete" />
42-
</a>
42+
</button>
4343
</f:if>
4444
</div>
4545
<div class="btn-group">

‎typo3/sysext/styleguide/Resources/Private/Templates/Backend/Components/Modal.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,22 @@ <h1><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xl
2323

2424
<h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.modal.section.default.headline" /></h2>
2525
<sg:example codePreview="true" codeLanguage="html">
26-
<a class="btn btn-default t3js-modal-trigger">Open modal</a>
26+
<button type="button" class="btn btn-default t3js-modal-trigger">Open modal</button>
2727
</sg:example>
2828

2929
<h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.modal.section.customTitleContent.headline" /></h2>
3030
<f:variable name="codeSnippetCustomTitle">
31-
<a class="btn btn-default t3js-modal-trigger" data-title="Custom modal title" data-content="Lorem ipsum dolor...">Open modal</a>
31+
<button type="button" class="btn btn-default t3js-modal-trigger" data-title="Custom modal title" data-content="Lorem ipsum dolor...">Open modal</button>
3232
</f:variable>
3333
<sg:example codePreview="true" codeLanguage="html" customCode="{codeSnippetCustomTitle}">
34-
<a
34+
<button
35+
type="button"
3536
class="btn btn-default t3js-modal-trigger"
3637
data-title="Custom modal title"
3738
data-content="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
3839
>
3940
Open modal
40-
</a>
41+
</button>
4142
</sg:example>
4243

4344
<h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xlf:component.modal.section.severity.headline" /></h2>
@@ -57,7 +58,7 @@ <h2><f:translate key="LLL:EXT:styleguide/Resources/Private/Language/locallang.xl
5758
</f:if>
5859
</f:variable>
5960
<div class="example-item">
60-
<a class="btn btn-{buttonClass -> f:spaceless()} t3js-modal-trigger" data-severity="{variant}">Open {variant} modal</a>
61+
<button type="button" class="btn btn-{buttonClass -> f:spaceless()} t3js-modal-trigger" data-severity="{variant}">Open {variant} modal</button>
6162
</div>
6263
</f:for>
6364
</div>

0 commit comments

Comments
 (0)