Addition: inert attribute mappings #410

scottaohara · 2022-05-31T23:23:02Z

closes #295

add inert attribute and mappings.

wondering if these need to call out that subtree elements should not be focusable re: their mappings, or if the comment here is sufficient? any other input on additional mappings that may need to be called out here are welcome.

Preview | Diff

closes #399 closes #295 add `inert` attribute and mappings. wondering if these need to call out that subtree elements should not be focusable re: their mappings, or if the comment here is sufficient? any other input on additional mappings that may need to be called out here are welcome.

scottaohara · 2022-07-08T15:13:47Z

Note: I've been drafting updates to the HTML spec for the inert subtree/attribute section. I will reference that here when the PR is made.

spectranaut

Couple questions :)

index.html

scottaohara · 2022-07-08T21:28:46Z

@spectranaut thank you for the review

scottaohara · 2022-10-11T12:08:28Z

cc @cookiecrook and @jcsteh for feedback and anything else you think needs to be called out in this spec for inert? Please see the companion HTML PR for inert that incorporates your feedback into that specification.
whatwg/html#8122

zcorpan · 2023-02-18T21:26:22Z

Hmm, so aria-hidden=true make the whole subtree be hidden, even if a descendant has aria-hidden=false (like CSS display: none). Maybe we need something in ARIA that is akin to CSS visibility, which can be hidden on an element and a descendant can still be shown with visibility: visible, to property define a mapping for inert?

Edit: or at least a spec hook to do so, which html-aam can use to explain modal dialog in an inert subtree.

zcorpan · 2023-02-18T21:43:11Z

Demo of modal dialog inside <div inert>:
http://software.hixie.ch/utilities/js/live-dom-viewer/saved/11311

In Chrome, Safari, Firefox, the button "show (in inert div)" is not clickable, but the "close" button in the modal dialog is.

JAWS-test · 2023-02-21T05:15:21Z

In Chrome, Safari, Firefox, the button "show (in inert div)" is not clickable, but the "close" button in the modal dialog is.

On Windows I get a different result: in Firefox both buttons are clickable and the inert area is fully passed to the Accessbility API

zcorpan · 2023-02-21T23:27:07Z

Sorry, I meant Firefox Nightly. (inert is not yet enabled on release because this spec change is not yet implemented, see https://bugzilla.mozilla.org/show_bug.cgi?id=1767561 )

What I mean to show with the demo is that a modal dialog should itself be not-inert, even if it has an ancestor with an inert attribute.

cookiecrook · 2023-02-28T23:07:12Z

index.html

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


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

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.

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.

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

I can file a spec issue.

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

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

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>  <button aria-haspopup=menu ...> invokes menu and sets parent to inert </button> <div role=menu popover ...>  </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)

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.

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

@alice thank you for the link and background!

scottaohara · 2023-03-03T16:33:31Z

@zcorpan per your previous comment

Edit: or at least a spec hook to do so, which html-aam can use to explain modal dialog in an inert subtree.

with linked example and

What I mean to show with the demo is that a modal dialog should itself be not-inert, even if it has an ancestor with an inert attribute.

to my understanding that's already specified in HTML 6.3.1 Modal dialogs and inert subtrees - reference in this PR. So i don't think we need anything else?

Re: your example contains a button and the dialog in the inert subtree, the dialog is spec'd to escape it. "subject escapes inertness of ancestors" so that's why the button, and its contents are accessible.

followed on by the note

The dialog element's showModal() method causes this mechanism to trigger, by adding the dialog element to its node document's top layer.

again, per my response in the comment thread with James, HTML could leverage this to allow popovers to also escape inert, since they too go to the top layer. But per your example and the button that invokes such elements being within an inert parent - this would likely require the topic of inert=false to be re-opened.

Edit: however i also realize i may be reading way too much into the note and what "this mechanism" really means. but if i'm wrong, maybe that could use some clarification?

zcorpan · 2023-03-08T16:24:27Z

I think the HTML spec is correct about which nodes are inert and which are not, but this PR mapping the inert attribute to aria-hidden=true (which makes the element itself and all of its descendants hidden in the a11y tree) doesn't match the HTML spec because it means a descendant modal dialog (which should be uninerted) is still hidden in the a11y tree.

More correct would be to say something like "Nodes that are inert are not exposed to an accessibility API. Note: an inert node can have descendants that are not inert (e.g. a modal dialog element in HTML). Note: This is similar to aria-hidden, except aria-hidden=true will unconditionally hide all descendants."

scottaohara · 2023-03-08T18:40:37Z

@zcorpan re:

Note: an inert node can have descendants that are not inert (e.g. a modal dialog element in HTML).

will that be true for any other element aside from modal dialogs? my understanding is that's not true right now, and per my mention of inert=false not being entertained, is this actually something that would happen?

Seems the PR could either be updated to specifically mention that if an element (a modal dialog) escapes being inert, then it should no longer be considered aria-hidden=true. Or, the PR is further adjusted to be more inline with your suggestion that inert doesn't directly map to aria-hidden=true, but it and its subtree behave similarly, but descendants of an inert parent can be marked as not inert - e.g., a modal dialog.

@cookiecrook @aleventhal thoughts on the above? and specifically, are there any other platform mappings we'd need to note here if the attribute isn't just referring to aria-hidden's mappings in core aam?

cookiecrook · 2023-03-09T00:22:03Z

I think Simon's normative suggestion and first note are correct:

Nodes that are inert are not exposed to an accessibility API. Note: an inert node can have descendants that are not inert (e.g. a modal dialog element in HTML).

But I would not include the second note:

~~Note: This is similar to aria-hidden, except aria-hidden=true will unconditionally hide all descendants.~~

As that may change further with w3c/aria#1256 and the implementations don't currently align on that statement either.

