additional accessibility guidance for popover #8791

scottaohara · 2023-01-27T23:33:03Z

adds two notes for the popover attribute and its target attributes to provide author guidance to ensure best accessibility practices for their popovers.
modifies the popover examples to ensure the popover follows the triggering element in the DOM reading order. This is NOT a requirement, but it will often be the way it SHOULD be done. though, i am not sure we want to make that a proper ‘should’ - hence it’s being added as a note.

closes whatwg#8714 - adds two notes for the popover attribute and its target attributes to provide author guidance to ensure best accessibility practices for their popovers. - modifies the popover examples to ensure the popover follows the triggering element in the DOM reading order. This is NOT a requirement, but it will often be the way it SHOULD be done. though, i am not sure we want to make that a proper ‘should’ - hence it’s being added as a note.

scottaohara · 2023-01-27T23:50:35Z

sorry for the build bug here. i'm not exactly sure what it's asking me to fix (as per my series of extra commits that demonstrate my lack of understanding)

source

@smhigley

thank you @smhigley for the suggestions. changed a 'should; to 'will need to' so as to not use a 'should' within a note.

annevk · 2023-02-14T07:53:25Z

source

@@ -81269,6 +81269,17 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
  won't be rendered until it becomes shown, at which point it will be rendered on top of other page
  content.</p>

+  <div class="note">
+    <p>The <code data-x="attr-popover">popover</code> attribute is a global attribute that allows


Single-space indentation and wrapping at a 100 columns please.

annevk · 2023-02-14T07:55:33Z

source

@@ -81931,28 +81942,34 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
  attribute is specified, then that attribute's value must be the ID of element with the <code
  data-x="attr-popover">popover</code> attribute.</p>

+  <p class="note">To help ensure a popover will be programmatically exposed in a logical reading
+  order to users of assistive technology, for most authors will need to place the popover


"for most" doesn't read correctly to me.

ah yup. that was a rewrite of the sentence that i clearly didn't finish. will fix.

How about this?

It is recommended to place the popover element immediately after the triggering element in the DOM in order to ensure the popover will be programatically exposed in a logical reading order to users of assistive technology.

annevk · 2023-02-14T07:56:43Z

source

+    <span data-x="custom element">custom elements</span>. However, it will often be the case that
+    authors will need to ensure proper accessibility semantics are also provided to these otherwise
+    generic elements. For instance, by also specifying the appropriate ARIA roles and properties
+    which represent the type of popover they have created.</p>


I think it would be more helpful for readers if this were an example.

there were already examples in the next section that i had relied upon, but glad to can add another one here.

So in particular what I'm looking for is an example where it's made accessible through augmentation of the markup. I don't think we cover that at the moment?

Should there also be a sentence or two talking about how you can also use non-generic, semantic elements like <figure> or even <dialog>? Since I presume we would prefer that over <div> with ARIA attributes.

annevk · 2023-02-14T07:59:41Z

source

@@ -81931,28 +81942,34 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
  attribute is specified, then that attribute's value must be the ID of element with the <code
  data-x="attr-popover">popover</code> attribute.</p>

+  <p class="note">To help ensure a popover will be programmatically exposed in a logical reading
+  order to users of assistive technology, for most authors will need to place the popover
+  element immediately after the triggering element in the DOM.</p>


Why is this the case actually? Wouldn't a popover not be rendered and therefore not be read?

maybe i need to clarify this, as your question isn't inline with what this is meant to be about.

yes, if a popover is not rendered it's not going to be read. but when one is rendered it'll generally be best to have it in the DOM directly after the trigger that invoked it so that someone using a screen reader and navigating using the virtual cursor (not tab key) will be able to easily find the popover (if it's placed at the bottom of the DOM, for instance, it'll be quite difficult to find, and placing it there sort of defeats one of the benefits to this feature).

annevk · 2023-02-14T07:59:45Z

source

