Comments (7)
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.
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.
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.
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.
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.
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.
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)
- Silence Jake diagram conformance warnings on CI
- Discussing how to focus navigate display: contents elements that are focusable in CSS reading-flow HOT 5
- Upcoming WHATNOT meeting on 2024-08-01 HOT 1
- Example in parallelism section needs to "queue a task" to handle the promise
- Meeting 5 for joint OpenUI-WHATWG/HTML-CSSWG task force on styleable form controls HOT 4
- Allow explicitly indicating an `unchecked` state for an `<input type="checkbox">`. HOT 3
- Upcoming WHATNOT meeting on 2024-08-08 HOT 1
- Discussing how to focus navigate absolute position elements that are focusable in CSS reading-flow
- Rationale for when invalid value default differs from missing value default HOT 8
- Chinese Translation of HTML Standard Completed HOT 3
- Script element schematic diagram for async/defer is not readable in dark mode HOT 6
- inconsistent input label `:active` and `:hover` behavior HOT 1
- Document "can have its URL rewritten" incorrectly rejects file:// URL with only query changed HOT 4
- HTMLConstructor construction steps: Incorrect exception specified in step 11. HOT 3
- Upcoming WHATNOT meeting on 2024-08-15 HOT 1
- Upcoming WHATNOT meeting on 2024-08-22
- Meeting 6 for joint OpenUI-WHATWG/HTML-CSSWG task force on styleable form controls HOT 1
- Specify primitive appearance for <meter> HOT 1
- Proposal for adding volume attribute to the <audio> element in HTML HOT 1
- Add src attribute to <template> to load a template from file HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html.