Giter Club home page Giter Club logo

Comments (7)

keithamus avatar keithamus commented on August 22, 2024 1

I think not all of popover requires "user activity to complete", because if you require activation (input anything, require submitting etc), that should be done via <dialog>. (IIUC, this is the important difference between dialog and popover)

Right. popover is a low-level primitive which allows for interactive and non-interactive floating UI. <dialog> is a semantic dialog (it has role=dialog) but can still be managed with popover (e.g. <dialog popover>) and is a perfectly viable pattern of a non-modal dialog. <dialog>.showModal() is different in that it focus traps but either one could contain interactive elements.

I agree that, but it depends on understanding of WCAG 2.2.3 for me.

The test procedure is quite clear on WCAG 2.2.3:

Determine if any timed interactions are present (client and/or server side).

Any interaction that is timed fails the criterion. A <toast> which pops up a temporal message fails the criterion. This doesn't mean it cannot de-duplicate but the user has to be given sufficient time to assess the contents of the toast. Consequently we need to tread very carefully in what we do to encode these features into the platform.


Going back to the original request though; the AbortSignal on CloseWatcher destroys the close watcher (it does not "close" the close watcher, the "close" event is not fired, the close watcher is effectively removed from the stack). Therefore it is not equivalent to setTimeout(() => popover.hidePopover(), 1000).

from html.

keithamus avatar keithamus commented on August 22, 2024

The solution you present that exists today is different to the mechanics of CloseWatcher's signal property. It seems like you're suggesting the signal should call hidePopover after a certain time, is this correct?

Can you explain the broader motivating use case for this please? Are you trying to make time sensitive UI? Time based UI is not in conformance with WCAG 2.2.3 and so ideally we would not encode such patterns into the web.

from html.

Jxck avatar Jxck commented on August 22, 2024

@keithamus

you're suggesting the signal should call hidePopover after a certain time, is this correct?

Yes.

Can you explain the broader motivating use case for this please?

As spec itself describes in example, there are use-cases which close after timeout period.

setTimeout(function () {
  outSpan.hidePopover();
}, 10000);

https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute

for Example, OpenUI toast proposal also mentions that.

Toasts are often displayed in the corner of app UI, and often disappear on a timeout.
https://open-ui.org/components/toast.research/

Toast was the origin of popover proposal (<toast> -> <popup> -> popover), so I think toast can be build upon popover today.
Isn't it obvious that there is a use case?

from html.

keithamus avatar keithamus commented on August 22, 2024

I'm aware of the general use case but I was more directly asking you for your use case.

Making something allowable per the expressivity of a primitive, and encoding something into the standard as an ordained pattern are two different things, however. We need to be careful that we are not creating solutions which make it far easier to fall out of conformance with WCAG.

from html.

Jxck avatar Jxck commented on August 22, 2024

I don't make sure this guideline really applicable for popover too.

The objective of this technique is to provide users with all the time they need to complete an activity.

I think not all of popover requires "user activity to complete", because if you require activation (input anything, require submitting etc), that should be done via <dialog>. (IIUC, this is the important difference between dialog and popover)

We need to be careful that we are not creating solutions which make it far easier to fall out of conformance with WCAG.

I agree that, but it depends on understanding of WCAG 2.2.3 for me.
If some <toast> components pop-overs temporal message to the user in multiple times in short-period, should it be explicitly closed by user every time ?
in that case, I misunderstood popover use-cases, and hope it be explicitly guided in the specs or so too.

from html.

Jxck avatar Jxck commented on August 22, 2024

Going back to the original request

That's my fault, so it just fine with showPopover({ signal }).

Any interaction that is timed fails the criterion. A which pops up a temporal message fails the criterion.

Interesting. I'm keen to see comments from others too.
(and in that case, It seems better to remove the setTimeout() example from spec to avoid misreadings).

from html.

lukewarlow avatar lukewarlow commented on August 22, 2024

Going back to the original request though; the AbortSignal on CloseWatcher destroys the close watcher (it does not "close" the close watcher, the "close" event is not fired, the close watcher is effectively removed from the stack). Therefore it is not equivalent to setTimeout(() => popover.hidePopover(), 1000).

Came here to say this. CloseWatcher's signal is for use to for example cleanup on element removal. Popover (and modal dialog)'s close watcher has this behaviour built in so we don't really need a signal in the close watcher sense.

If we imagine that signal will call hidePopover instead. Then other than a timeout case (Which may or may not be bad), most other signal patterns don't seem to apply?

from html.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.