Feature Language Change a11y NPM Resource Changed PBF Maintainers Checked PR-5.0-dev Pending

User tests: Successful: Unsuccessful:

avatar Hackwar
Hackwar
1 Jun 2020

Summary of Changes

The current installation is rather opaque when it comes to doing the actual setup on the server. There is no real progress indicator and it also isn't clear what Joomla is doing during installation. I assume that is also the reason why some autoinstallers just fill out the configuration.php and execute our SQL scripts, which simply isn't enough to properly install Joomla.
This PR introduces an additional step in the GUI, replacing the joomla-core-loader element and instead it displays a progress bar and the different tasks the installer has so far executed.

Testing Instructions

Simply apply the PR and execute the installation. See that when you click on the "Install Joomla" button, you get a new screen with progress bar and a list of steps Joomla is doing.

Documentation Changes Required

None.

avatar Hackwar Hackwar - open - 1 Jun 2020
avatar Hackwar Hackwar - change - 1 Jun 2020
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 1 Jun 2020
Category Installation Language & Strings JavaScript
avatar Hackwar Hackwar - change - 20 Oct 2020
Labels Added: Conflicting Files ? ?
avatar Hackwar Hackwar - change - 20 Oct 2020
Labels Removed: Conflicting Files
avatar Hackwar
Hackwar - comment - 5 Jan 2021

So this code isn't perfect, but I can't get anyone to look at it and improve it and I wouldn't know how to make it better either. At the same time, I think this is a necessary feature and needs to be added to 4.0, which is why I'm marking this as ready for review now. I'd rather merge this imperfect code, than to have the mess we have so far.

avatar brianteeman
brianteeman - comment - 5 Jan 2021

How can we test it. As far as I can recall no one was previously able to setup an environment where the ftp install would be triggered. Did you find a way?

sorry wrong issue

avatar Hackwar
Hackwar - comment - 5 Jan 2021

@brianteeman ?
I would appreciate your comment on this issue as well. ?

avatar brianteeman
brianteeman - comment - 5 Jan 2021

@Hackwar I am looking

avatar brianteeman
brianteeman - comment - 5 Jan 2021

it works, its an improvement, it is fugly which for a first impression of joomla is not good.

The main problems are that it is completely inaccessible (suggestions coming) and that the popup closes before I have the time to read it.

avatar brianteeman
brianteeman - comment - 5 Jan 2021

Can you not use the joomla-alert in the same way that you did in the sample data installer? That immediately solves a lot of issues.

avatar brianteeman
brianteeman - comment - 5 Jan 2021

Not going to comment further for now as those comments would be made irrelevant if you use joomla-alert

avatar Hackwar
Hackwar - comment - 5 Jan 2021

it works, its an improvement, it is fugly which for a first impression of joomla is not good.

I'm open for improvements. I've been asking around a bit in the last months and people frankly have let me down. I'm not exactly creative enough to make it look nicer. For example the progress icon in front of the lists are hidden by setting them to white. I know that is a really ugly way, but I'm a backend dev mainly...

The main problems are that it is completely inaccessible (suggestions coming) and that the popup closes before I have the time to read it.

The popup is not really meant for people like you with a quick database/server, but for those with slow systems to give them an indication of progress. I had a misconfiguration on my system some time ago and that resulted in the database population step taking several minutes. A time in which you have no idea what is happening, where it is failing, etc.

Can you not use the joomla-alert in the same way that you did in the sample data installer? That immediately solves a lot of issues.

I think that would not be the best approach. First of all, the content has to show up above that spinner/loader/whatever thing and thus I would expect a modal. We also need a way to block the interaction with the previous form, so the overlay of the spinner and modal are good. At the same time I don't want the steps to show up one after the other, but to have them visible all at the same time, so that you can see how much still has to happen...

avatar brianteeman
brianteeman - comment - 5 Jan 2021

joomla -alert is the way to go - it solves your real problems

avatar Hackwar
Hackwar - comment - 7 Jan 2021

I've checked joomla-alert and it definitely is not the way to go. It is the wrong UI element for this task. However I've looked over my implementation and improved it a bit and hopefully this https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions is correct and thus this should now be more accessible.

This does contain one issue and that is it is only looking for mysql custom SQL files and not postgres. Do we want to catch that case as well or do we put the burden for that on the one adding one of those custom SQL files?

avatar brianteeman
brianteeman - comment - 7 Jan 2021

On my phone so can't check right now but the aria live element must be in the page before the message is created. Usually you would achieve that in the html not the js. See https://bitsofco.de/using-aria-live/

avatar brianteeman
brianteeman - comment - 7 Jan 2021

Confirmed my suspicion from last night.

avatar Hackwar
Hackwar - comment - 7 Jan 2021

Changed.

avatar Hackwar
Hackwar - comment - 7 Jan 2021

Would you sign off on this this way? Then we could move forward with this whole thing.

avatar brianteeman
brianteeman - comment - 7 Jan 2021

its an improvement. not perfect but can be improved in another pr.
not for me to approve anything

avatar Hackwar
Hackwar - comment - 7 Jan 2021

The main question was, if you would sign off on the accessible part of this PR. Thanks for your support.

