Note: the associated epic T214647 should be read first before taking on this task!
When a Drawer is open, everything “behind” the drawer is still clickable, including menus and overlays. We will change this by making use of an opaque "shield"
Reproduction steps
Click on a reference. While the reference drawer is open, click the page edit button, or the main menu, or a link .
Expected results
The reference drawer should just close by clicking anywhere in the document.
Actual results
When clicking the edit button, the overlay is open on top of the reference drawer,
When clicking the main menu, the menu slides out below the reference drawer (or CTA drawer).
When clicking a link, the link is activated and the page reloads.
Developer notes
There are 2 types of Drawers to be concerned about - ReferencesDrawer and CtaDrawer, used in 3 places (clicking red links, watch star when anonymous and a reference)
When clicking anywhere in page content, drawers should close.
Note: confusingly, this happens but indirectly and not explicitly due to some code relating to the Menu Drawers
If you comment out
skin.on( 'click', onSkinClick.bind( skin ) );
then this behaviour goes away. This appears to mostly work with the exception of anchor tags such as the hamburger icon and the edit icon. This is because those elements call stopPropagation in their own click handlers meaning the event never bubbles up to the body tag.
Let's revise all this code so that an event handler is explicitly added for hiding Drawers that have been opened and removing those event handlers when they are gone and revising the code in preInit so it only applies to NavigationDrawers.
Instead of setting an opacity on all body elements when an overlay is open:
.has-drawer.drawer-visible > *:not(.drawer) {
opacity: 0.6;
}A dedicated shield/guard element should be created and placed just “below” the Drawer, but “above” the rest of the document content, so that when someone clicks the document when a Drawer is open, they can only click on the guarding element and not a real link/menu/overlay etc. The Drawer shield would also capture any event clicks
This would also keep all the code associated with the Drawer.
e.g.
<div class="drawer">
<div class="drawer__shield"><!-- covers entire screen and is opaque --></div>
<div class="drawer__drawer">
<!-- this is the current implementation of the drawer -->
</div>
</div>Acceptance criteria
- The shield should cover the whole article surface and be translucent (opacity: 0.6)
- Clicking anywhere in the shield should stop event propagation and close the drawer.
- Clicking inside the drawer itself or highlighting text does not trigger the closing of the drawer.
QA steps
When logged out...
- Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Abdullah_bin_Nasser_bin_Khalifa_Al_Thani and click a red link
- Click a reference on same page
- Click the watchstar on the page.
- Keep clicking these 3 things trying to see if you can break it. In all cases a translucent shield should cover the screen. Each drawer should be closable using the close button or clicking the translucent shield. References drawer should not close on scroll but watch and red link drawer should.
QA Results
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T214049#5796223 |
| 2 | ✅ | T214049#5796223 |
| 3 | ✅ | T214049#5796223 |
| 4 | ✅ | T214049#5796223 |
| 5 | ✅ | T214049#5796223 |
| 6 | ✅ | T214049#5796223 |
