Commit fb9a9ea8 authored by Georg Ringer's avatar Georg Ringer Committed by Richard Haeser

[FEATURE] Add alt-text to login logo

The login logo for the default logo is set to "TYPO3 logo".
For custom logos an alt-attribute for the image tag can
be configured.

In v12 it will be required to configure the alt-text to
ensure accessibility.

Resolves: #92628
Releases: master
Change-Id: Ib35b8fbdbff08e7c9a1e778fc62d8135214d1af0
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/66222Tested-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: default avatarRichard Haeser <richard@richardhaeser.com>
Reviewed-by: Andreas Fernandez's avatarAndreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: default avatarRichard Haeser <richard@richardhaeser.com>
parent 6854af87
......@@ -399,27 +399,37 @@ class LoginController implements LoggerAwareInterface
}
// Logo
$logo = '';
$logoAlt = '';
if (!empty($extConf['loginLogo'])) {
if ($this->getUriForFileName($extConf['loginLogo']) === '') {
$this->logger->warning(
'The configured TYPO3 backend login logo "' . htmlspecialchars($extConf['loginLogo']) .
'" can\'t be resolved. Please check if the file exists and the extension is activated.'
);
} else {
$logo = $extConf['loginLogo'];
$logoAlt = trim($extConf['loginLogoAlt']);
if (empty($logoAlt)) {
trigger_error('Login logo without alt-text is not accessible and will fall back to "TYPO3 CMS logo" in v12. Configure alt-text in the backend extension.', E_USER_DEPRECATED);
}
}
$logo = $extConf['loginLogo'];
} else {
}
if (!$logo) {
// Use TYPO3 logo depending on highlight color
if (!empty($extConf['loginHighlightColor'])) {
$logo = 'EXT:backend/Resources/Public/Images/typo3_black.svg';
} else {
$logo = 'EXT:backend/Resources/Public/Images/typo3_orange.svg';
}
$logoAlt = $this->getLanguageService()->getLL('typo3.altText');
$this->pageRenderer->addCssInlineBlock('loginLogo', '
.typo3-login-logo .typo3-login-image { max-width: 150px; height:100%;}
');
}
$this->view->assignMultiple([
'logo' => $this->getUriForFileName($logo),
'logoAlt' => $logoAlt,
'images' => [
'capslock' => $this->getUriForFileName('EXT:backend/Resources/Public/Images/icon_capslock.svg'),
'typo3' => $this->getUriForFileName('EXT:backend/Resources/Public/Images/typo3_orange.svg'),
......
......@@ -26,22 +26,25 @@ Have a nice day.</source>
<source>Switch to user %s</source>
</trans-unit>
<trans-unit id="config.loginLogo" resname="config.loginLogo">
<source>Logo: If set, this logo will be used instead of the TYPO3 logo above the login credential fields (e.g. fileadmin/images/login-logo.png or EXT:my_theme/Resources/Public/Images/login-logo.png or //domain.tld/login-logo.png)</source>
<source>Logo: If set, this logo will be used instead of the TYPO3 logo above the login credential fields (e.g. fileadmin/images/login-logo.png or EXT:my_theme/Resources/Public/Images/login-logo.png or //domain.tld/login-logo.png).</source>
</trans-unit>
<trans-unit id="config.loginLogoAlt" resname="config.loginLogoAlt">
<source>Logo Alt-Text: If a custom logo is set, this text will be used as the alt attribute of the img tag.</source>
</trans-unit>
<trans-unit id="config.loginHighlightColor" resname="config.loginHighlightColor">
<source>Highlight Color: If set, this color will be used as highlight color in the login screen.</source>
</trans-unit>
<trans-unit id="config.loginBackgroundImage" resname="config.loginBackgroundImage">
<source>Background Image: If set, this image will be used as background image for the login screen (e.g. fileadmin/images/my-background.jpg or EXT:my_theme/Resources/Public/Images/my-background.jpg or //domain.tld/my-background.png)</source>
<source>Background Image: If set, this image will be used as background image for the login screen (e.g. fileadmin/images/my-background.jpg or EXT:my_theme/Resources/Public/Images/my-background.jpg or //domain.tld/my-background.png).</source>
</trans-unit>
<trans-unit id="config.loginFootnote" resname="config.loginFootnote">
<source>Footnote: If set, this text will be displayed on the login screen to provide copyright information for the background image (e.g. © 2017 by Foo Bar) or a descriptive text</source>
<source>Footnote: If set, this text will be displayed on the login screen to provide copyright information for the background image (e.g. background image © 2017 by John Doe) or a descriptive text.</source>
</trans-unit>
<trans-unit id="config.backendLogo" resname="config.backendLogo">
<source>Logo: If set, this logo will be used instead of the TYPO3 logo in the TYPO3 Backend in the left top corner (e.g. fileadmin/images/backend-logo.png or EXT:my_theme/Resources/Public/Images/backend-logo.png)</source>
<source>Logo: If set, this logo will be used instead of the TYPO3 logo in the TYPO3 backend in the left top corner (e.g. fileadmin/images/backend-logo.png or EXT:my_theme/Resources/Public/Images/backend-logo.png).</source>
</trans-unit>
<trans-unit id="config.backendFavicon" resname="config.backendFavicon">
<source>Favicon: If set, this favicon will be used instead of the TYPO3 logo (e.g. EXT:my_theme/Resources/Public/Images/favicon.ico)</source>
<source>Favicon: If set, this favicon will be used instead of the TYPO3 logo (e.g. EXT:my_theme/Resources/Public/Images/favicon.ico).</source>
</trans-unit>
<trans-unit id="foldertreeview.noFolders.title" resname="foldertreeview.noFolders.title">
<source>No folders available</source>
......
......@@ -66,6 +66,9 @@
<trans-unit id="typo3.cms" resname="typo3.cms">
<source>TYPO3 CMS</source>
</trans-unit>
<trans-unit id="typo3.altText" resname="typo3.altText">
<source>TYPO3 CMS logo</source>
</trans-unit>
<trans-unit id="version.short" resname="version.short">
<source>ver.</source>
</trans-unit>
......
......@@ -7,7 +7,7 @@
<header class="card-heading">
<h1 class="sr-only"><f:translate key="login.header" /></h1>
<div class="typo3-login-logo">
<img src="{logo}" class="typo3-login-image" alt="" />
<img src="{logo}" class="typo3-login-image" alt="{logoAlt}" />
</div>
</header>
<main class="card-body">
......
......@@ -5,6 +5,9 @@
# cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginLogo
loginLogo =
# cat=Login; type=string; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginLogoAlt
loginLogoAlt =
# cat=Login; type=color; label=LLL:EXT:backend/Resources/Private/Language/locallang.xlf:config.loginHighlightColor
loginHighlightColor =
......
.. include:: ../../Includes.txt
=================================================
Deprecation: #92628 - Login Logo without Alt-Text
=================================================
See :issue:`92628`
Description
===========
The configuration of the extension "backend" has now the possibility to
provide an alt-text for a custom login logo.
As an alt-text is needed for accessibility reasons, not setting an alt-text is
deprecated.
Impact
======
Not configuring an alt-text will trigger a PHP :php:`E_USER_DEPRECATED` error.
Affected Installations
======================
All instances that have defined a custom login logo are affected.
Migration
=========
Configure an alt-text for your custom login logo.
.. index:: Backend, NotScanned, ext:backend
.. include:: ../../Includes.txt
============================================
Feature: #92628 - Add Alt-Text To Login Logo
============================================
See :issue:`92628`
Description
===========
The configuration of the extension "backend" has now the possibility to
provide an alt-text for a custom login logo.
In the module "Admin tools > Settings" go to card "Extension Configuration"
and open the dialog. Select extension "backend" and fill out the field
"Logo Alt-Text" on the "Login" tab. You can also set :php:`$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginLogoAlt']`.
Impact
======
Setting the alt-text enhances the accessibility of the login page.
.. index:: Backend, ext:backend
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment