Skip to content

[4.0] Atum logo and login image alt [a11y] #31349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chmst merged 1 commit into from
Nov 10, 2020
Merged

[4.0] Atum logo and login image alt [a11y] #31349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions administrator/language/en-GB/tpl_atum.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
; Note : All ini files need to be saved as UTF-8

ATUM="Atum Administrator template"
TPL_ATUM_ALTTEXT_LOGIN_LOGO_LABEL="Alt Text Login Logo"
TPL_ATUM_ALTTEXT_SITE_LOGO_LABEL="Alt Text Brand Large"
TPL_ATUM_ALTTEXT_SMALL_LOGO_LABEL="Alt Text Brand Small"
TPL_ATUM_BACK_TO_CONTROL_PANEL="Back to Dashboard"
TPL_ATUM_BACKEND_LOGIN="Joomla Administrator Login"
TPL_ATUM_COLORS_HUE="Choose your hue value for the dark template colour"
Expand All @@ -20,10 +17,14 @@ TPL_ATUM_COLORS_SETTINGS_MONOCHROME_LABEL="Set Colour to Monochrome"
TPL_ATUM_COLORS_SETTINGS_SPECIAL_COLOR_LABEL="Special Colour"
TPL_ATUM_COLORS_SETTINGS_TEXT_DARK_LABEL="Dark Text"
TPL_ATUM_COLORS_SETTINGS_TEXT_LIGHT_LABEL="Light Text"
TPL_ATUM_IMAGE_LABEL="Image"
TPL_ATUM_IMAGE_SETTINGS_LABEL="Image Settings"
TPL_ATUM_LOGIN_LOGO_LABEL="Login Logo"
TPL_ATUM_LOGIN_SIDEBAR_VIEW_WEBSITE="view website"
TPL_ATUM_LOGIN_SITE_TITLE="%s - Administrator Login"
TPL_ATUM_LOGO_ALT_EMPTY_DESC="Decorative Image - no description required"
TPL_ATUM_LOGO_ALT_EMPTY_LABEL="No Description"
TPL_ATUM_LOGO_ALT_LABEL="Image Description (Alt Text)"
TPL_ATUM_MORE_ELEMENTS="More Elements"
TPL_ATUM_SITE_LOGO_LABEL="Brand Large"
TPL_ATUM_SITE_LOGO_SMALL_LABEL="Brand Small"
Expand Down
15 changes: 8 additions & 7 deletions administrator/templates/atum/error_full.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,16 @@
$logoBrandLarge = $this->params->get('logoBrandLarge')
? Uri::root() . htmlspecialchars($this->params->get('logoBrandLarge'), ENT_QUOTES)
: $this->baseurl . '/templates/' . $this->template . '/images/logos/brand-large.svg';
$loginLogo = $this->params->get('loginLogo')
? Uri::root() . $this->params->get('loginLogo')
: $this->baseurl . '/templates/' . $this->template . '/images/logos/login.svg';
$logoBrandSmall = $this->params->get('logoBrandSmall')
? Uri::root() . htmlspecialchars($this->params->get('logoBrandSmall'), ENT_QUOTES)
: $this->baseurl . '/templates/' . $this->template . '/images/logos/brand-small.svg';

