User tests: Successful: Unsuccessful:
Replacing #31275.
Several changes in the code of mod_languages, based on the comments here: #31275 (comment)
Also changes in the CSS of the module itself and in Cassiopeia
You need a multilanguage Joomla installation. Create several language switcher modules using the different parameter combinations: with / without dropdown, with / without images... see #31275 (comment)
Install the patch and run npm ci
Sometimes missing alt description for the flags
Different select list (select list or dropdown) if flags are present or not
Shadow and arrow in the dropdown menu
Status | New | ⇒ | Pending |
Category | ⇒ | Repository NPM Change Language & Strings Modules Front End Templates (site) |
Labels |
Added:
?
NPM Resource Changed
?
?
|
Labels |
Added:
?
Removed: ? |
Labels |
Added:
?
Removed: ? |
I am missing a focus on the language buttons or links. Do you others see a focus?
Check the last commit, I have added focus to button and links (also updated the PR description)
Labels |
Added:
?
Removed: ? |
Labels |
Added:
?
Removed: ? |
Added some changes following the best practices for role=listbox
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
https://w3c.github.io/aria-practices/examples/listbox/listbox-collapsible.html
Labels |
Added:
?
Removed: ? |
Will review soon. Just a head s up that the aria-practices site is surprisingly not that good and is often heavily criticised by leading accessibility professionals.
Labels |
Added:
?
Removed: ? |
Accessibility. the list box has no label or description. The hidden paragraph above the listbox is not connected to the listbox so will not be announced as intended as a description of the list.
Ĺabel added. I'm unsure about tabindex="-1"
and aria-activedescendant="ID_REF"
on the explanation here: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
What do you think @brianteeman ?
you should not need either of those
Labels |
Added:
?
Removed: ? |
When tested with a screen reader it becomes obvious that when you are using the short name (eg EN, FR) it is not very helpful. I suggest when it is the short name being displayed there is an aria label of the long name
I am not convinced that aria-selected is the correct way to indicate the active language
Title |
|
Labels |
Added:
?
Removed: ? |
With the last commit I added aria-label
for the cases where full names are not being used. I tested all parameters combinations I could think about and also the case of a language not having an image. The test with screen reader on Chrome was ok.
Concerning aria-selected I can only point to the explanation of w3c
I will search for more information about that.
much better with the aria-label than the abbreviation
What is the purpose of
dir="<?php echo $app->getLanguage()->isRtl() ? 'rtl' : 'ltr'; ?>">
In my tests it did nothing
Labels |
Added:
?
Removed: ? |
What is the purpose of
dir="<?php echo $app->getLanguage()->isRtl() ? 'rtl' : 'ltr'; ?>">
In my tests it did nothing
I'm not sure, probably historical reasons? @infograf768 do you know, if that is still necessary?
Labels |
Added:
?
Removed: ? |
I'm not sure, probably historical reasons? @infograf768 do you know, if that is still necessary?
Will check tomorrow.
Note: we do have a specific css for rtl.
html[dir=rtl] div.mod-languages ul.lang-block li { text-align: right;}
We still do need the css.
Looks we do not need the dir anymore indeed as this PR takes off the form/select/option.
Test has to be done with Persian Content Language native name changed to فارس (Iran)
Labels |
Added:
?
Removed: ? |
Labels |
Added:
?
Removed: ? |
I have tested this item
Looks like dir was added back in last commit.
double-checked and aria-selected is wrong and it should be aria-current
selected indicates which item will be
current indicates which item is
Labels |
Added:
?
Removed: ? |
Changed to aria-current. Thank you @brianteeman for checking
I have tested this item
Labels |
Added:
?
Removed: ? |
@hans2103 @Krshivam25 can you please repeat your tests since I have added some changes? Thank you :-)
Labels |
Added:
?
Removed: ? |
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
Labels |
Added:
?
Removed: ? |
I've restored both previous test results since all commits after the tests were just code style changes.
it would be a real shame if this doesnt make it into 4.0 because of the pending language freeze.
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-07-13 10:54:43 |
Closed_By | ⇒ | wilsonge | |
Labels |
Added:
?
Removed: ? |
Thankyou!
The code looks good!
I don't like the layout of the options in the dropdown, but this is not related to this PR.
I am missing a focus on the language buttons or links. Do you others see a focus?