-&lt;/button></code></pre>
+&lt;/button></code>
+
+&lt;ul popover=auto id="foo">


id=links then?

annevk · 2023-02-14T08:00:30Z

@mfreed7 @josepharhar @aleventhal presumably you're planning on reviewing this as well?

scottaohara · 2023-02-14T11:55:26Z

thanks for the initial review @annevk. i'll work on updating the PR today or tomorrow.

mfreed7

Generally LGTM

mfreed7 · 2023-02-14T18:51:54Z

source

+    <span data-x="custom element">custom elements</span>. However, it will often be the case that
+    authors will need to ensure proper accessibility semantics are also provided to these otherwise
+    generic elements. For instance, by also specifying the appropriate ARIA roles and properties
+    which represent the type of popover they have created.</p>


Should there also be a sentence or two talking about how you can also use non-generic, semantic elements like <figure> or even <dialog>? Since I presume we would prefer that over <div> with ARIA attributes.

scottaohara · 2023-03-06T15:47:47Z

with the attributes changing, this'll need a bit more work as well. still on my radar, just trying to get time to work on it

this PR is replacing whatwg#8791 due to the changes to the related popovertarget attributes. i've added more examples and incorporated feedback that was provided from the review of the original PR.

scottaohara · 2023-03-14T16:50:47Z

closing this PR and replacing with #9024.

I'll leave the branch alone for now, just in case something was missed. but likely fine to delete the branch

Supersedes #8791. Fixes #8714.

scottaohara and others added 4 commits January 27, 2023 15:28

fix typo in code sample

4b2cf91

Update source

246a529

Update source

4486f88

smhigley reviewed Jan 28, 2023

View reviewed changes

source Outdated Show resolved Hide resolved

incorporate suggested feedback

7586e31

thank you @smhigley for the suggestions. changed a 'should; to 'will need to' so as to not use a 'should' within a note.

This comment was marked as outdated.

Sign in to view

annevk reviewed Feb 14, 2023

View reviewed changes

annevk added the accessibility Affects accessibility label Feb 14, 2023

mfreed7 approved these changes Feb 14, 2023

View reviewed changes

annevk added the topic: popover The popover attribute and friends label Feb 16, 2023

scottaohara mentioned this pull request Mar 14, 2023

accessibility popover guidance #9024

Merged

scottaohara closed this Mar 14, 2023

annevk pushed a commit that referenced this pull request Mar 20, 2023

Accessibility popover guidance

dbe5f6c

Supersedes #8791. Fixes #8714.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

additional accessibility guidance for popover #8791

additional accessibility guidance for popover #8791

scottaohara commented Jan 27, 2023 •

edited by pr-preview bot

scottaohara commented Jan 27, 2023

This comment was marked as outdated.

annevk Feb 14, 2023

annevk Feb 14, 2023

scottaohara Feb 14, 2023

josepharhar Feb 14, 2023

annevk Feb 14, 2023

scottaohara Feb 14, 2023

annevk Feb 14, 2023

mfreed7 Feb 14, 2023

annevk Feb 14, 2023

scottaohara Feb 14, 2023

annevk Feb 14, 2023

annevk commented Feb 14, 2023

scottaohara commented Feb 14, 2023

mfreed7 left a comment

mfreed7 Feb 14, 2023

scottaohara commented Mar 6, 2023

scottaohara commented Mar 14, 2023 •

edited

additional accessibility guidance for popover #8791

additional accessibility guidance for popover #8791

Conversation

scottaohara commented Jan 27, 2023 • edited by pr-preview bot

scottaohara commented Jan 27, 2023

This comment was marked as outdated.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annevk commented Feb 14, 2023

scottaohara commented Feb 14, 2023

mfreed7 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scottaohara commented Mar 6, 2023

scottaohara commented Mar 14, 2023 • edited

scottaohara commented Jan 27, 2023 •

edited by pr-preview bot

scottaohara commented Mar 14, 2023 •

edited