Tour works on fresh installation of the full package, but not after update with the update package. In the updated version, only the component is available, but no "Take the tour" buttons.

As stated before.
if you are not using tinymce then any tour that was using it as an identifier is broken

if you update the tours to use a target of .adminform instead of .tox-edit-area__iframe then the tours will be editor agnostic

the value of the checkedout field in _guidedtours should be null and not 0

otherwise on a clean install you have 11 items to checkin

As stated before this is unusable if you are just using a keyboard resulting in this being completely inaccessible. You can test this for yourself by taking the banner tour just using the keyboard and see if you can not only move forward through the tour but also move backwards

imho this should'nt be shipped with the core, better there should be an option to install it on installation phase

@obuisard please check and merge obuisard#6

Why is here a system plugin needed? I don't think that it is wise to have a system plugin enabled which is executed on all pages for a use case which is used only for newcomers.

Honestly I share the idea of @alikon to have this feature installable on demand. It doesn't mean that the "Take the tour" button doesn't have to be there, but it should install the extension only when actually needed.

As stated before this is unusable if you are just using a keyboard resulting in this being completely inaccessible.

When I did the first implementation I had left a comment on the keyboard accessibility: joomla/40-backend-template#247 (comment) which should give a good entry point on how to fix the issue

I like the idea to enable it on install (as a check) Also the sample Data module should only be installed if someone checks " I am a first time user" or so.

When or if it's installed is a pointless decision for me as we must first decide if it's acceptable to add a completely inaccessible extension

imho this should'nt be shipped with the core, better there should be an option to install it on installation phase

Keeping 'Guided Tours' in the core allows third party developers to have their extensions shipped with tours and be usable by their new users. The tours are not only for the Joomla newbies.

the value of the checkedout field in _guidedtours should be null and not 0

otherwise on a clean install you have 11 items to checkin

Great point. Will change that.

In the updated version, only the component is available, but no "Take the tour" buttons.

It is missing, indeed.

Keeping 'Guided Tours' in the core allows third party developers to have their extensions shipped with tours and be usable by their new users. The tours are not only for the Joomla newbies.

this doesn't necessaily mean that we must "bloat" the core with such kind of stuff

i still think that this feature should be opt-in and not in the core as a default

How can an extension developer integrate then tours? When not through a plugin, then I doubt it is the right approach.

First of all thanks @khu5h1 for your hard work during GSOC - always great to see these projects come to fruition!

When or if it's installed is a pointless decision for me as we must first decide if it's acceptable to add a completely inaccessible extension

