joomla/cms
29
0
Fork 0
mirror of https://github.com/joomla/joomla-cms.git synced 2024-06-16 09:02:52 +00:00
Code Packages Releases Activity

[4.0] [a11y] Changes in mod_languages (#33929)

Browse Source
This commit is contained in:
Viviana Menzel 2021-07-13 12:54:41 +02:00 committed by GitHub
parent 5d7c84ced0
commit c9cd684051
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 86 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
build/media_source/mod_languages/css/template.css
View File

@ -1,56 +1,49 @@
div.mod-languages ul {
margin: 0;
padding: 0;
list-style:none;
padding: 0;
margin: 0;
list-style: none;
}
div.mod-languages li {
margin-left: .3em;
margin-right: .3em;
}
div.mod-languages li:last-of-type {
margin-bottom: .6em;
margin: 0 .5rem;
}
div.mod-languages ul.lang-inline li {
display:inline-block;
}
div.mod-languages ul.lang-block li {
display: block;
}
html[dir=rtl] div.mod-languages ul.lang-block li {
text-align: right;
}
div.mod-languages img {
border: none;
display: inline-block;
}
div.mod-languages a {
text-decoration: none;
}
div.mod-languages .btn-group {
display: flex !important;
}
div.mod-languages .btn-group .btn {
flex: none;
display: inline-block;
}
div.mod-languages .dropdown-menu {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);
padding: .5rem 0;
}
div.mod-languages .dropdown-menu::after {
top: -1.4rem;
div.mod-languages ul.lang-block li {
display: block;
padding: .5rem 0;
}
html[dir=rtl] div.mod-languages .dropdown-menu::after {
left: auto;
right: .9em;
div.mod-languages ul li.lang-active {
background-color: #f0f0f0;
}
html[dir=rtl] div.mod-languages ul.lang-block li {
text-align: right;
}
div.mod-languages img {
display: inline-block;
border: none;
}
div.mod-languages a {
padding: .5rem;
text-decoration: none;
}
div.mod-languages .btn-group {
display: flex !important;
margin: 0;
}
div.mod-languages .btn-group .btn {
flex: none;
}

1
language/en-GB/mod_languages.ini
View File

@ -4,6 +4,7 @@
; Note : All ini files need to be saved as UTF-8
MOD_LANGUAGES="Language Switcher"
MOD_LANGUAGES_DESC="Select your language"
MOD_LANGUAGES_FIELD_ACTIVE_LABEL="Active Language"
MOD_LANGUAGES_FIELD_DROPDOWN_IMAGE_LABEL="Use Flags For Dropdown"
MOD_LANGUAGES_FIELD_DROPDOWN_LABEL="Use Dropdown"

94
modules/mod_languages/tmpl/default.php
View File

@ -10,71 +10,80 @@
defined('_JEXEC') or die;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseStyle('mod_languages', 'mod_languages/template.css');
?>
<div class="mod-languages">
<p class="visually-hidden" id="language_picker_des_<?php echo $module->id; ?>"><?php echo Text::_('MOD_LANGUAGES_DESC'); ?></p>
<?php if ($headerText) : ?>
<div class="mod-languages__pretext pretext"><p><?php echo $headerText; ?></p></div>
<?php endif; ?>
<?php if ($params->get('dropdown', 0) && !$params->get('dropdownimage', 1)) : ?>
<form name="lang" method="post" action="<?php echo htmlspecialchars_decode(htmlspecialchars(Uri::current(), ENT_COMPAT, 'UTF-8'), ENT_NOQUOTES); ?>">
<select class="inputbox form-select" onchange="document.location.replace(this.value);" >
<?php foreach ($list as $language) : ?>
<option dir=<?php echo $language->rtl ? '"rtl"' : '"ltr"'; ?> value="<?php echo htmlspecialchars_decode(htmlspecialchars($language->link, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>" <?php echo $language->active ? 'selected="selected"' : ''; ?>>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?></option>
<?php endforeach; ?>
</select>
</form>
<?php elseif ($params->get('dropdown', 0) && $params->get('dropdownimage', 1)) : ?>
<?php if ($params->get('dropdown', 0)) : ?>
<?php HTMLHelper::_('bootstrap.dropdown', '.dropdown-toggle'); ?>
<div class="mod-languages__select btn-group">
<?php foreach ($list as $language) : ?>
<?php if ($language->active) : ?>
<a href="#" data-bs-toggle="dropdown" class="btn dropdown-toggle">
<?php if ($language->image) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', '', null, true); ?>
<button id="language_btn_<?php echo $module->id; ?>" type="button" data-bs-toggle="dropdown" class="btn btn-secondary dropdown-toggle" aria-haspopup="listbox" aria-labelledby="language_picker_des_<?php echo $module->id; ?> language_btn_<?php echo $module->id; ?>" aria-expanded="false">
<?php if ($params->get('dropdownimage', 1) && ($language->image)) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', $params->get('full_name') ? '' : $language->title_native, null, true); ?>
<?php endif; ?>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
</a>
</button>
<?php endif; ?>
<?php endforeach; ?>
<ul class="lang-block dropdown-menu" dir="<?php echo $app->getLanguage()->isRtl() ? 'rtl' : 'ltr'; ?>">
<ul role="listbox" aria-labelledby="language_picker_des" class="lang-block dropdown-menu">
<?php foreach ($list as $language) : ?>
<?php
$lbl = '';
if ($params->get('full_name') === 0)
{
$lbl = 'aria-label="' . $language->title_native . '"';
}
?>
<?php if (!$language->active) : ?>
<li>
<a href="<?php echo htmlspecialchars_decode(htmlspecialchars($language->link, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<?php if ($language->image) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', '', null, true); ?>
<?php endif; ?>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
</a>
<a role="option" <?php echo $lbl; ?> href="<?php echo htmlspecialchars_decode(htmlspecialchars($language->link, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<?php if ($params->get('dropdownimage', 1) && ($language->image)) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', $params->get('full_name') ? '' : $language->title_native, null, true); ?>
<?php endif; ?>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
</a>
</li>
<?php elseif ($params->get('show_active', 1)) : ?>
<?php $base = Uri::getInstance(); ?>
<?php $base = Uri::getInstance(); ?>
<li class="lang-active">
<a href="<?php echo htmlspecialchars_decode(htmlspecialchars($base, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<?php if ($language->image) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', '', null, true); ?>
<?php endif; ?>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
</a>
<a aria-current="true" role="option" <?php echo $lbl; ?> href="<?php echo htmlspecialchars_decode(htmlspecialchars($base, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<?php if ($params->get('dropdownimage', 1) && ($language->image)) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', $params->get('full_name') ? '' : $language->title_native, null, true); ?>
<?php endif; ?>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
</div>
<?php else : ?>
<ul class="mod-languages__list <?php echo $params->get('inline', 1) ? 'lang-inline' : 'lang-block'; ?>" dir="<?php echo $app->getLanguage()->isRtl() ? 'rtl' : 'ltr'; ?>">
<ul role="listbox" aria-labelledby="language_picker_des" class="mod-languages__list <?php echo $params->get('inline', 1) ? 'lang-inline' : 'lang-block'; ?>">
<?php foreach ($list as $language) : ?>
<?php
$lbl = '';
if ((($params->get('full_name') === 0) && ($params->get('image') === 0)) || (!$language->image))
{
$lbl = 'aria-label="' . $language->title_native . '"';
}
?>
<?php if (!$language->active) : ?>
<li>
<a href="<?php echo htmlspecialchars_decode(htmlspecialchars($language->link, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<a role="option" <?php echo $lbl; ?> href="<?php echo htmlspecialchars_decode(htmlspecialchars($language->link, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<?php if ($params->get('image', 1)) : ?>
<?php if ($language->image) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', $language->title_native, array('title' => $language->title_native), true); ?>
@ -89,18 +98,17 @@ $wa->registerAndUseStyle('mod_languages', 'mod_languages/template.css');
<?php elseif ($params->get('show_active', 1)) : ?>
<?php $base = Uri::getInstance(); ?>
<li class="lang-active">
<a href="<?php echo htmlspecialchars_decode(htmlspecialchars($base, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<?php if ($params->get('image', 1)) : ?>
<?php if ($language->image) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', $language->title_native, array('title' => $language->title_native), true); ?>
<?php else : ?>
<span class="badge bg-secondary"><?php echo strtoupper($language->sef); ?></span>
<?php endif; ?>
<?php else : ?>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
<?php endif; ?>
</a>
<a aria-current="true" role="option" <?php echo $lbl; ?> href="<?php echo htmlspecialchars_decode(htmlspecialchars($base, ENT_QUOTES, 'UTF-8'), ENT_NOQUOTES); ?>">
<?php if ($params->get('image', 1)) : ?>
<?php if ($language->image) : ?>
<?php echo HTMLHelper::_('image', 'mod_languages/' . $language->image . '.gif', $language->title_native, array('title' => $language->title_native), true); ?>
<?php else : ?>
<span class="badge bg-secondary" title="<?php echo $language->title_native; ?>"><?php echo strtoupper($language->sef); ?></span>
<?php endif; ?>
<?php else : ?>
<?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef); ?>
<?php endif; ?>
</a>
</li>
<?php endif; ?>
<?php endforeach; ?>

4
templates/cassiopeia/scss/blocks/_global.scss
View File

@ -240,10 +240,6 @@ figcaption {
flex-direction: column;
}
.mod-languages__select {
background-color: $white;
}
// meter element
meter {
width: 100%;

13
templates/cassiopeia/scss/vendor/bootstrap/_dropdown.scss vendored
View File

@ -5,19 +5,6 @@
margin-top: .5rem;
background-color: $white;
border-color: $cassiopeia-border-color;
&::after {
position: absolute;
top: -1.5rem;
left: .9rem;
font-family: "Font Awesome 5 Free";
font-size: 1.6rem;
font-weight: 900;
color: $white;
text-shadow: 0 -1px 0 hsla(0, 0%, 0%, .2);
content: "\f0d8";
}
}
.dropdown-item {