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

Addition: inert attribute mappings #410

Merged
merged 16 commits into from
Mar 28, 2023
Merged

Addition: inert attribute mappings #410

Changes from 8 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
8c6db4c
Addition: inert attribute mappings
scottaohara May 31, 2022
f2f6bec
Merge branch 'gh-pages' into inert-mapping
scottaohara Jun 1, 2022
e2a580d
Merge branch 'gh-pages' into inert-mapping
scottaohara Jun 2, 2022
58d9b57
Merge branch 'gh-pages' into inert-mapping
scottaohara Jul 8, 2022
7515ee4
update comment per feedback review
scottaohara Jul 8, 2022
b460767
Merge branch 'gh-pages' into inert-mapping
scottaohara Jul 8, 2022
f4a403d
rework inert comments
scottaohara Jul 9, 2022
fd09eef
Merge branch 'gh-pages' into inert-mapping
scottaohara Oct 11, 2022
ff9250f
Merge branch 'gh-pages' into inert-mapping
scottaohara Mar 2, 2023
7763687
Merge branch 'gh-pages' into inert-mapping
scottaohara Mar 8, 2023
20b4c54
Merge branch 'gh-pages' into inert-mapping
scottaohara Mar 9, 2023
7e5d42f
update inert mapping per review comments
scottaohara Mar 21, 2023
ba37b76
Update index.html
scottaohara Mar 22, 2023
ed1260d
Merge branch 'gh-pages' into inert-mapping
scottaohara Mar 22, 2023
a7f0053
add changelog entry
scottaohara Mar 23, 2023
f362e5e
Merge branch 'gh-pages' into inert-mapping
scottaohara Mar 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
20 changes: 20 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4250,6 +4250,26 @@ <h3>HTML Attribute State and Property Mappings</h3>
<td class="ax"><div class="general">Not mapped</div></td>
<td class="comments"></td>
</tr>
<tr tabindex="-1" id="att-inert">
<th>`inert`</th>
<td class="elements">
<a data-cite="html/interaction.html#the-inert-attribute">HTML elements</a>
</td>
<td class="aria"><a class="core-mapping" href="#ariaHiddenTrue">`aria-hidden="true"`</a></td>
<td class="ia2">Use WAI-ARIA mapping</td>
<td class="uia">Use WAI-ARIA mapping</td>
<td class="atk">Use WAI-ARIA mapping</td>
<td class="ax">Use WAI-ARIA mapping</td>
<td class="comments">
<p>An inert element, nor the nodes if its subtree can receive keyboard focus, respond to pointer events,
or be otherwise reachable by assistive technology.
</p>
<p>A `dialog` element can escape an inert subtree when the `dialog` is in the modal state, and rendered in the browser's
<a href="https://fullscreen.spec.whatwg.org/#top-layer">top layer</a> by use of the `showModal()` method.
See also <a data-cite="html/interaction.html#modal-dialogs-and-inert-subtrees">Modal dialogs and inert subtrees</a>.
Copy link
Collaborator

Choose a reason for hiding this comment

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

How should a <div role="dialog"> or a <div role="menu"> achieve the same?

Copy link
Member Author

Choose a reason for hiding this comment

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

possibly by using the popover attribute, though i don't believe that functionality is available right now. we should open an issue for that separate from this.

Copy link
Collaborator

@cookiecrook cookiecrook Mar 2, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

As I read it, popover is not intended for modals like <div role="dialog" aria-modal="true">. The Dialog API is the only option for a modal. Regardless, I agree that's addressable as a separate issue.

Copy link
Member

Choose a reason for hiding this comment

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

Right, ARIA would need a way of unhiding a child, see #410 (comment)

I can file a spec issue.

Copy link
Member

Choose a reason for hiding this comment

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

You had filed one already :) w3c/aria#1256

Copy link
Member

Choose a reason for hiding this comment

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

I'm now confused what you mean with your first message in this thread.

Copy link
Member Author

@scottaohara scottaohara Mar 3, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

dialog is the only element, when shown as a modal, which can escape its parent inert element and become re-exposed in the top layer.

so, per James's question, there is presently no way for someone to invoke an accessible ARIA dialog (modal or otherwise), or a menu if someone wanted to trap focus/screen readers in those elements, if it was contained within an inert container.

though popover is not allowed for HTML modal dialogs, the attribute does send an element to the top layer, so my mention of the attribute is that it could be a way for someone to do something like:

<div inert> <!-- attribute added when nested button is activated -->
  <button aria-haspopup=menu ...>
     invokes menu and sets parent to inert
  </button>
  <div role=menu popover ...> 
     <!-- menu items here and even though within an inert container, 
             since its in the top layer now, it COULD now be accessible --> 
   </div>
</div>

somewhere in some github thread that i've since lost track of, when implementation of inert was still being discussed, I had mentioned it would be great if inert=false would un-inert a child node of an inert parent. I don't understand the rational as to why that wasn't entertained further, other than potential implementation complexity. But back to James's original question, because of that decision there is no way to do what James was asking with HTML now, and aria-hidden=false wouldn't/shouldn't be expected to be a way to achieve this, as even if it did re-expose a part of the inert content, by itself it wouldn't undo the browser preventing click/focus to go to the aria-hidden=false content (as applicable if it were to consist of actionable elements)

Copy link
Member Author

Choose a reason for hiding this comment

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

marking this thread as unresolved just to make sure this related discussion about inert/aria-hidden=false isn't missed by those being directed to this issue.

Copy link

Choose a reason for hiding this comment

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

it would be great if inert=false would un-inert a child node of an inert parent

Coming in very late, and obviously this has no bearing on the outcome of this PR, but I talked a bit about the rationale here: https://www.igalia.com/chats/alice-and-rob (you can search for "one way" in the transcript rather than listen to the whole rambling conversation).

Copy link
Member Author

Choose a reason for hiding this comment

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

@alice thank you for the link and background!

</p>
</td>
</tr>
<tr tabindex="-1" id="att-indeterminate">
<th>`indeterminate [IDL]`</th>
<td class="elements">
Expand Down