Page MenuHomePhabricator

Clicking the popup should take you to Special:Contributions/$ip
Open, MediumPublic

Description

AC
  • Clicking anywhere on the popup takes you to that IP's Special:Contributions page
  • The infobox (accordion) on the Special:Contributions page should be expanded even if it should be collapsed per the user's setting
  • The user's setting should not be updated unless they collapse/expand the infobox (accordion)
  • Accessibility requirements (from T293723#7529061)
    • Make sure that the info icon button has aria-haspopup property (docs) that points to the popup
    • The popup should have the dialog role (docs) and a corresponding aria-owns property
    • We'll also need to have a way that pressing tab after the info icon takes you to the popups link element (docs) and then out of the popup.
    • Focus inside the popup would be to the link to Special:Contribs. Like PagePreviews the entire content would be a link
    • Hitting esc anywhere should close the popup
Notes

See T293723#7439765.

...
I think a parameter is the most non-invasive way to pass a one-off flag and it should be prioritized over the user preference if the parameter is set. It can be hardcoded as part of the href in the popup as part of T293723: Clicking the popup should take you to Special:Contributions/$ip. If the user interacts with the infobox after load (closing and then expanding it again), we should continue to watch for that and record the preference like we currently do.

...


Original task:

The entire IP Info popup should be clickable (like PagePreviews on Desktop). Clicking it takes you to that IP's Special:Contribs page with the IP Info accordion already open.

Event Timeline

Is this feasible?

Yes.

The DOM of the popup widget supports having an anchor element position over the contents via CSS like:

<div class="oo-ui-popupWidget-popup" style="width: 320px; height: auto;">
    <div class="oo-ui-clippableElement-clippable oo-ui-popupWidget-body" style="max-width: 712px; max-height: 585px;">
        <div class="ext-ipinfo-widget oo-ui-widget oo-ui-widget-enabled" aria-disabled="false">
            <dl class="ext-ipinfo-widget-property-properties"><!-- ... --></dl>
            <a class="ext-ipinfo-widget-overlay" href="/wiki/Special:Contributions/xxx.xxx.xxx.xxx?ipinfo=open"></a>
        </div>
     </div>
</div>
modules/ext.ipInfo/ipinfo.less
.ext-ipinfo-widget {
    position: relative;

    .ext-ipinfo-widget-overlay {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
}

Would this affect the user's open/close pref on the accordion? Can it be independent of it?

It musn't affect the preference. We'd need to:

  1. Update the decision to render the infobox (accordion) as initially collapsed/expanded is on the server side to take into account a new ipinfo=open parameter
    • The parameter's name is TBD
  2. Update the logic that persists the setting from the client side to ignore the first time the collapses the accordion if it was initially expanded due to that parameter
phuedx renamed this task from Entire IP Info popup to be clickable: Link to Special:Contribs with IP Info box open to Clicking the popup should take you to Special:Contributions/$ip.Oct 19 2021, 10:30 AM
phuedx updated the task description. (Show Details)

@Prtksxna: I've been bold and have added AC to the task and a link to my notes ☝️. If you're happy with the task, then we can move it to Cards ready for discussion.

Niharika triaged this task as Medium priority.Oct 20 2021, 4:10 PM

A quick disclaimer: I don't actually have much insight into how this tool will be used in practical application. That said, I'm not sure I agree with the intuitiveness of making the popup entirely clickable. I understand that the existing UX this builds off of is the previews feature? I think it works for the previews feature because it's clear that it's a preview (from everyone's favorite wikipedia page, Philosophy):

image.png (257×338 px, 32 KB)

The fading out w/the clipped word conveys to the user that this is a preview only and that there's more information to be accessed.

In comparison, the IP Info popup looks like a discrete set of information:

image.png (187×337 px, 11 KB)

Making the popup a link will also make the text un-copy-pasteable. I'm not sure how valuable that feature is but just wanted to point it out.

This is my personal opinion and I'm not going to push strongly on it and if the people who will actually be using this tool are fine with it then that's even better. I had some concerns about if (in the hypothetical) the UX was unpopular and if there were any avenues for user feedback/our options to respond to that.

Thanks for going over these @STran 🙏🏾

The fading out w/the clipped word conveys to the user that this is a preview only and that there's more information to be accessed.
In comparison, the IP Info popup looks like a discrete set of information.

Yeah, we used the fading out there because the content is incomplete. Here the sets of information are complete but it isn't the entire information. I'll brainstorm some options to see if we can indicate that there is more and if that helps.

Making the popup a link will also make the text un-copy-pasteable. I'm not sure how valuable that feature is but just wanted to point it out.

In our usability tests we didn't see anyone do this. Its more common for CheckUsers, but they use a different tool for it anyway.

I had some concerns about if (in the hypothetical) the UX was unpopular and if there were any avenues for user feedback/our options to respond to that.

Yep we're looking for some ways to collect feedback. We're considering some options right now - talk page, flow, yes/no feedback, quick surveys and of course instrumentation to see how the thing is getting used.

@Prtksxna do you think this ticket is ready to be worked on?

@Prtksxna do you think this ticket is ready to be worked on?

Yep! I'll create a separate ticket if we add a "more information here" indicator in the popup.

phuedx added a subscriber: Tchanders.

@Tchanders to add a question about a question about accessibility.

Thanks @phuedx - I have a few more questions about accessibility.

Are there any concerns about making a clickable area that navigates to a separate page without making it visually obvious? I'm thinking of people who may be visually impaired, have slow devices, or just difficulty interacting with their device suddenly arriving on a new page without understanding how. Pinging @Volker_E as an accessibility expert. Related to this, what experience should we provide for keyboard-only contexts, screen readers, etc?

Since we're going to be collecting feedback, could we start with something less unusual, like an obvious button/link - then see whether making the whole popup clickable is needed?

I had a couple of thoughts on this that I'm noting here:

What does PagePreviews do?

  • When you hover over or focus a link it opens a popup
  • The title attribute of the link is blanked so that the default tooltip isn't shown
  • The popup is divided into three sections:
    • The image (which is a link to the page)
    • The extract (which is a link to the page)
    • The footer (which has an icon that is a link to a preferences modal)
  • I couldn't find a way to tab into the popup (so no way to reach the settings through keyboard)
  • Pressing enter on the link takes you to that page

How is the IP Info popup different?

  • The interaction is on click (not on hover)
  • We need a way to give focus to the popup, so that when people click it, they're taken to Special:Contribs (unlike PagePreviews, where the link takes you to the same place)
  • There is only a single interactable item in the popup (no settings icon here)

What I think we should do
@Volker_E please guide, if this is the right approach.

  • Make sure that the info icon button has aria-haspopup property (docs) that points to the popup
  • The popup should have the dialog role (docs) and a corresponding aria-owns property
  • We'll also need to have a way that pressing tab after the info icon takes you to the popups link element (docs) and then out of the popup.
  • Focus inside the popup would be to the link to Special:Contribs. Like PagePreviews the entire content would be a link
  • Hitting esc anywhere should close the popup
STran updated the task description. (Show Details)