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

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

related Issues: #44667, #24481.

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

The label could be "Change the currnet language "

@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?

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

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.

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

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

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

Added the text, thx.

@bembelimen Close #24481?

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

Ready to test

@bembelimen Close #24481?

No, although I like the idea of the issue

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?

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)

Hi @laoneo , can you do your magic, please, so we can progress with this pr. I understand it needs something done with the testing scripts

There is not much I can do here. The pr in the testing repo needs to be made bc first and then we can release a new version.

@softforge if #45207 gets merged and then brought up here, this one should run through.

@softforge if #45207 gets merged and then brought up here, this one should run through.

Hi @laoneo,

Now that #45207 is merged, what needs to be done so that this one is testable / can be turned to RTC (once we have the 2 tests of course)?

@softforge if #45207 gets merged and then brought up here, this one should run through.

Hi @laoneo,

Now that #45207 is merged, what needs to be done so that this one is testable / can be turned to RTC (once we have the 2 tests of course)?

The change from PR #45207 has already been merged up into 5.4-dev and will be in the next upmerge from there into 6.0-dev, very likely on Wednesday. After that it needs to update this PR to the base branch (6.0-dev), then PR #45207 has gone through.

@softforge if #45207 gets merged and then brought up here, this one should run through.

Hi @laoneo,
Now that #45207 is merged, what needs to be done so that this one is testable / can be turned to RTC (once we have the 2 tests of course)?

The change from PR #45207 has already been merged up into 5.4-dev and will be in the next upmerge from there into 6.0-dev, very likely on Wednesday. After that it needs to update this PR to the base branch (6.0-dev), then PR #45207 has gone through.

Thank you for the explanation. :)

@exlemor Human tests should already be possible. The thing with PR #45207 is only needed for the automated system tests currently failing in Drone.

I have tested this item ✅ successfully on 232a927

@bembelimen while testing this PR, I came across this - the above implementation makes for a weird layout ( oddly left justified ) depending on the length of the language being chosen, why not, apply and update:

#languageForm {
max-width: 640px;
margin: auto;
display: inline-block;
}

and

.j-container {
width: 100%;
max-width: 40rem;
margin: 1rem auto;
text-align: center;
}

which would center the:

🌐 Current language: Polish (PL) | Polski (PL) 🔁

below the <div id="container-installation"...

No matter whether the language is short or long, it is always centered below the container-installation?

also by switching to a dialog popup, most browsers will read and provide accessible support but shouldn't we have or for maximum compatibility to ensure they are announced by assistive technologies? as well as:

<dialog open role="dialog" aria-labelledby="dialog-title">
  <h3 id="dialog-title">Select Installation Language</h3> 
 ...
 </dialog>
  

to give the dialog an accessible name?

the above implementation makes for a weird layout

Can you post a screenshot as I dont see any problem. Perhaps you didnt notice that there was an scss change in this PR

also by switching to a dialog popup, most browsers will read and provide accessible support but shouldn't we have or for maximum compatibility to ensure they are announced by assistive technologies? as well as:

You dont need to add role=dialog as that is implicit
You absolutely do need to give the dialog a title as you describe

This button is not as accessible as it could be. Only blind users are informed what the button does before selecting it. It is not obvious to me that the icon will do what it does

the above implementation makes for a weird layout

Can you post a screenshot as I dont see any problem. Perhaps you didnt notice that there was an scss change in this PR

Hi @brianteeman, I will try to post screenshots later but what I mean by weird layout (and I tested the latest Download build so I assume it had the changes of scss etc...) is that the 🌐 Current language: Polish (PL) | Polski (PL) 🔁 line floats below the Setup Site Name window and depending on length of language being mostly left justified looks inconsistent from language to language vs being center justified like I proposed, it looks more consistent...

Thanks for the specificity on role=dialog, I read that on some older browsers adding that was helpful, but you know better.

I will not change the CSS, I'm ok how it is. Will check the a11y, though

@exlemor did you mean this should not be left aligned

If so then apart from some RTL alignment issues which are unrelated to this PR I am fine with it as well

Thank you @bembelimen and all the testers for making this improvement possible

This should NOT have been merged!!!

Please revert it now so that @bembelimen has the opportunity to fix the accessibility issues

Less haste = more speed

"If so, then apart from some RTL alignment issues, which are unrelated to this PR, I am fine with it as well"

There was no haste, we started at 7am this morning with the upmerge, going through PRs and testing.

I spoke to Benjamin yesterday and have had multiple meetings about improvements, which Benjamin has kindly addressed.
We had to arrange test changes with Allon and several chats with testers, so haste is not something we can be accused of.

Even though it had already been tested, Gary and I also independently tested it this morning and read all the comments, including yours, saying it was fine.

If there are improvements you, Benjamin, or anyone else would like to make,, then we would welcome a PR.

This button is not as accessible as it could be. Only blind users are informed what the button does before selecting it. It is not obvious to me that the icon will do what it does

I will not change the CSS, I'm ok how it is. Will check the a11y, though

lesson learned - I wont waste time on joomla 6 tests if they are ignored.

I will not change the CSS, I'm ok how it is. Will check the a11y, though

Hi @bembelimen, what was the result of your findings? because I had cross-referenced multiple sources before posting about the need from an accessibility standpoint to give the dialog needing a title? (and the less important role=dialog)

@bembelimen has the opportunity to fix the accessibility issues

I hadn't the time after my comment to check and update the PR yet, but as this is merged now will make a new PR over the weekend.

@bembelimen has the opportunity to fix the accessibility issues

I hadn't the time after my comment to check and update the PR yet, but as this is merged now will make a new PR over the weekend.

Thank you, we appreciate your time and commitment, and look forward to seeing the improvements to an already good feature, and to all who made suggestions and tested, as that also helps make this feature better.