avatar HLeithner
HLeithner - comment - 7 Jan 2021

Hi,

nice progressbar, sorry for no feedback didn't see the pr in june

Found a small problem in case of an error

error.mp4

and could you fix the cs errors please

The check marks may could have a lighter green but I don't know if this is our default green.

avatar brianteeman
brianteeman - comment - 7 Jan 2021

The main question was, if you would sign off on the accessible part of this PR. Thanks for your support.

Still not for me to do that. That would be the role of the accessibility team

avatar Hackwar
Hackwar - comment - 7 Jan 2021

CS errors are not from this PR, but currently part of the 4.0-dev branch. Fix is here #31879

The check mark is the default color that we use.

I'll fix the error handling.

avatar Hackwar
Hackwar - comment - 7 Jan 2021

All changes incorporated. Please test and lets see if we can merge this quickly.

avatar brianteeman
brianteeman - comment - 7 Jan 2021

I still don't understand why this is a modal

avatar Hackwar
Hackwar - comment - 7 Jan 2021

Then tell me how else you would display this information. With all steps-to-be-processed visible from the start, returnable to the previous screen, updating the existing data, etc.

avatar Hackwar Hackwar - change - 26 Jan 2021
Title
[4.0] Adding modal with progress to installation
[4.1] Adding modal with progress to installation
avatar Hackwar Hackwar - edited - 26 Jan 2021
avatar joomla-cms-bot joomla-cms-bot - change - 26 Jan 2021
Category Installation Language & Strings JavaScript Administration SQL com_admin Postgresql com_config com_finder com_menus com_messages Language & Strings JavaScript Repository NPM Change Front End com_users Installation
avatar bembelimen
bembelimen - comment - 20 Jan 2022

I think this feature would be a nice addition, but I have to agree, it shouldn't be a modal.

I think this should me incooperated into a bigger improvement project for the installer (there are many flaws which should be fixed) and at the end a solution could be, that we hide (not just gray out via overlay) the installation form and show only the installation progress (+ valid return when failed, not just the whole form).

To not forget about this idea, I set it to draft.

avatar HLeithner
HLeithner - comment - 27 Jun 2022

This pull request has automatically rebased to 4.2-dev.

avatar Hackwar Hackwar - change - 6 Jul 2022
Title
[4.1] Adding modal with progress to installation
[4.2] Adding modal with progress to installation
avatar Hackwar Hackwar - edited - 6 Jul 2022
avatar joomla-cms-bot joomla-cms-bot - change - 6 Jul 2022
Category Installation Language & Strings JavaScript Administration SQL com_admin Postgresql com_config com_finder com_menus com_messages Repository NPM Change Front End com_users Installation Language & Strings JavaScript
avatar Hackwar Hackwar - change - 30 Aug 2022
Labels Added: Language Change ?
Removed: ? ?
avatar Hackwar Hackwar - change - 30 Aug 2022
Title
[4.2] Adding modal with progress to installation
[4.3] Adding modal with progress to installation
avatar Hackwar Hackwar - edited - 30 Aug 2022
avatar joomla-cms-bot joomla-cms-bot - change - 30 Aug 2022
Category Installation Language & Strings JavaScript Unit Tests Repository Administration com_associations com_banners com_categories com_config com_contact com_content com_contenthistory com_fields com_finder com_installer com_joomlaupdate com_languages com_menus
avatar joomla-cms-bot joomla-cms-bot - change - 30 Aug 2022
Category Unit Tests Repository Administration com_associations com_banners com_categories com_config com_contact com_content com_contenthistory com_fields com_finder com_installer com_joomlaupdate com_languages com_menus Installation Language & Strings JavaScript
avatar Hackwar Hackwar - change - 30 Aug 2022
Labels Added: PR-4.3-dev
avatar HLeithner
HLeithner - comment - 30 Aug 2022

image

Can we maybe get some space between the progressbar and the checkbox list?
Rest looks great.

avatar Hackwar
Hackwar - comment - 30 Aug 2022

image

Can we maybe get some space between the progressbar and the checkbox list? Rest looks great.

Done.

avatar brianteeman
brianteeman - comment - 30 Aug 2022

Does it really still need the joomla spinner at the end?

avatar Hackwar Hackwar - change - 30 Aug 2022
The description was changed
avatar Hackwar Hackwar - edited - 30 Aug 2022
avatar brianteeman
brianteeman - comment - 30 Aug 2022

This completely fails accessibility. Nothing is announced at all. There is just complete silence and a user would not know that anything is happening

avatar Hackwar
Hackwar - comment - 30 Aug 2022

Does it really still need the joomla spinner at the end?

I don't need it. However I would leave the review of stuff like this to someone else.

avatar Hackwar
Hackwar - comment - 30 Aug 2022

This completely fails accessibility. Nothing is announced at all. There is just complete silence and a user would not know that anything is happening

Unfortunately I don't know enough about accessibility to get this right. I would need your help and the help from @chmst and @drmenzelit. I'm open for what needs to be done to get this right.

avatar Hackwar
Hackwar - comment - 30 Aug 2022

I refactored the whole PR to not use a modal, but to show an additional step in the normal installation process. Please review this PR again, so that we hopefully can add this to Joomla 4.3.

