[Guided Tours] Fix dropdown mouse accessibility on fancy selects

[obuisard]

Summary of Changes

When a tour step targets a fancy select box (like the category or the tags field), the dropdown, although accessible with the keyboard, is not accessible with the mouse. Therefore, it is impossible to select a category or a tag via the mouse.

This PR fixes the issue by allowing a target and all inner elements to be available over the tour overlay.

Testing Instructions

Start the 'Create an article' tour. Go all the way to the selection of a category.
Then try and select tags.
Go through a couple tours to ensure there is no side-effect and that all tours can be run properly.

Note: the z-index of the overlay is 9997, the z-index of the step popups is 9999.
Therefore I chose a z-index of 9998 for the targets.
A good tour to test z-index values is the welcome tour. In the 'notifications panel' step, step and target can start to overlap on a smaller size window.

Actual result BEFORE applying this Pull Request

The dropdown cannot be clicked.

Expected result AFTER applying this Pull Request

The dropdown can be clicked.

In the welcome tour:

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[fgsw]

I have tested this item ✅ successfully on bb2a154

Test: All guided tours (macbook air, 13-inch, 2019).

Comment: In "Welcome tour > Notifications panel", step and target overlap on a smaller size window ("iphone se" on firefox responsive design mode). Why is the tour step not on top of the notifications panel?

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43960.}

[obuisard]

Thank you for testing this PR!

Comment: In "Welcome tour > Notifications panel", step and target overlap on a smaller size window ("iphone se" on firefox responsive design mode). Why is the tour step not on top of the notifications panel?

The tours are not supported on screens smaller than 526 pixels (whenever the admin menu turns into 'mobile' mode).
That said, this is what I see when emulating IPhone SE in Firefox:

[coolcat-creations]

I have tested this item ✅ successfully on bb2a154

Thank you, works now as expected :)

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43960.}

[richard67]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43960.}

[Hackwar]

Thank you for your contribution @obuisard!