From 85fbc88f80254cf56c239714e798def9a094b37e Mon Sep 17 00:00:00 2001
From: Christian Rath-Ulrich <christian@rath-ulrich.de>
Date: Mon, 10 Jun 2024 17:06:20 +0200
Subject: [PATCH] [BUGFIX] Change header tag in PaletteAndSingleContainer and
adjust tab.html
This commit fixes a minor issue where the header
tag in PaletteAndSingleContainer was incorrectly
set as h4. The tag has been changed to h3 for
better readability and semantics. Simultaneously,
visually hidden headers were also added to tabs to
improve accessibility.
Resolves: #104021
Releases: main, 12.4
Change-Id: Ic2301eabb23d1d17169056ec8e9ec40a5824c52c
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/84545
Reviewed-by: Benni Mack <benni@typo3.org>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: core-ci <typo3@b13.com>
---
Build/Sources/Sass/component/_panel.scss | 1 +
Build/Sources/Sass/typo3/_main_form.scss | 7 +------
.../Classes/Form/Container/PaletteAndSingleContainer.php | 2 +-
.../Resources/Private/Partials/ModuleTemplate/Tabs.html | 1 +
typo3/sysext/backend/Resources/Public/Css/backend.css | 5 ++---
5 files changed, 6 insertions(+), 10 deletions(-)
diff --git a/Build/Sources/Sass/component/_panel.scss b/Build/Sources/Sass/component/_panel.scss
index 53a6de922d91..cce3352c6d11 100644
--- a/Build/Sources/Sass/component/_panel.scss
+++ b/Build/Sources/Sass/component/_panel.scss
@@ -322,6 +322,7 @@ $panel-heading-bg-scale: -85%;
}
.tab-pane {
+ > h2 + .form-section,
> .panel-tab:first-child {
border-top: none;
}
diff --git a/Build/Sources/Sass/typo3/_main_form.scss b/Build/Sources/Sass/typo3/_main_form.scss
index 609482bbd806..c63343d2505f 100644
--- a/Build/Sources/Sass/typo3/_main_form.scss
+++ b/Build/Sources/Sass/typo3/_main_form.scss
@@ -248,13 +248,8 @@ select {
}
}
-.tab-pane {
- > .form-section:first-child {
- border-top: none;
- }
-}
-
.form-section-headline {
+ font-size: $h4-font-size;
margin-top: 0;
margin-bottom: 10px;
diff --git a/typo3/sysext/backend/Classes/Form/Container/PaletteAndSingleContainer.php b/typo3/sysext/backend/Classes/Form/Container/PaletteAndSingleContainer.php
index 682e1b358764..238e31ffd897 100644
--- a/typo3/sysext/backend/Classes/Form/Container/PaletteAndSingleContainer.php
+++ b/typo3/sysext/backend/Classes/Form/Container/PaletteAndSingleContainer.php
@@ -159,7 +159,7 @@ class PaletteAndSingleContainer extends AbstractContainer
$html = [];
$html[] = '<fieldset class="form-section' . ($isHiddenPalette ? ' hide' : '') . '">';
if (!empty($element['paletteLegend'])) {
- $html[] = '<h4 class="form-section-headline">' . htmlspecialchars($element['paletteLegend']) . '</h4>';
+ $html[] = '<h3 class="form-section-headline">' . htmlspecialchars($element['paletteLegend']) . '</h3>';
}
if (!empty($element['paletteDescription'])) {
$html[] = '<p class="form-section-description text-body-secondary">' . nl2br(htmlspecialchars($element['paletteDescription'])) . '</p>';
diff --git a/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html b/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html
index d1fbf18bbf3e..521512df56fc 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/ModuleTemplate/Tabs.html
@@ -28,6 +28,7 @@
<f:for each="{items}" as="item" iteration="iteration">
<f:if condition="{item.content}">
<div role="tabpanel" class="tab-pane{f:if(condition: '{iteration.cycle} == {defaultTabIndex}', then: ' active')}" id="{id}-{iteration.cycle}">
+ <h2 class="visually-hidden">{item.label}</h2>
<f:if condition="{item.description}">
<div class="form-section">
<p><f:format.nl2br>{item.description}</f:format.nl2br></p>
diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
index e63a80bab0ea..1beeeb704af5 100644
--- a/typo3/sysext/backend/Resources/Public/Css/backend.css
+++ b/typo3/sysext/backend/Resources/Public/Css/backend.css
@@ -3073,7 +3073,7 @@ a.dropdown-toggle{text-decoration:none}
.panel-condensed{--panel-padding:.5rem;--panel-header-padding-x:.5rem;--panel-header-padding-y:.5rem}
.panel-collapsed .panel-collapse{display:none;visibility:hidden}
.panel-tab{--panel-border-radius:0;border:1px solid #ccc;background-color:#fafafa}
-.tab-pane>.panel-tab:first-child{border-top:none}
+.tab-pane>.h2+.form-section,.tab-pane>.panel-tab:first-child,.tab-pane>h2+.form-section{border-top:none}
.panel-primary{--panel-border-color:var(--panel-primary-border-color);--panel-progress-bg:var(--panel-primary-progress-bg);--panel-heading-color:var(--panel-primary-heading-color);--panel-heading-bg:var(--panel-primary-heading-bg)}
.panel-secondary{--panel-border-color:var(--panel-secondary-border-color);--panel-progress-bg:var(--panel-secondary-progress-bg);--panel-heading-color:var(--panel-secondary-heading-color);--panel-heading-bg:var(--panel-secondary-heading-bg)}
.panel-success{--panel-border-color:var(--panel-success-border-color);--panel-progress-bg:var(--panel-success-progress-bg);--panel-heading-color:var(--panel-success-heading-color);--panel-heading-bg:var(--panel-success-heading-bg)}
@@ -4236,8 +4236,7 @@ select.icon-select option{padding-inline-start:22px}
.form-notice-capslock>img{display:block;opacity:.5}
.form-section{border:1px solid #ccc;background-color:#fafafa;padding:15px 12px 3px}
.form-section+.form-section{margin-top:-1px}
-.tab-pane>.form-section:first-child{border-top:none}
-.form-section-headline{margin-top:0;margin-bottom:10px}
+.form-section-headline{font-size:14px;margin-top:0;margin-bottom:10px}
.form-section-headline+.form-section-description{margin-top:-5px;margin-bottom:10px}
.form-wizards-wrap{width:100%;display:grid;grid-template:"top . ." "main side-move side-control" "bottom . .";grid-template-rows:auto;grid-template-columns:1fr auto auto}
.form-wizards-wrap>.form-wizards-element{grid-area:main;min-width:120px}
--
GitLab