Per the a11y policy we published anything in the backend has to be accessible (ref: https://www.joomla.org/accessibility-statement.html) so no this can't be merged without a11y support.

Why is here a system plugin needed? I don't think that it is wise to have a system plugin enabled which is executed on all pages for a use case which is used only for newcomers.

I don't think the fact it's only for newcomers is the issue. Don't forget there are very legit use cases for inducting administrators to a site that has long existed (think about the onboarding of new content creators for a blog or something similar). I'd argue there's a good reason for this to be installed for much longer than just first Joomla install

Having said that I also agree for what this is doing system plugin is overkill. I think this can be a dedicated plugin group for extensions to integrate with and we can import that group only in AdministratorApplication to ensure that there aren't any calls to it from the other apps (this will also help with some sanity checks). Open question as to whether it is safe to believe that we are only gong to be running this in the admin (because on certain sites like joomla CRM/elearning extensions there might be use cases for this in the frontend??)

i still think that this feature should be opt-in and not in the core as a default

I think @laoneo is right that this probably has to be in core (at some level) for support for extension devs - but we can probably just keep the plugin event in core without the component for extension devs to use... However even with this you have to assume that users are new and need support - that's the reality of the modern web. So if you don't want to bundle it we should make it opt-out in the installer not opt in. So they get support unless they click to say we know what we are doing. That's relatively basic UX.

I am aware that sosme people don't see it as important but this is what our accessibility statement says.

With Joomla! 4, we conform with the Worldwide Web Consortium (W3C) guidelines: WCAG 2.1 and ATAG 2.0. The Joomla Backend ensures full accessibility. Every person, with or without disability, can use Joomla to create, administer and maintain accessible sites. We give you the tools, the rest is up to you!

Tried to test after the latest changes but unable to do so as the Take a tour button doesnt do anything

Tried to test after the latest changes but unable to do so as the Take a tour button doesnt do anything

Did you use the generated package? It seems that the Download action is in a pending status

Tried to test after the latest changes but unable to do so as the Take a tour button doesnt do anything

Thank you both, checking this issue.

Tried to test after the latest changes but unable to do so as the Take a tour button doesnt do anything

Did you use the generated package? It seems that the Download action is in a pending status

always git pull and npm i to avoid issues

Tried to test after the latest changes but unable to do so as the Take a tour button doesnt do anything

Did you use the generated package? It seems that the Download action is in a pending status

always git pull and npm i to avoid issues

I installed the latest packages and tours start properly. Can you double check Dimitris @dgrammatiko ? Everything works for me on this new install.

just realised its on the home dashboard its not opening

Found the problem. The module is not loading the bootstrap dropdown and is reliant on other modules to load the js

joomla-projects/gsoc22_guided-tour#43 (comment)

With the recent changes there are nnow the following problems when using the keyboard

Using the menu tour
Step 3 - the first with an input
If you tab past the input you get to the close icon. Subsequent tab takes you out of the tour
Shift tab will take you back to the close but you can not go back to the input
and you still cant go forward to the next button because it is disabled.
There is no indicator that the button is disabled

Step 4 is the same :(

Found the problem. The module is not loading the bootstrap dropdown and is reliant on other modules to load the js

I lost it during refactoring... I put it back. Great catch Brian @brianteeman.

With the recent changes there are nnow the following problems when using the keyboard

Using the menu tour Step 3 - the first with an input If you tab past the input you get to the close icon. Subsequent tab takes you out of the tour Shift tab will take you back to the close but you can not go back to the input and you still cant go forward to the next button because it is disabled. There is no indicator that the button is disabled

Step 4 is the same :(

Still have to work on that.

As far as the button's disabled state not being visible, I found out what it is: the template only changes the aspect of the button if the class .disabled is used and does not take into account the attribute 'disabled'. I have modified the code to add the disabled class, but I think the template should be handling the attribute as well.

Please check the responsiveness of columns on mobile.

Please check the responsiveness of columns on mobile.

I don't have that behavior, strange...

Make sure to reload the page. You should not see the 7/7 Columns.

Make sure to reload the page. You should not see the 7/7 Columns.

Fixed. Thanks!

Add spacing.

The changes for modified editor targets does NOT work when codemirror is the editor
dbb1019

There was a reason that I submitted a pull request two weeks ago with specific code that was tested and worked when all three of the default editor settings was used joomla-projects/gsoc22_guided-tour#95

The changes for modified editor targets does NOT work when codemirror is the editor dbb1019

There was a reason that I submitted a pull request two weeks ago with specific code that was tested and worked when all three of the default editor settings was used joomla-projects/gsoc22_guided-tour#95

Except that the fix suggested was not accessible. It broke the flow. So although an interesting suggestion, it is not a viable solution.
Who in his right mind would use codemirror to edit an article?

Finally, the solution provided could not work in all cases. .adminform is not used everywhere, some forms use other names and some forms don't even have a class to hold on (the core code is not always consistent).

The code provided worked perfectly for all the cases it was used in. The code you have used does not.

And yes lots of people use codemirror for content

Finally, the solution provided could not work in all cases. .adminform is not used everywhere, some forms use other names and some forms don't even have a class to hold on (the core code is not always consistent).

if .adminform is not used everywhere then thats not a problem. each step uses its own target - just use the correct one and then it will do.

the code in this pr right now doesn;'t work in all cases either.

If there is a form that doesnt have a class or id then there is something seriously wrong with that form and I am amazed that it would actually work. In other words - please show an example so it can be fixed as its a serious bug.

Not spotted this error before when using the back button

the url after the error is /administrator/null

update confirmed as fixed

The code provided worked perfectly for all the cases it was used in. The code you have used does not.

And yes lots of people use codemirror for content

Sorry to contradict, no it did not work with the guided tour for tags, for instance. There is no adminform class on that page. Or any class.

The tags edit page:

The article edit page:

By the way, bad choice of class here: the form on that page already uses that name.

if .adminform is not used everywhere then thats not a problem. each step uses its own target - just use the correct one and then it will do.

Indeed, it's not a problem, we can use any class for pages that are scanned by guided tours.

the code in this pr right now doesn;'t work in all cases either.

It does not break the flow. If someone uses CodeMirror, the guided tours does not break (loss of focus, for instance, or popup at the wrong place), text can't be added and the step becomes just informative. Once again, using codeMirror to create articles (for instance) is unlikely to happen anyway.

If there is a form that doesnt have a class or id then there is something seriously wrong with that form and I am amazed that it would actually work. In other words - please show an example so it can be fixed as its a serious bug.

Forms do work. They all have ids.

Once again, using codeMirror to create articles (for instance) is unlikely to happen anyway.

Simply not true and irrelevant. I used codemirror on my blog for years because it was more keyboard friendly than using tinymce and I liked the code highlighting

This is a fun one. If for whatever reason you quit joomla in the middle of a tour without formaly closing the tour then it continues as soon as you log back in/

Not spotted this error before when using the back button

the url after the error is /administrator/null

Thank you, I was able to reproduce it. Looking into it. Should be fixed from my last commit.

This is a fun one. If for whatever reason you quit joomla in the middle of a tour without formaly closing the tour then it continues as soon as you log back in/

That's because the session storage has not been cleared

This is a fun one. If for whatever reason you quit joomla in the middle of a tour without formaly closing the tour then it continues as soon as you log back in/

That's because the session storage has not been cleared

If the session times out then you get this weird behaviour making it hard (and not accessible) to log back in

Add spacing.

Addressed :-)

Exits at this step with the following in console:

Uncaught (in promise) DOMException: Document.querySelector: 'joomla-field-fancy-select:has(#jform_catid) .choices' is not a valid selector

Exits at this step with the following in console:

Uncaught (in promise) DOMException: Document.querySelector: 'joomla-field-fancy-select:has(#jform_catid) .choices' is not a valid selector

You may be using a browser that does not support :has

Using the latest version of Windows Firefox 110.0.1.

Firefox does not support :has so it can not be used by Joomla according to our browser support policy

Using the latest version of Windows Firefox 110.0.1.

There was a missing catch statement in the promise. Now, an invalid selector is bypassed gracefully and the tour keeps going.

If the session times out then you get this weird behaviour making it hard (and not accessible) to log back in

Addressed.
No tour ever loads on the login screen anymore.
However, the session storage has not been cleared after login, so the tour will resume (the session storage does not clear as long as we remain in the same window/tab). Should we clear the session storage upon login (as a general rule)?

Brian @brianteeman, as far as tabbing/speech is concerned, what is your take on the version we have so far? The previous implementation was creating too many problems and was replaced. There is no longer any removal/shuffle around of tabindex so that the flow remains intact. On blur, a 'target' gives back the focus to the modal, which allows the user to go back to the modal and step through it. There are couple issues we discovered that I will address soon: the focus box around buttons and the '1/3' which should read as 'step 1 of 3'.

will review again shortly. I had spotted the step 1 of 3 thing but didnt mention it as there were bigger accessibility issues to address first

If the editor is not tinymce then there are js errors during the tour when it gets to the text area

If the editor is not tinymce then there are js errors during the tour when it gets to the text area

video and audio recording

If the editor is not tinymce then there are js errors during the tour when it gets to the text area.

This happens when a target is not found. This is thrown by Shepherd and when that happens, the script acts as if no target was set and the position is centered.

If the editor is not tinymce then there are js errors during the tour when it gets to the text area.

This happens when a target is not found. This is thrown by Shepherd and when that happens, the script acts as if no target was set and the position is centered.

No script should be outputting an error

The visual styling on the "back" button is only being applied when you go backwards. Going forwards there is no styling. See video with keystrokes (no audio)

I might be mistaken but I am sure that I recall that the guided tours button was available at all times. It now seems to not be available in the one place that I would want to use it - the form edit - and I have to return to a list view to find a tour

I might be mistaken but I am sure that I recall that the guided tours button was available at all times. It now seems to not be available in the one place that I would want to use it - the form edit - and I have to return to a list view to find a tour

The button 'take a tour' (like all buttons in the status bar) should not be there if you are in a middle of editing an article, for instance. Or do you think we should make an exception?

I might be mistaken but I am sure that I recall that the guided tours button was available at all times. It now seems to not be available in the one place that I would want to use it - the form edit - and I have to return to a list view to find a tour

The button 'take a tour' (like all buttons in the status bar) should not be there if you are in a middle of editing an article, for instance. Or do you think we should make an exception?

Thats a usability / ux question. All I know is that the one place I want to take a tour is when I open an edit form

There is a maximum width set for a shepherd-element of 400px but this breaks if you have included an image etc that is wider than 400px

Addressed

The modal showing "all tours" is only using colour to indicate visually that something is a link. You should always use at least two visual indicators. Visually there is no way to know that anythign in this screenshot is a link.

You can also see in the screenshot the page below the modal is a dashboard of links and that in this case the links all have a visual styling of colour AND underline

Addressed

have you tried it on a mobile device? its not usable as you cannot get to the new button

have you tried it on a mobile device? its not usable as you cannot get to the new button

Yes. We hide elements in the interface on mobile. That complicates things...
I was thinking tours should only be available on screens larger than 576px.

https://github.com/joomla/joomla-cms/pull/39902/files#r1123503070

You misunderstood the comment. It was referring to rtlcss not to shepherd

I cant work out the exact scenario or reasoning for adding aria-live assertive 9922d1d

But you have to be very careful wth aria-live and dynamic changes or it doesn't work as expected if at all

Tab should move forward
Shift tab should move backward

It looks to me as if a recent change has made shift tab work the same as tab. This is not expected behaviour

https://github.com/joomla/joomla-cms/pull/39902/files#r1123503070

You misunderstood the comment. It was referring to rtlcss not to shepherd

Honest mistake, you did not mention what you were talking about :-) Thank you for clarifying.

I cant work out the exact scenario or reasoning for adding aria-live assertive 9922d1d

But you have to be very careful wth aria-live and dynamic changes or it doesn't work as expected if at all

In my tests (Windows narrator) and after much reading, it prevents the screen reader to read the page information rather than the step after a page refresh.

Tab should move forward Shift tab should move backward

It looks to me as if a recent change has made shift tab work the same as tab. This is not expected behaviour

I have made no such change. There is no code in Guided Tours that changes keys behavior anymore. I can't speak for the Shepherd script, I did not check.

You misunderstood the comment. It was referring to rtlcss not to shepherd

Honest mistake, you did not mention what you were talking about :-) Thank you for clarifying.

