ios ticket: https://phabricator.wikimedia.org/T245321

As per @JMinor for ios version:

A couple product/implementation notes:

• This is a hatnote that appears on this and other pages, but doesn't appear to be labeled clearly in the markup, so we'll need to look for the achor or something...
• Suggest we add special handling for this hatnote to make it visible just under the title (needs design)
• Not sure how universal this will be language-wise, would be good to know if/what other hatnotes or templates might exist outside english

@schoenbaechler Heads up that we should check in on this this week :)

Some explorations for Android below:

• I think the hint should be positioned within the article, similar to the treatment on Mobile Web.
• As a result, it would need to be outputted in Mobile HTML.
• Then, we need to clarify if this should not only be explored for this specific hint (Suicide prevention), but also in a broader context – e.g. what @cmadeo linked to in T245321#5894177:

We could potentially utilize this design: https://app.zeplin.io/project/57a120ce9787dcf26230651f/dashboard?seid=5d35ddfe5c030140f897b16c

In T245322#5906687, @schoenbaechler wrote:

• I think the hint should be positioned within the article, similar to the treatment on Mobile Web.

Agreed. I like suggestions 1 and 2, with the subtle grey background that sets the hatnote apart.

• As a result, it would need to be outputted in Mobile HTML.

Yes - though as @JMinor mentioned in T245321#5893840 it will be necessary to find some sort of anchor as the element is not clearly labelled. We will also need to figure out what happens in languages besides English.

• Then, we need to clarify if this should not only be explored for this specific hint (Suicide prevention), but also in a broader context – e.g. what @cmadeo linked to in T245321#5894177:

We know we don't support hatnotes properly, and the problem is also present in mobile-html (see T243610#5898021 ), but I am not sure the relative complexity of a global fix, vs a local fix to enable this specific hatnote. Perhaps @bearND can weigh in.

As per @JMinor for ios version:

• This is a hatnote that appears on this and other pages, but doesn't appear to be labeled clearly in the markup, so we'll need to look for the achor or something...

Hatnotes can be found easily using the hatnote class in English WP pages.

document.querySelectorAll('.hatnote') shows there are actually 18 hatnotes in the article mentioned in the task description. So, not only can there be one for the article but also they appear in this article right under section titles. As seen in T243610, they can appear anywhere. I am in favor of showing hatnotes to the reader. Not doing so feels like we're hiding information that was entered by editors. I'm not sure why we've been hiding this. Maybe it was because the display of that took vertical space and there was a strong desire to bring as much text as possible above the fold. I think as long as we make it small enough or find a good place that it's not that much. Most of the disambiguation text (.hatnote) I've seen is not so much but there could be several paragraphs for page issues (.ambox). Example of where it adds up: Video on enwiki with 2 hatnotes and 1 ambox.

Why am I mentioning page issues here? In the past the Android app had a button with a native bottom sheet dialog for disambiguations and page issues. We kind of treated them similar. Not sure where that button or menu item went but I can't find it anymore. Not sure if we still want to do that but I'd be more concerned about page issues taking vertical space than disambiguation paragraphs. I guess it really boils down to where they reside.

We have the following CSS rules, which hide hatnotes and page issues on the wikis which use them:

.ambox, .hatnote {
    display: none;
}

It's easy to remove these rules. We just need to be clear where they should appear if they are for the whole article. Since we're moving the lead paragraph the hatnote currently would appear below it (if I disable this rule):

[So, if we were to just remove the rules hiding hatnotes and amboxes we might want to consider adjusting the way we move the first paragraph. OTOH it might just be alright. Up to design.]

Not sure how universal this will be language-wise, would be good to know if/what other hatnotes or templates might exist outside english

The languages I've checked so far (de, es, fr) don't seem to be using the hatnote class. You can find example pages by going to https://en.wikipedia.org/wiki/Special:DisambiguationPageLinks and replacing the language code with the one of the language you want.

This also means that currently we only hide this kind of information on English WP and any other wikis using the hatnote class.

A more comprehensive list of selectors is in the mobileapps repo.

Thanks @bearND for the info. We'll then move forward with showing all the hatnotes. If we do a CSS-only treatment this should be a relatively easy implementation. @schoenbaechler can adapt his treatment if necessary - Robin, can you liaise with @cmadeo to find something that works for both?

cc @JMinor