Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

additional accessibility guidance for popover #8791

Closed
wants to merge 5 commits into from
Closed

additional accessibility guidance for popover #8791

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ef72edd
additional accessibility guidance for popover
scottaohara Jan 27, 2023
4b2cf91
fix typo in code sample
scottaohara Jan 27, 2023
246a529
Update source
scottaohara Jan 27, 2023
4486f88
Update source
scottaohara Jan 27, 2023
7586e31
incorporate suggested feedback
scottaohara Jan 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 29 additions & 12 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

authors flexibility to ensure popover functionality can be applied to the most appropriate semantic element which represents the purpose of the popover.</p>
<p>Authors can use the <code data-x="attr-popover">popover</code> attribute on generic
elements, such as <code>div</code>, or author defined
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

</div>

<p>The <code data-x="attr-popover">popover</code> attribute is an <span>enumerated
attribute</span>. The following table lists the states for this attribute:</p>

Expand Down Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

element immediately after the triggering element in the DOM.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).


<div class="example">
<p>The following shows how <code data-x="attr-popover-show-target">popovershowtarget</code> can
be used to open a popover:</p>

<pre><code class="html">&lt;div popover=auto id="foo">
This is a popover!
&lt;/div>

&lt;button popovershowtarget="foo">
<pre><code class="html">&lt;button popovershowtarget="foo">
Show a popover
&lt;/button></code></pre>
&lt;/button></code>

&lt;ul popover=auto id="foo">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

id=links then?

&lt;!-- This is a popover list of links! -->
&lt;li>&lt;a href="...">...&lt;/a>&lt;/li>
...
&lt;/ul></pre>

<p>The following shows how <code data-x="attr-popover-toggle-target">popovertoggletarget</code>
can open and close a manual popover, which can't be closed with light dismiss:</p>

<pre><code class="html">&lt;div popover=manual id="foo">
This is a popover!
&lt;/div>

&lt;button popovertoggletarget="foo">
<pre><code class="html">&lt;button popovertoggletarget="foo">
Show or hide a popover
&lt;/button></code></pre>
&lt;/button></code>

&lt;div popover=manual id="foo">
This is a popover!
&lt;/div></pre>
</div>

<span data-x="concept-element-dom">DOM interface</span>:
Expand Down