$logoBrandLargeAlt = htmlspecialchars($this->params->get('logoBrandLargeAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandSmallAlt = htmlspecialchars($this->params->get('logoBrandSmallAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandLargeAlt = empty($this->params->get('logoBrandLargeAlt')) && empty($this->params->get('emptyLogoBrandLargeAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandLargeAlt'), ENT_COMPAT, 'UTF-8') . '"';
$logoBrandSmallAlt = empty($this->params->get('logoBrandSmallAlt')) && empty($this->params->get('emptyLogoBrandSmallAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandSmallAlt'), ENT_COMPAT, 'UTF-8') . '"';

// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
Expand Down Expand Up @@ -93,8 +94,8 @@
<div class="d-flex align-items-center">
<a class="logo" href="<?php echo Route::_('index.php'); ?>"
aria-label="<?php echo Text::_('TPL_ATUM_BACK_TO_CONTROL_PANEL'); ?>">
<img src="<?php echo $logoBrandLarge; ?>" alt="<?php echo $logoBrandLargeAlt; ?>">
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" alt="<?php echo $logoBrandSmallAlt; ?>">
<img src="<?php echo $logoBrandLarge; ?>" <?php echo $logoBrandLargeAlt; ?>>
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" <?php echo $logoBrandSmallAlt; ?>>
</a>
</div>
<jdoc:include type="modules" name="title" />
Expand Down
18 changes: 12 additions & 6 deletions administrator/templates/atum/error_login.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,15 @@
? Uri::root() . htmlspecialchars($this->params->get('logoBrandSmall'), ENT_QUOTES)
: $this->baseurl . '/templates/' . $this->template . '/images/logos/brand-small.svg';

$logoBrandLargeAlt = htmlspecialchars($this->params->get('logoBrandLargeAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandSmallAlt = htmlspecialchars($this->params->get('logoBrandSmallAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandLargeAlt = empty($this->params->get('logoBrandLargeAlt')) && empty($this->params->get('emptyLogoBrandLargeAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandLargeAlt'), ENT_COMPAT, 'UTF-8') . '"';
$logoBrandSmallAlt = empty($this->params->get('logoBrandSmallAlt')) && empty($this->params->get('emptyLogoBrandSmallAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandSmallAlt'), ENT_COMPAT, 'UTF-8') . '"';
$loginLogoAlt = empty($this->params->get('loginLogoAlt')) && empty($this->params->get('emptyLoginLogoAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('loginLogoAlt'), ENT_COMPAT, 'UTF-8') . '"';

// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
Expand Down Expand Up @@ -87,10 +94,9 @@
<div class="d-flex">
<div class="header-title d-flex mr-auto">
<div class="d-flex align-items-center">
<?php // No home link in edit mode (so users can not jump out) and control panel (for a11y reasons) ?>
<div class="logo">
<img src="<?php echo $logoBrandLarge; ?>" alt="<?php echo $logoBrandLargeAlt; ?>">
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" alt="<?php echo $logoBrandSmallAlt; ?>">
<img src="<?php echo $logoBrandLarge; ?>" <?php echo $logoBrandLargeAlt; ?>>
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" <?php echo $logoBrandSmallAlt; ?>>
</div>
</div>
<jdoc:include type="modules" name="title"/>
Expand Down Expand Up @@ -121,7 +127,7 @@
<div id="element-box" class="card">
<div class="card-body">
<div class="main-brand d-flex align-items-center justify-content-center">
<img src="<?php echo $loginLogo; ?>" alt="">
<img src="<?php echo $loginLogo; ?>" <?php echo $loginLogoAlt; ?>>
</div>
<h1><?php echo Text::_('JERROR_AN_ERROR_HAS_OCCURRED'); ?></h1>
<jdoc:include type="message" />
Expand Down
17 changes: 11 additions & 6 deletions administrator/templates/atum/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,13 @@
? Uri::root() . htmlspecialchars($this->params->get('logoBrandSmall'), ENT_QUOTES)
: $this->baseurl . '/templates/' . $this->template . '/images/logos/brand-small.svg';

$logoBrandLargeAlt = htmlspecialchars($this->params->get('logoBrandLargeAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandSmallAlt = htmlspecialchars($this->params->get('logoBrandSmallAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandLargeAlt = empty($this->params->get('logoBrandLargeAlt')) && empty($this->params->get('emptyLogoBrandLargeAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandLargeAlt'), ENT_COMPAT, 'UTF-8') . '"';
$logoBrandSmallAlt = empty($this->params->get('logoBrandSmallAlt')) && empty($this->params->get('emptyLogoBrandSmallAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandSmallAlt'), ENT_COMPAT, 'UTF-8') . '"';


// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
Expand Down Expand Up @@ -93,14 +98,14 @@
<?php // No home link in edit mode (so users can not jump out) and control panel (for a11y reasons) ?>
<?php if ($hiddenMenu || $cpanel) : ?>
<div class="logo">
<img src="<?php echo $logoBrandLarge; ?>" alt="<?php echo $logoBrandLargeAlt; ?>">
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" alt="<?php echo $logoBrandSmallAlt; ?>">
<img src="<?php echo $logoBrandLarge; ?>" <?php echo $logoBrandLargeAlt; ?>>
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" <?php echo $logoBrandSmallAlt; ?>>
</div>
<?php else : ?>
<a class="logo" href="<?php echo Route::_('index.php'); ?>"
aria-label="<?php echo Text::_('TPL_ATUM_BACK_TO_CONTROL_PANEL'); ?>">
<img src="<?php echo $logoBrandLarge; ?>" alt="<?php echo $logoBrandLargeAlt; ?>">
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" alt="<?php echo $logoBrandSmallAlt; ?>">
<img src="<?php echo $logoBrandLarge; ?>" <?php echo $logoBrandLargeAlt; ?>>
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" <?php echo $logoBrandSmallAlt; ?>>
</a>
<?php endif; ?>
</div>
Expand Down
19 changes: 12 additions & 7 deletions administrator/templates/atum/login.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,15 @@
? Uri::root() . htmlspecialchars($this->params->get('logoBrandSmall'), ENT_QUOTES)
: $this->baseurl . '/templates/' . $this->template . '/images/logos/brand-small.svg';

$logoBrandLargeAlt = htmlspecialchars($this->params->get('logoBrandLargeAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandSmallAlt = htmlspecialchars($this->params->get('logoBrandSmallAlt', ''), ENT_COMPAT, 'UTF-8');
$logoBrandLargeAlt = empty($this->params->get('logoBrandLargeAlt')) && empty($this->params->get('emptyLogoBrandLargeAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandLargeAlt'), ENT_COMPAT, 'UTF-8') . '"';
$logoBrandSmallAlt = empty($this->params->get('logoBrandSmallAlt')) && empty($this->params->get('emptyLogoBrandSmallAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('logoBrandSmallAlt'), ENT_COMPAT, 'UTF-8') . '"';
$loginLogoAlt = empty($this->params->get('loginLogoAlt')) && empty($this->params->get('emptyLoginLogoAlt'))
? ''
: 'alt="' . htmlspecialchars($this->params->get('loginLogoAlt'), ENT_COMPAT, 'UTF-8') . '"';

// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
Expand Down Expand Up @@ -87,10 +94,9 @@
<div class="d-flex">
<div class="header-title d-flex">
<div class="d-flex align-items-center">
<?php // No home link in edit mode (so users can not jump out) and control panel (for a11y reasons) ?>
<div class="logo">
<img src="<?php echo $logoBrandLarge; ?>" alt="<?php echo $logoBrandLargeAlt; ?>">
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" alt="<?php echo $logoBrandSmallAlt; ?>">
<img src="<?php echo $logoBrandLarge; ?>" <?php echo $logoBrandLargeAlt; ?>>
<img class="logo-collapsed" src="<?php echo $logoBrandSmall; ?>" <?php echo $logoBrandSmallAlt; ?>>
</div>
</div>
<jdoc:include type="modules" name="title" />
Expand All @@ -111,8 +117,7 @@
<main class="d-flex justify-content-center align-items-center h-100">
<div class="login">
<div class="main-brand logo text-center">
<img src="<?php echo $loginLogo; ?>"
alt="<?php echo htmlspecialchars($this->params->get('altLoginLogo', ''), ENT_COMPAT, 'UTF-8'); ?>">
<img src="<?php echo $loginLogo; ?>" <?php echo $loginLogoAlt; ?>>
</div>
<jdoc:include type="component" />
</div>
Expand Down
84 changes: 54 additions & 30 deletions administrator/templates/atum/templateDetails.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,36 +117,60 @@
</fieldset>

<fieldset name="images" label="TPL_ATUM_IMAGE_SETTINGS_LABEL">
<field
name="loginLogo"
type="media"
label="TPL_ATUM_LOGIN_LOGO_LABEL"
/>
<field
name="altLoginLogo"
type="text"
label="TPL_ATUM_ALTTEXT_LOGIN_LOGO_LABEL"
/>
<field
name="logoBrandLarge"
type="media"
label="TPL_ATUM_SITE_LOGO_LABEL"
/>
<field
name="logoBrandLargeAlt"
type="text"
label="TPL_ATUM_ALTTEXT_SITE_LOGO_LABEL"
/>
<field
name="logoBrandSmall"
type="media"
label="TPL_ATUM_SITE_LOGO_SMALL_LABEL"
/>
<field
name="logoBrandSmallAlt"
type="text"
label="TPL_ATUM_ALTTEXT_SMALL_LOGO_LABEL"
/>
<fieldset name="loginLogo" label="TPL_ATUM_LOGIN_LOGO_LABEL">
<field
name="loginLogo"
type="media"
label="TPL_ATUM_IMAGE_LABEL"
/>
<field
name="loginLogoAlt"
type="text"
label="TPL_ATUM_LOGO_ALT_LABEL"
/>
<field
name="emptyLoginLogoAlt"
type="checkbox"
label="TPL_ATUM_LOGO_ALT_EMPTY_LABEL"
description="TPL_ATUM_LOGO_ALT_EMPTY_DESC"
/>
</fieldset>
<fieldset name="logoBrandLarge" label="TPL_ATUM_SITE_LOGO_LABEL">
<field
name="logoBrandLarge"
type="media"
label="TPL_ATUM_IMAGE_LABEL"
/>
<field
name="logoBrandLargeAlt"
type="text"
label="TPL_ATUM_LOGO_ALT_LABEL"
/>
<field
name="emptyLogoBrandLargeAlt"
type="checkbox"
label="TPL_ATUM_LOGO_ALT_EMPTY_LABEL"
description="TPL_ATUM_LOGO_ALT_EMPTY_DESC"
/>
</fieldset>
<fieldset name="logoBrandSmall" label="TPL_ATUM_SITE_LOGO_SMALL_LABEL">
<field
name="logoBrandSmall"
type="media"
label="TPL_ATUM_IMAGE_LABEL"
/>
<field
name="logoBrandSmallAlt"
type="text"
label="TPL_ATUM_LOGO_ALT_LABEL"
/>
<field
name="emptyLogoBrandSmallAlt"
type="checkbox"
label="TPL_ATUM_LOGO_ALT_EMPTY_LABEL"
description="TPL_ATUM_LOGO_ALT_EMPTY_DESC"
/>
</fieldset>
</fieldset>
</fields>
</config>
Expand Down