avatar Hackwar Hackwar - change - 30 Aug 2022
Title
[4.3] Adding modal with progress to installation
[4.3] Adding display of progress to installation
avatar Hackwar Hackwar - edited - 30 Aug 2022
avatar brianteeman
brianteeman - comment - 30 Aug 2022
avatar brianteeman
brianteeman - comment - 11 Sep 2022

needs to be checked by the JAT @chmst

avatar drmenzelit
drmenzelit - comment - 11 Sep 2022

needs to be checked by the JAT @chmst

we are on it

avatar chmst
chmst - comment - 11 Sep 2022

We made a few tests and the result is:

The progress bar is a nice enhancement and is accessible as all the update - progress bars in com_installer.
The indication of percentage seems to be not correct, maybe due to rounding errors. Steps could be a better solution.

The display of steps as text however is not accessible, neither for sighted nor for blind users and should be hidden.
Joomla provides a very fast installation and no reader can read all the information in a few seconds.

On the other hand, it is useful to see where the process stopped, if there is an issue.
Maybe the texts can be hidden and only if there is no progress for 10or 20 seconds, the texts of performed steps are made visilbe.

avatar brianteeman
brianteeman - comment - 11 Sep 2022

The display of steps as text however is not accessible, neither for sighted nor for blind users and should be hidden.
Joomla provides a very fast installation and no reader can read all the information in a few seconds.

If you do that then currently there is no way to know that anything is happeninbg

Joomla provides a very fast installation and no reader can read all the information in a few seconds.

Instead of going to the next page automatically you can provide a next button. This allows everyone, sighted or not, to read the text

avatar chmst
chmst - comment - 11 Sep 2022

I personally don't want to know what's happening if an installation runs, but am glad to start and to see nothing than the "congratulations" message. I like the progress bar in the updater. Only if something goes wrong, I want fo know where and why.

It would be great if we could get a progress bar in 4.3. The bar in the updater seems to be globally accepted. Then as @bembelimen wrote, a new concept could be made for future.

avatar Hackwar Hackwar - change - 11 Sep 2022
Labels Added: a11y
avatar N6REJ
N6REJ - comment - 12 Sep 2022

You will probably need to use aria-live

https://cccaccessibility.org/web-1/web-developer-tutorials/using-aria-live

It specifically states that it should not be used in this case

Section three-- avoid misuse.

The aria-live attribute should not be used for dynamic content that's not critical. This just adds noise, literally, for assistive technologies.`

avatar brianteeman
brianteeman - comment - 12 Sep 2022

By your interpretation of that then this entire PR should be rejected

avatar N6REJ
N6REJ - comment - 12 Sep 2022

Thats for JAT @chmst to decide not me.

avatar bembelimen
bembelimen - comment - 29 Sep 2022

For me, this looks good to go ?
Also the aria-live="polite" is from my understanding correct.
@brianteeman do you have the capability to check with a screen reader if the behaviour is the expected one? If yes I would reactivate this PR for testers.

avatar brianteeman
brianteeman - comment - 29 Sep 2022

@brianteeman do you have the capability to check with a screen reader if the behaviour is the expected one? If yes I would reactivate this PR for testers.

yes - of course - and so does every windows and mac user as they have a screen reader with their os.

However this is something that you should be asking the JAT and not me. @chmst as leader of the JAT think its better to have a long period of silence while the instllation takes place. JAT should be the ones making decisions on ccessibility not me

avatar Hackwar Hackwar - change - 29 Sep 2022
Labels Removed: ?
avatar brianteeman
brianteeman - comment - 29 Sep 2022

... and as this PR has the a11y tag it must be approved by the JAT and so far they mistakenly do not approve

avatar drmenzelit
drmenzelit - comment - 2 Oct 2022

I have not enough experience using screen readers, so my results are maybe not 100% correct. First thing I notified: using NVDA I get different results in Chrome and Firefox (Chrome seems to be more verbose). What I tested:

  • removed aria-live=polite from the <div> and role=status from the <ul>, added aria-live=polite to each <li>
  • removed aria-live=polite from the <div> and role=status from the <ul>, added role=status to each <li>
  • rewrote the code to use readonly checkboxes instead of a list, ticked each checkbox using Javascript after the step is completed, tried aria-live and change of focus...

Conclusion: the installation is too fast and the screen reader is not able to announce the steps correctly (too fast, too verbose). The advantage of checkboxes is that the user can tab though them and get the information, but here is also the problem that the process is too fast, before you get tabbed through the steps, the installation is finished and you get the next screen.

I think the steps should stay hidden (visually and for screen readers), so that they can be used for the automated tests Hannes is working on. In case of an error an alert should be visible and audible, so the user knows what went wrong. It would be nice to get an announcement at the end that the installation is complete.

Other ideas are most welcome.

avatar brianteeman
brianteeman - comment - 2 Oct 2022

The container with aria-live must exist on the page load. It cannot be added by the message.

It is not for a non-screen reader to determine if the information is too fast. Regular users know far more about using and controlling the screen reader.

If you consider it too fast for a screen
reader then it should also be removed visibly. You can not have one without the other.

The code in this pr is technically correct and should be accepted

avatar drmenzelit
drmenzelit - comment - 2 Oct 2022

