Language Change NPM Resource Changed PR-6.0-dev Pending

User tests: Successful: Unsuccessful:

avatar bembelimen
bembelimen
14 Jan 2025

This is an idea I had, and just want to see some opinions/improvements about it.

Summary of Changes

When installing a fresh Joomla! the first thing is the language selector. But most of the time, you don't need to change the language as it's auto discovered. So this PR minimize the box and moved the selector to a dialog popup. It also fixes some autodiscoveries when e.g. only "de/fr/nl" is submitted by the browser (Firefox does this) to discover "de-DE/fr-FR/nl-NL".

Testing Instructions

  • Do a fresh installation with the code of this PR

Actual result BEFORE applying this Pull Request

Language selector on top

image

Expected result AFTER applying this Pull Request

Language selector minimized

grafik

grafik

grafik

avatar bembelimen bembelimen - open - 14 Jan 2025
avatar bembelimen bembelimen - change - 14 Jan 2025
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 14 Jan 2025
Category Installation Language & Strings JavaScript NPM Change Libraries
avatar bembelimen bembelimen - change - 14 Jan 2025
The description was changed
avatar bembelimen bembelimen - edited - 14 Jan 2025
avatar bembelimen bembelimen - change - 14 Jan 2025
Labels Added: Language Change NPM Resource Changed PR-5.3-dev
avatar bembelimen bembelimen - change - 15 Jan 2025
The description was changed
avatar bembelimen bembelimen - edited - 15 Jan 2025
avatar bembelimen bembelimen - change - 15 Jan 2025
The description was changed
avatar bembelimen bembelimen - edited - 15 Jan 2025
avatar softforge
softforge - comment - 15 Jan 2025

I like this as it's cutting down the choices needed to set up a site and anything to make the install easier for the majority is good

avatar chmst
chmst - comment - 15 Jan 2025

I like the idea.
For A11y: The link must have an underline.

avatar fgsw
fgsw - comment - 15 Jan 2025

related Issues: #44667, #24481.

avatar brianteeman
brianteeman - comment - 15 Jan 2025

It is not obvious that clicking on the current language name will let you change the language. This is an accessibility failure.

avatar chmst
chmst - comment - 15 Jan 2025

The label could be "Change the currnet language "

avatar Bodge-IT Bodge-IT - change - 11 Feb 2025
Title
[5.3] Minimize language selector in installation process
[6.0] Minimize language selector in installation process
avatar Bodge-IT Bodge-IT - edited - 11 Feb 2025
avatar softforge
softforge - comment - 12 Feb 2025

@bembelimen Gary and I would really like to see this in 6, as it makes installation a bit quicker and more intuitive.
One thought we had was to have the as a change symbol to draw the eye to this being where you can change the language.
The main issue I see is that when you are in a language you dont understand its not possible to read to switch the language so a symbol could be helpful.
Another candidate would be
@chmst makes the good point that the link should be underlined, this helps to draw the eye to functionality as well

What can we do to support you with this feature?

avatar bembelimen bembelimen - change - 13 Feb 2025
Labels Added: PR-6.0-dev
Removed: PR-5.3-dev
avatar bembelimen bembelimen - change - 13 Feb 2025
The description was changed
avatar bembelimen bembelimen - edited - 13 Feb 2025
avatar bembelimen
bembelimen - comment - 13 Feb 2025

I've improved the code & screenshots, hope this helps.

avatar softforge
softforge - comment - 13 Feb 2025

Ooh, I like that. The simple addition of an icon really helps to make the point, even if you're looking at it in a language you're not familiar with. Thanks for the work you've put into this.

avatar chmst
chmst - comment - 13 Feb 2025

Looks good but your button needs an additional Text
like
<span class="visually-hidden">Change the installation language</span>

avatar bembelimen
bembelimen - comment - 14 Feb 2025

joomla-projects/joomla-cypress#41 is needed for fixing the tests

avatar bembelimen
bembelimen - comment - 14 Feb 2025

Looks good but your button needs an additional Text
like
<span class="visually-hidden">Change the installation language</span>

Added the text, thx.

avatar QuyTon
QuyTon - comment - 17 Feb 2025
avatar Bodge-IT
Bodge-IT - comment - 19 Feb 2025

@bembelimen I know were waiting for cypress fix, is this PR ready test or anything else todo?

avatar bembelimen
bembelimen - comment - 19 Feb 2025

Ready to test

avatar bembelimen
bembelimen - comment - 19 Feb 2025

@bembelimen Close #24481?

No, although I like the idea of the issue

avatar exlemor
exlemor - comment - 22 Feb 2025

I went to test this as part of late day PBF with Olivier via screenshare and we think there are a couple of small improvements still needed:

  1. IF you FIRST click the arrows to change the language which was my and Olivier's first reaction, there is a red message that comes up under the Enter the name of your Joomla site. * which says: "Please fill in this field." which felt out of place/odd, and moreover, if you re-click on the same arrow symbol, it gives you the modal for language selection... which is inconsistent behavior... EITHER, you block access to the language choice modal until the person enters the site name (even though we don't understand why that would be) OR you give access directly to the language choice modal with having to type in site name...

  2. the placement of the minimized language selector feels odd visually as it is floating sort of left justified underneath the white shadow box of the site name/installation. It would be better inside the white box of the site name/installation... and why not before the site name?

avatar obuisard
obuisard - comment - 22 Feb 2025

I really like this improvement. My initial thought was: ok, I don't want to mess the install up, I will change the language first so I don't forget. So, I clicked on the small button for that effect and I ran into the same issue as Emmanuel.
Note that one should go in the order of the fields... but you know how unpredictable users can be...
:-)

I had an idea about the box:

  • the language button is on the right aligned for an LTR language,
  • the language button is left aligned if the language is RTL,
  • all fields/buttons are in the white box (all the same form)

image

Add a Comment

Login with GitHub to post a comment