zcorpan · 2023-03-09T10:41:26Z

@scottaohara it might be true in the future if we introduce other ways to escape inertness.

scottaohara · 2023-03-09T12:33:44Z

@cookiecrook @zcorpan thank you both. i'll work on getting this updated.

should we actually update the ARIA spec to mention inert in https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion

that seems it might be a good place for a longer explanation of how to handle inert / potential children which are no longer inert, which could then be linked to from html aam / other aams which might need it.

@zcorpan

incorporates feedback from @zcorpan and @cookiecrook

index.html

scottaohara added 3 commits May 31, 2022 19:22

Merge branch 'gh-pages' into inert-mapping

f2f6bec

Merge branch 'gh-pages' into inert-mapping

e2a580d

jnurthen requested review from spectranaut and cyns June 2, 2022 17:15

domenic mentioned this pull request Jun 30, 2022

Inert subtree section is missing requirement that it should NOT be exposed to accessibility whatwg/html#7796

Closed

Merge branch 'gh-pages' into inert-mapping

58d9b57

spectranaut requested changes Jul 8, 2022

View reviewed changes

index.html Outdated Show resolved Hide resolved

index.html Outdated Show resolved Hide resolved

scottaohara commented Jul 8, 2022

View reviewed changes

index.html Outdated Show resolved Hide resolved

scottaohara commented Jul 8, 2022

View reviewed changes

index.html Outdated Show resolved Hide resolved

scottaohara added 2 commits July 8, 2022 16:56

update comment per feedback review

7515ee4

Merge branch 'gh-pages' into inert-mapping

b460767

rework inert comments

f4a403d

This was referenced Jul 18, 2022

Support for inert coming to Chromium soon act-rules/act-rules.github.io#1842

Open

Add support for inert attribute Siteimprove/alfa#1140

Open

Merge branch 'gh-pages' into inert-mapping

fd09eef

cookiecrook reviewed Feb 28, 2023

View reviewed changes

cookiecrook approved these changes Mar 2, 2023

View reviewed changes

zcorpan mentioned this pull request Mar 2, 2023

Consider allowing aria-hidden=false on visibly rendered elements inside an ancestor with aria-hidden=true w3c/aria#1256

Closed

Merge branch 'gh-pages' into inert-mapping

ff9250f

Merge branch 'gh-pages' into inert-mapping

7763687

Merge branch 'gh-pages' into inert-mapping

20b4c54

update inert mapping per review comments

7e5d42f

incorporates feedback from @zcorpan and @cookiecrook

scottaohara commented Mar 22, 2023

View reviewed changes

index.html Outdated Show resolved Hide resolved

Update index.html

ba37b76

zcorpan approved these changes Mar 22, 2023

View reviewed changes

Merge branch 'gh-pages' into inert-mapping

ed1260d

cookiecrook approved these changes Mar 22, 2023

View reviewed changes

add changelog entry

a7f0053

scottaohara requested a review from spectranaut March 23, 2023 11:09

Merge branch 'gh-pages' into inert-mapping

f362e5e

scottaohara merged commit 4f3c8b2 into gh-pages Mar 28, 2023

scottaohara deleted the inert-mapping branch March 28, 2023 17:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addition: inert attribute mappings #410

Addition: inert attribute mappings #410

scottaohara commented May 31, 2022 •

edited by pr-preview bot

Loading

scottaohara commented Jul 8, 2022

spectranaut left a comment

scottaohara commented Jul 8, 2022

scottaohara commented Oct 11, 2022

zcorpan commented Feb 18, 2023 •

edited

Loading

zcorpan commented Feb 18, 2023

JAWS-test commented Feb 21, 2023

zcorpan commented Feb 21, 2023

cookiecrook Feb 28, 2023

scottaohara Mar 1, 2023

cookiecrook Mar 2, 2023 •

edited

Loading

zcorpan Mar 2, 2023

zcorpan Mar 2, 2023

zcorpan Mar 3, 2023

scottaohara Mar 3, 2023 •

edited

Loading

scottaohara Mar 3, 2023

alice Mar 29, 2023

scottaohara Mar 29, 2023

scottaohara commented Mar 3, 2023 •

edited

Loading

zcorpan commented Mar 8, 2023

scottaohara commented Mar 8, 2023 •

edited

Loading

cookiecrook commented Mar 9, 2023

zcorpan commented Mar 9, 2023

scottaohara commented Mar 9, 2023

Addition: inert attribute mappings #410

Addition: inert attribute mappings #410

Conversation

scottaohara commented May 31, 2022 • edited by pr-preview bot Loading

scottaohara commented Jul 8, 2022

spectranaut left a comment

Choose a reason for hiding this comment

scottaohara commented Jul 8, 2022

scottaohara commented Oct 11, 2022

zcorpan commented Feb 18, 2023 • edited Loading

zcorpan commented Feb 18, 2023

JAWS-test commented Feb 21, 2023

zcorpan commented Feb 21, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cookiecrook Mar 2, 2023 • edited Loading

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

scottaohara Mar 3, 2023 • edited Loading

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

scottaohara commented Mar 3, 2023 • edited Loading

zcorpan commented Mar 8, 2023

scottaohara commented Mar 8, 2023 • edited Loading

cookiecrook commented Mar 9, 2023

zcorpan commented Mar 9, 2023

scottaohara commented Mar 9, 2023

scottaohara commented May 31, 2022 •

edited by pr-preview bot

Loading

zcorpan commented Feb 18, 2023 •

edited

Loading

cookiecrook Mar 2, 2023 •

edited

Loading

scottaohara Mar 3, 2023 •

edited

Loading

scottaohara commented Mar 3, 2023 •

edited

Loading

scottaohara commented Mar 8, 2023 •

edited

Loading