Connect HTML spec up to new CSS `interactivity` property

[w3cbot]

This is a tracker issue. Only discuss things here if they are a11y group internal meta-discussions about the issue. Contribute to the actual discussion at the following link:

§ whatwg/html#10956

[jenstrickland]

There is a lot of information in this.

mfreed7 noted:

I worry about the implementability of making the a11y tree not match the DOM tree in such a significant way.

I share concerns about the a11y tree and the DOM tree not matching, and am not sure if my concern is worthy.

He also noted:

My concerns are twofold: First, I wonder if the better “solution” to that problem is to require developers to simply nest the popover within the dialog. That provides out-of-the-box inertness and a11y.

I wonder if an implementor would use the inert on the inner popover within the dialog to make the dialog beneath the popover non-interactive.

Additionally, Alice, Sarah, and Scott itemize a number of concerns, so I wonder if this is worth an APA discussion. @AutoSponge, curious what you think.

[matatk]

@jenstrickland thanks for raising this. We talked about it in yesterday's APA call. This also relates to the TAG's design review of CSS Carousels, which is ongoing.

One of the concerns about the interactivity: inert property-value in the TAG review (shared by others) was that CSS looked to be giving people the ability to 'un-inert' subtrees of an element that had been marked 'inert'. That would have been different to how the HTML inert attribute works: with the HTML inert attribute, you cannot 'un-inert' anything below an inert element.

As noted in the TAG Carousels design review thread, the Chromium team changed the behaviour of interactivity: inert to match the HTML inert attribute's behaviour, which is good.

However, I am not (yet) clear on whether this PR would effectively revert that positive change. So that's one thing I'm keen to learn from this thread.

[AutoSponge]

With the prevention of de-intering, I think I'm fine with this.

[jenstrickland]

Regarding the update, mfreed wrote:

So the intention of this section was to provide the ways HTML makes things "inert", namely the behavior in CSS's parenthetical, plus the special behavior for modal dialogs.

This is reassuring that the HTML attribute inert will be prioritized over behavior set in CSS.

I share @matatk 's question regarding the children of the element with the inert attribute. With this proposal, can one uninert children of an inert element? Perhaps we should ask the CSS group explicitly?

With the changes to the code, I'm still not sure that CSS will not be used to override inert of part elements.

<ul>
    <li><p><var>node</var> is <span>inert via modal blockage</span>.</p></li>
    <li><p><var>node</var> or a <span>flat tree</span> ancestor of <var>node</var> has an
    <span data-x="css-interactivity">'interactivity'</span> property with a <span>computed
    value</span> of <span data-x="interactivity-inert">'inert'</span>.</p></li>
</ul>
<p class="note">The behavior of inert nodes is defined by the CSS concept of <span>inert</span>.
   Inert nodes generally cannot be focused, and user agents do not expose the inert nodes to
   accessibility APIs or assistive technologies. Inert nodes that are <span
   data-x="concept-command">commands</span> will become inoperable to users, in the manner described
   above.</p>

Although, beneath Modal dialogs and inert subtrees, it does appear that descendants are included in the inert.

Further down, at lines 80256–82049, also it does seem to confirm that. The following once again worries me that the intention is that CSS could override it.

 <div class="note">
    <p>Because this attribute is typically implemented using CSS, it's also possible to override it
    using CSS. For example:</p>

    <pre><code class="html">&lt;div inert style="interactivity: auto">&lt;/div></code></pre>

    <p>In this case, the <code class="html" data-x="">&lt;div></code> will not be <span>inert</span>
    because the author inline styles have higher precedence than the user agent styles on the same
    node.</p>

I'm struggling to understand the content, because there are a lot of this, then however, sorts of statements.