The comment was just on the one line but guess it can look odd in the gh ui

Tab should move forward Shift tab should move backward
It looks to me as if a recent change has made shift tab work the same as tab. This is not expected behaviour

I have made no such change. There is no code in Guided Tours that changes keys behavior anymore. I can't speak for the Shepherd script, I did not check.

I did check Shepherd and it works correctly there

I cant work out the exact scenario or reasoning for adding aria-live assertive 9922d1d
But you have to be very careful wth aria-live and dynamic changes or it doesn't work as expected if at all

In my tests (Windows narrator) and after much reading, it prevents the screen reader to read the page information rather than the step after a page refresh.

ok so a couple of things.

1. If it is going to a new page then it should read the page information. Otherwise the unsighted user will not know that the page has changed
2. aria-live is a bit quirky. The intended use is for there to be an area on the page on load that is marked as an aria-live region and then if the content in that region changes then it is announced. polite=> announce as soon as you finish announcing the current thing. assertive=> interupt and announce now. The region must be on the page on load - it can not be injected later. You can only inject a message into the region

Smart Search Filter Tour

I am not that familiar with this to be honest but I think this should be something more like
Select Options
Select the options for the smart filter here

Create a user tour

If a password is not entered here then a password will be generated for the user and emailed to them

(you cant go to the next step if you dont enter a password)

Not suprisingly there is nothing in the tour to determine if the password matches the requirements etc. As a result when you try to complete the tour (save and close) you cannot but you cannot see why as the error is obscured.

Smart Search Filter Tour

I am not that familiar with this to be honest but I think this should be something more like Select Options Select the options for the smart filter here

Agree. We will review all tours and make them more 'useful' and even create more useful ones. Focus was made on the guided tours functionality and accessibility first to have a solid basis, which we can build on.

i assume you realise that it doesnt support workflows

Great job everyone. Thank you for your hard work.

:(

This is a great component but it is not ready to be released and is still not accessible

and my question too is why ?

there are no successfull test & and for a big pr like this 1 it should be the minimum requirements

@obuisard language badge is missing. GitHub Actions are therefore not running.

Hi Stefan @tecpromotion, is there anything needed from me for translations? I have added the label (sorry it was missing).