The container with aria-live must exist on the page load. It cannot be added by the message.

As it is now, it was ok in my test with NVDA and Firefox, in Chrome NVDA started reading from the first step again and again

It is not for a non-screen reader to determine if the information is too fast. Regular users know far more about using and controlling the screen reader.

Yes, and that is why it is not so easy to test, we need a real screen reader user...

If you consider it too fast for a screen reader then it should also be removed visibly. You can not have one without the other.

That is our suggestion too

The code in this pr is technically correct and should be accepted

Yes, it is technically correct, but we have to make sure that the user experience of screen reader users is good.

Another thing I noticed is that the progress bar was completely ignored by NVDA. Using a screen reader add-on in Chrome the percentage was announced, but at the end was more than 100% ?

avatar brianteeman
brianteeman - comment - 2 Oct 2022

Grrrh. The JAT should be enhancing accessibility not diminishing it.

avatar drmenzelit
drmenzelit - comment - 2 Oct 2022

Grrrh. The JAT should be enhancing accessibility not diminishing it.

That is not fair. We are trying to improve the code to offer the best possible user experience. Which of our comments let you to the conclusion we are diminishing accessibility?

avatar brianteeman
brianteeman - comment - 2 Oct 2022

Screen readers have the ability to change the speed at which text is read. Most programs can vary the speed between 60 to 400 words per minute

In English, the typical read speed ranges between 120 to 150 words per minute, where advanced and fast screen reader users can understand content being read at a speed of even 450 words per minute. Even if most screen reader users don’t require such high speed, it is still common for them to use higher rates than that of typical spoken language. It is important to keep in mind that the first impression that long-to-read content slows down the user can be deceptive as when set at high reading speed rates, it is being read blazingly fast. Remember, don’t worry too much about long descriptions.

Basing your decision as a non experienced user to remove both visual and auditory feedback is degrading the accessibility. Clicking a button and then not getting any feedback for 10-20 seconds is not acceptable.

avatar drmenzelit
drmenzelit - comment - 2 Oct 2022

It is not the read speed of a screen reader, but the speed of the installation... the screen reader says: checking data.. (interrupted, because the next step is already finished), and the next step the same, and depending on your system maybe starting with reading the first step again... maybe an experienced screen reader user can sort that kind of issue, but I don't see what the improvement in user experience should be...

Your words:

If you consider it too fast for a screen reader then it should also be removed visibly. You can not have one without the other.

And I don't know how we are diminishing accessibility on something we don't had all the years before...

avatar brianteeman
brianteeman - comment - 2 Oct 2022

I give up trying to explain - you're clearly not listening and as the JAT knows best I will finish.

avatar bembelimen
bembelimen - comment - 2 Oct 2022

Sorry @brianteeman first you asked for the @joomla/joomla-accessibility-team-jat and now you're complaining if they give feedback, that is kindergarden.

After reading the explanation, I still think in theory, that aria-live is a possible solution here but in real world just outputting everything from the progress is not reasonable (and like @drmenzelit wrote, the installation process is too fast to cover the full text). The steps itself (when they're successful) do not give any benefit when announced, the only thing which is really important is the message if the installation was successful (we could discuss this, too) or if it failed.

avatar brianteeman
brianteeman - comment - 2 Oct 2022

You dont get it. Let me try one last time without the personal comments which are beneath you.

The purpose of this PR is to add a feedback of the completion of each stage of the installation. If that is to be accepted then it must be done in such a way that it is accessible to everyone. Just like every other piece of code.

Rejecting the addition of aria-live because a non-screen reader user says that they cannot hear all the text being read is not a good reason. As I already pointed out, a regular screen reader user will almost certainly have the text speed greatly increased etc. and there are other assistive technologies that make use of the aria-live messages which are not influenced by speed at all.

If it is determined that the display of the texts is of zero value then they should be removed from this PR. Personally I find them a useful addition and similar to a lot of other software.

The suggestion that 10 - 20 seconds of silence is acceptable really is not and shouldnt even be considered as a serious comment which sadly is true with the current installation process

avatar angieradtke
angieradtke - comment - 2 Oct 2022

It would be nice if we could make all content equally accessible to all people. Unfortunately, that doesn't always work out.
From a technical point of view, this improvement is certainly useful for developers. They can see where there might be problems with the installation.
But usually the installation goes smoothly. Most people, even sighted ones, will pay less attention to the messages as long as everything runs well.
They don't need to look if they don't care. Screenreader users don't have that choice when we are working with a live region. You are certainly right when you say that most screen reader users run their speech output at a pace where we can't understand anything. But still, there are beginners there too.

Besides, we have checkpoint 2.2 in the WCAG, automatic output without prompting is not an option. https://www.w3.org/TR/WCAG22/#enough-time

Splitting the installation into individual steps that are continued by clicking a button would be the only accessible solution. But I think this is nonsense. @brianteeman If you have a solution that works for everyone, we would be really happy.

avatar brianteeman
brianteeman - comment - 2 Oct 2022

Well as you have brought up https://www.w3.org/TR/WCAG22/#enough-time then this PR will have to be adjusted to remove all off the progress messages

avatar angieradtke
angieradtke - comment - 3 Oct 2022

can you please test this: http://der-auftritt.de/tests/progress.html

avatar chmst
chmst - comment - 3 Oct 2022

The purpose of this PR is to add a feedback of the completion of each stage of the installation. If that is to be accepted then it must be done in such a way that it is accessible to everyone. Just like every other piece of code.

Not every piece of code is accessible to users - all the debuginformation is not accessible. If the purpose of the PR is providing information for tests, then no user must see or hear an information. If the information is hidden for everyone then everyone has the same information, only the testing machine has more.

Question @brianteeman - you know the progress bars in update screens. I personally like them. They also run fast and I never had a situation where such a bar stopped. No clue what happens in such a case. Are these progressbars accessible in your opinion?

avatar drmenzelit
drmenzelit - comment - 3 Oct 2022

can you please test this: http://der-auftritt.de/tests/progress.html

The demo was updated and tested with NVDA and VoiceOver. Angie uses here the native html progress element, it has to be tested if the Bootstrap progress bar also works as expected adding aria-label to it.
The list of steps can be hidden (to avoid flashing text and no enough time to interact with - as Angie already posted), but in case of an error an alert has to be visible and audible.

avatar brianteeman
brianteeman - comment - 3 Oct 2022

Thanks for creating that @angieradtke. This has the same issues that were objected to with @Hackwar code in this pr. But for different reasons. This code uses assertive instead of polite. Assertive means that it always interupts whatever the screenreader is doing. So as the screenreader tries to read out the text messages it is interupted with the content fo the assertive statement from the progress bar.

Not sure at all what you meant by testing it with nvda and narrator

Not every piece of code is accessible to users - all the debuginformation is not accessible.

True but it should be if we can make it. Also this is one of the very first things a user is presented with and if we say J is accessible and one of the very first screens is not then it doesnt create a good impression.

avatar angieradtke
angieradtke - comment - 4 Oct 2022

This is not the final solution yet. There are some general problem issues. But we are on the right track. I am glad that blind experts are helping us right now. The issue of "polite" is secondary for the moment. However, I think assertive is still right here. The problem is rather the inconsistent of of screen reader handling. Jaws on Firefox remains mute. At the moment we don't know why. Jaws on Chrome works. NVDA and voiceover work as well.

avatar brianteeman
brianteeman - comment - 4 Oct 2022

Don't waste time on the Firefox issue as screen readers do not work consistently across all browsers.

avatar angieradtke
angieradtke - comment - 4 Oct 2022

We need a bulletproof solution working as a blueprint for other apps as well

avatar brianteeman
brianteeman - comment - 4 Oct 2022

We need a bulletproof solution working as a blueprint for other apps as well

there is no such thing - sadly

https://www.powermapper.com/tests/screen-readers/

avatar angieradtke
angieradtke - comment - 4 Oct 2022

here are no tests width progress:
https://www.powermapper.com/tests/screen-readers/ua/ua-jaws-ff/

So we should test. I hope we can find a solution.

avatar brianteeman
brianteeman - comment - 4 Oct 2022

My point in sharing that link was to show the evidence to support my statement that screen readers do not work consistently across all browsers.

Forgive me for trying to stop you wasting your time chasing the pot of the gold at the end of the rainbow.

avatar angieradtke
angieradtke - comment - 4 Oct 2022

So it works with:

  • Narrator in Edge.
  • Jaws and Chrome
  • NVDA in Chrome and Firefox.
  • Voiceover

Leonie told me to stay with assertive.

There is only the jaws in Firefox issue.

avatar angieradtke
angieradtke - comment - 4 Oct 2022

@brianteeman You know, curiosity is one of my bad qualities.

avatar angieradtke
angieradtke - comment - 4 Oct 2022

@brianteeman changed the code to pure HTML http://der-auftritt.de/tests/progress2.html;
Please retest

avatar rdeutz rdeutz - change - 21 Oct 2022
Title
[4.3] Adding display of progress to installation
Adding display of progress to installation
avatar rdeutz rdeutz - edited - 21 Oct 2022
avatar Hackwar Hackwar - change - 22 Oct 2022
Labels Added: Maintainers Checked
avatar Hackwar Hackwar - change - 22 Oct 2022
The description was changed
avatar Hackwar Hackwar - edited - 22 Oct 2022
avatar Hackwar
Hackwar - comment - 22 Oct 2022

First of all big thanks to the Joomla Accessibility Team. Numerous (disabled) people have tested this PR and given feedback and the overall consensus was, that the text below the progressbar was just clutter and not helpfull. My initial motivation was to have some output for debugging purposes and with the text that went a bit to far. The progressbar would already be enough for that purpose and at the same time it would provide a usefull response to endusers - with and without disabilities.

One feedback was to use a proper progressbar element. Another feedback from a blind user was to use the progressbar from the joomla updater. Since my code used that already, I didn't change that now.

Would that now be acceptable to be merged?

avatar angieradtke
angieradtke - comment - 23 Oct 2022

Not at all. Last checks are needed . We have to talk about the persentations of errors as well.
The displayed steps and ariavaluenow does not fit to each other.
At the end you have ariavaluenow="7" but your code says you have $steps = 6;
This is a small issue with great impact.

I built a summary for screenreader-tests here:
https://der-auftritt.de/tests/progress.html

If we have Feedback from Julian we can go forward.

avatar brianteeman
brianteeman - comment - 23 Oct 2022

Which of @angieradtke versions is this using. /me confused

avatar angieradtke
angieradtke - comment - 23 Oct 2022

@brianteeman the first one is closest to Hannes
Native Version 1 is the cleanest

avatar brianteeman
brianteeman - comment - 23 Oct 2022

so why isnt it using native version 1 - if your tests said that was the best?

similar example with full documentation from deque
https://dequeuniversity.com/library/aria/progress-bar-bounded

avatar Hackwar
Hackwar - comment - 23 Oct 2022

Because two equally qualified experts told me 2 differing solutions. One said to use the native progressbar, the other to use the one from bootstrap.

avatar chmst
chmst - comment - 23 Oct 2022

Both solutions seem to work - with differences which don't affect the function as a whole. I suggest to use the same everywhere in Joomla. This makes maintenace easier and the user sees and hears always the same.

avatar angieradtke
angieradtke - comment - 23 Oct 2022

similar example with full documentation from deque
https://dequeuniversity.com/library/aria/progress-bar-bounded

similar, but here a native progress bar also gets Aria attributes. This is kind of duplicative.
I suspect this code is from times when the native element was not well supported.
I hope the native element will pass the sceenreader tests, that's my favorite because it's native and thus robust.
But let's wait and see what Julian says. If the screenreader support is not there, the nice code won't help us either.

avatar angieradtke
angieradtke - comment - 26 Oct 2022

Dear Hannes , dear Team,

sorry, it took a while, but here you can find the best practise example, including error messages.

https://der-auftritt.de/tests/final.htm

Leather we are not finished yet. We want to use this example as a component, so we can use it everywhere. ( Finder index/update)

So we should rewrite the used javascript @dgrammatiko into a generic working variant ( including variable messages)
and place it where it has to go.

The CSS has to be added at the appropriate place using the color variables as well

avatar brianteeman
brianteeman - comment - 26 Oct 2022

@angieradtke that rocks!!

avatar joomla-cms-bot joomla-cms-bot - change - 9 Nov 2022
Category Installation Language & Strings JavaScript Installation Language & Strings JavaScript NPM Change
avatar Hackwar
Hackwar - comment - 9 Nov 2022

I've adapted the proposal from @angieradtke as good as possible. Please have a look and test if this is correct now.

avatar Hackwar Hackwar - change - 9 Nov 2022
Labels Added: NPM Resource Changed
avatar angieradtke
angieradtke - comment - 13 Nov 2022

Hi Hannes, found some issues:

1. The text of the label should be only "Installation" before the installation starts.
And only when the installation is really running it should be changed to "Installation running".

In the screenshot you can see that the displayed information can't be true.

hannes

change language string to echo Text::_('INSTL');

 <label class="progresslabel text-center">
                    <progress class="progressbar" id="progressbar" value="0" max="8"></progress>
	                <span id="progress-text" role="status"><?php echo Text::_('INSTL'); ?></span>
                </label>

2. How Many steps has the installation?
At the end you have the code as follows:

<label class="progresslabel text-center">
                    <progress class="progressbar" id="progressbar" value="7" max="8"></progress>
                    <span id="progress-text" role="status">Installation running</span>
                </label>

I'm not really sure. After the installation there is a fast redirect , so that I don't get the the information "Installation finished"
It would be better to set a timeout of a few seconds, so the user know that everthing is fine.

3. I took a look at the js-files. I didn't get all the way through it because things related to the progressbar are spread across both JS files. I couldn't find a loop where " installation running" per step is ejected.
It almost looks to me like this is only set at the beginning and the end. Maybe I just haven't found that either or I did not understand the code.

  1. How can I simulate an error in the middle of the installation progress?
    I do not know that, so I could not see if everything is correct with the JS Error handling.
avatar angieradtke
angieradtke - comment - 14 Nov 2022
avatar Hackwar
Hackwar - comment - 14 Nov 2022

@angieradtke

  1. Fixed this.
  2. I added a delay of 2 seconds at the end. The bar actually goes to 8 out of 8, but afterwards immediately does a redirect. This has been fixed as well.
  3. I indeed only set that once. I'm now setting it after each step.
  4. To generate an error, you can go to /installation/src/Model/DatabaseModel.php and in line 422 insert throw new Exception('404', 'Error'); to generate an error upon installation.
avatar MacJoom
MacJoom - comment - 17 Nov 2022

I have tested this PR and i suggest to add a message below a possible error what to do next:
Something like: "Please refresh this page to start over"

avatar brianteeman
brianteeman - comment - 17 Nov 2022

@MacJoom That message would not be correct - depending on when the error occurred

avatar MacJoom
MacJoom - comment - 17 Nov 2022

Screenshot 2022-11-17 at 12-07-34 Joomla Installer
In my case this message is not wrong but misleading - the database was created before but the database name entered was wrong. So this case should be mentioned too - "the database name is wrong"

avatar MacJoom
MacJoom - comment - 17 Nov 2022

@MacJoom That message would not be correct - depending on when the error occurred
I understand - but i think we need to help the user in a way or another - best would be a button...

avatar angieradtke
angieradtke - comment - 17 Nov 2022

I see that is not easy to understand.

We have two issues :

  • The JS is not working correct we need a loop and an error function
  • The language strings should be well translated to make sence
avatar Hackwar
Hackwar - comment - 17 Nov 2022

You are free to improve the error handling of the installation and be my guest when it comes to refactoring the installation, however that is outside of the scope of this PR. I will not start refactoring the whole installation on a PR with already 3 years of work on it. This already is a gigantic improvement, since users now at least get the feedback that there was an error, compared to before, where they had an eternal "loading" screen.

avatar chmst
chmst - comment - 17 Nov 2022

@MacJoom thank you for testing.
As others wrote already, changes in messages or in the installation process are out of scope on this PR. This PR has a long and interesting a11y story - worth to be published outside github.

Improving messages could go to another issue or PR.

avatar MacJoom
MacJoom - comment - 17 Nov 2022

Yes I see that this PR is a huge improvement to the installation routine. And i really would like to see this merged for 4.3 Messages can be adapted later...

avatar MacJoom MacJoom - test_item - 17 Nov 2022 - Tested successfully
avatar MacJoom
MacJoom - comment - 17 Nov 2022

I have tested this item successfully on 2e7fbe2

4.3-dev/PHP 8.1


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar jwaisner jwaisner - test_item - 22 Nov 2022 - Tested successfully
avatar jwaisner
jwaisner - comment - 22 Nov 2022

I have tested this item successfully on 2e7fbe2

Great improvement! Thanks @Hackwar!


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar jwaisner jwaisner - change - 22 Nov 2022
Status Pending Ready to Commit
avatar jwaisner
jwaisner - comment - 22 Nov 2022

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar laoneo laoneo - change - 23 Nov 2022
Labels Added: ?
avatar laoneo
laoneo - comment - 23 Nov 2022

When I enter a wrong DB information, I just see the following screen:
image

There is no way for me to renter the database credentials again. The back button is not working.

avatar Hackwar Hackwar - change - 28 Nov 2022
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - change - 28 Nov 2022
Category Installation Language & Strings JavaScript NPM Change Administration com_fields com_installer com_menus Front End com_content Installation Language & Strings JavaScript NPM Change Libraries
avatar Hackwar
Hackwar - comment - 29 Nov 2022

The requested changes from @laoneo have been made.

avatar joomla-cms-bot joomla-cms-bot - change - 29 Nov 2022
Category Installation Language & Strings JavaScript NPM Change Administration com_fields com_installer com_menus Front End com_content Libraries Installation Language & Strings JavaScript NPM Change
avatar laoneo laoneo - change - 30 Nov 2022
Status Ready to Commit Pending
avatar laoneo
laoneo - comment - 30 Nov 2022

Back to pending


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar Hackwar
Hackwar - comment - 6 Dec 2022

@jwaisner @MacJoom could you test this again?

avatar MacJoom MacJoom - test_item - 6 Dec 2022 - Tested successfully
avatar MacJoom
MacJoom - comment - 6 Dec 2022

I have tested this item successfully on 2e7fbe2

Tested successfully - all sorts of wrong input on database credentials tested. Back button works to retry


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar chmst chmst - change - 6 Jan 2023
Labels Removed: ? ?
avatar HLeithner HLeithner - test_item - 9 Jan 2023 - Tested successfully
avatar HLeithner
HLeithner - comment - 9 Jan 2023

I have tested this item successfully on 2e7fbe2

Maybe unrelated but I wasn't able to install any additional language.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar laoneo
laoneo - comment - 9 Jan 2023

There is still no way to get back for me when an error happens:
image

@MacJoom how could you go back?

avatar MacJoom
MacJoom - comment - 9 Jan 2023

There is still no way to get back for me when an error happens: image

@MacJoom how could you go back?

Back Button worked for me (Firefox 108, Windows 10)

avatar laoneo
laoneo - comment - 9 Jan 2023

When I open directly the installation screen, then the back button in the browser is greyed out. I guess we have to wait for the suggestion from @dgrammatiko.

avatar dgrammatiko
dgrammatiko - comment - 9 Jan 2023

@laoneo can you try this: #29376 (comment)

avatar MacJoom
MacJoom - comment - 9 Jan 2023

I now did some tests with the latest j4installimprove, npm ci done - and now the back button does not work anymore (i was sure it worked before)
However the reload button works...

avatar dgrammatiko dgrammatiko - test_item - 9 Jan 2023 - Tested successfully
avatar dgrammatiko
dgrammatiko - comment - 9 Jan 2023

I have tested this item successfully on 2e7fbe2


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar laoneo
laoneo - comment - 10 Jan 2023

Now the progress bar is not appearing at all anymore. After I entered the credentials, the whole form is displayed and then comes the spinning wheel.

avatar MacJoom
MacJoom - comment - 10 Jan 2023

Same with me ... - if i enter wrong db credentials the error message comes in the alert area on the top of the window but the user is at the bottom of the page so he usually doesn't see the message and thinks that nothing happened until he eventually scrolls up. On correct credentials the progress is not shown anymore, just the joomla logo for a short time and the end message.

avatar dgrammatiko
dgrammatiko - comment - 10 Jan 2023

After I entered the credentials, the whole form is displayed and then comes the spinning wheel.

That shouldn't happen, I'll have a look later today

avatar angieradtke
angieradtke - comment - 10 Jan 2023

Hello together,

maybe it is helpful to read again what was important to us ( A11y-Team) :
https://der-auftritt.de/en/insights/progress-en.html

I think I had already written somewhere that it would be better to add the installation steps not hardcoded. Using an Array would be better. (I can't find that anymore.) Then we have control over the error messages in one place/ function . This makes the code less and easier to maintain and debug.

Wouldn't that be possible? @dgrammatiko

avatar Hackwar
Hackwar - comment - 10 Jan 2023

I reverted the changes from @dgrammatiko and did some more fixes... Regarding @angieradtke, we discussed that and solved the topic.

Please check again. It should now work as expected.

avatar laoneo
laoneo - comment - 10 Jan 2023

Looks ok now, guess we have to wait for another test

avatar MacJoom
MacJoom - comment - 10 Jan 2023

Tested OK now - but i got the same problem as Harald within "Installing Additional Language" the "install selected language" button does not work and throws template.js?2866e0b7fb3eead87f64538845ad119e:206 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute') at onSuccess (template.js?2866e0b7fb3eead87f64538845ad119e:206:18) at n.onreadystatechange (core.min.js?2866e0b7fb3eead87f64538845ad119e:1:6213)

I tried with a fresh checkout of 4.3-dev (jinstall done) - and did not have this problem

avatar Hackwar
Hackwar - comment - 15 Jan 2023

Indeed, @MacJoom & @HLeithner there was an issue with language installation. I fixed the code. So we need yet another round of tests. sigh

avatar MacJoom
MacJoom - comment - 16 Jan 2023

@Hackwar - Thank you for your work! - Tested "better" now - the "install selected language" button works now, but there is delay for a few seconds after clicking the "install selected language" button where it seems that nothing happens - i guess the installation is done in this time - then the joomla logo overlay comes up for a very short time - and then the installation is complete. It's a detail and i hope it's an easy fix.
crosschecked with 4.3-dev: the joomla logo overlay comes right after clicking the button and stays during installation.

avatar HLeithner
HLeithner - comment - 4 Apr 2023

Can you please rebase this on 5.0, I know it's annoying, but better have it better tested in a major release then less tested in a minor...

On my other wish list for the installer would be that the error handling needs to be much better/userfriendly :-(

avatar Hackwar Hackwar - change - 18 Apr 2023
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2023-04-18 12:06:13
Closed_By Hackwar
Labels Added: ? PR-5.0-dev
Removed: PR-4.3-dev
avatar Hackwar Hackwar - close - 18 Apr 2023
avatar Hackwar Hackwar - change - 18 Apr 2023
Status Closed New
Closed_Date 2023-04-18 12:06:13
Closed_By Hackwar
avatar Hackwar Hackwar - change - 18 Apr 2023
Status New Pending
avatar Hackwar Hackwar - reopen - 18 Apr 2023
avatar Hackwar Hackwar - change - 18 Apr 2023
Title
Adding display of progress to installation
[5.0] Adding display of progress to installation
avatar Hackwar Hackwar - edited - 18 Apr 2023
avatar MacJoom MacJoom - change - 26 Aug 2023
Labels Added: Feature PBF
Removed: ?
avatar fancyFranci
fancyFranci - comment - 26 Aug 2023

Its working, but when there was an error message before, it appears for a second above the progress bar. Like documented in my video. Would be nice if its not visible, because at first I thought the installation would progress despite the error.

screen shot 2023-08-26 at 09 53 32


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar fancyFranci
fancyFranci - comment - 26 Aug 2023

Ok I forgot to build js and css, but even after that the error still appears. The progress bar is just prettier.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar HLeithner
HLeithner - comment - 26 Aug 2023

did you used the prebuilt zip files? @fancyFranci

avatar HLeithner
HLeithner - comment - 26 Aug 2023

@fancyFranci can't replicate your issue

avatar HLeithner HLeithner - test_item - 26 Aug 2023 - Tested successfully
avatar HLeithner
HLeithner - comment - 26 Aug 2023

I have tested this item ✅ successfully on 2e7fbe2

still works


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/29376.

avatar fancyFranci
fancyFranci - comment - 26 Aug 2023

I can try again, but maybe that helps for replicating the issue: First I wrote a wrong database username like "rootz" and tried to install. Normal error message appears. I go back, fix it to "root" and install again. Then I have the behavirour like in my video.

avatar HLeithner HLeithner - change - 2 Sep 2023
Status Pending Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2023-09-02 19:05:27
Closed_By HLeithner
avatar HLeithner HLeithner - close - 2 Sep 2023
avatar HLeithner HLeithner - merge - 2 Sep 2023
avatar HLeithner
HLeithner - comment - 2 Sep 2023

Tested it successfully with the download, in web and cli incl. language installation. I think we will get more tests with beta1

avatar HLeithner
HLeithner - comment - 2 Sep 2023

thanks hannes

Add a Comment

Login with GitHub to post a comment