<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Use NVDA in Firefox to Navigate through the first code example provided below.  (use down arrow keystrokes to navigate the page)</li>
<li>Notice how the graphic elements get announced as clickable.</li>
</ol>

<p dir="auto">Link to code example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang='en'&gt;

&lt;head&gt;
    &lt;title&gt;Basic HTML5 document&lt;/title&gt;
    &lt;meta charset='utf-8'&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;
            &lt;img src=&quot;https://picsum.photos/200/300&quot; alt=&quot;test text&quot;/&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // event delegation
        document.querySelector('#root').addEventListener('click', () =&gt; { console.log('click') })
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html lang='en'&gt;

&lt;head&gt;
    &lt;title&gt;Basic HTML5 document&lt;/title&gt;
    &lt;meta charset='utf-8'&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="root"&gt;
            &lt;img src="https://picsum.photos/200/300" alt="test text"/&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // event delegation
        document.querySelector('#root').addEventListener('click', () =&gt; { console.log('click') })
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre></div>
<p dir="auto">From the above minimal example, you can see how events delegated to the root cause NVDA to announce the element as clickable.</p>
<p dir="auto">If we take this other example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang='en'&gt;

&lt;head&gt;
    &lt;title&gt;Basic HTML5 document&lt;/title&gt;
    &lt;meta charset='utf-8'&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;
            &lt;img src=&quot;https://picsum.photos/200/300&quot; alt=&quot;test text&quot;/&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // event delegation
        document.addEventListener('click', () =&gt; { console.log('click') })
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html lang='en'&gt;

&lt;head&gt;
    &lt;title&gt;Basic HTML5 document&lt;/title&gt;
    &lt;meta charset='utf-8'&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="root"&gt;
            &lt;img src="https://picsum.photos/200/300" alt="test text"/&gt;
    &lt;/div&gt;

    &lt;script&gt;
        // event delegation
        document.addEventListener('click', () =&gt; { console.log('click') })
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre></div>
<p dir="auto">The <a target="_blank" rel="noopener noreferrer" href=""><img style="max-width: 100%;"></a> element will not be read as clickable.</p>
<p dir="auto">Putting handlers on the root is a loss of semantics, and causes the intention of handlers to be no longer communicated well to the assistive technology.</p>

<h2 dir="auto">The current behaviour</h2>
<p dir="auto">NVDA reads clickable due to event delegation performed at the root level.</p>
<h2 dir="auto">The expected behaviour</h2>
<p dir="auto">NVDA should not read clickable.<br>
Could react provide a way for authors to arbitrarily delegate events to the document node?</p>
<p dir="auto">Consider the following:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var MixinNameHere = {

    componentDidMount: function() {
         // Do some stuff yo!
     }
}

var ComponentNameHere = React.createClass({

     mixins: [MixinNameHere],

     componentDidMount: function() {
         // So some stuff here, then (or before) the parent should be called.
     }
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">MixinNameHere</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>

    <span class="pl-en">componentDidMount</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
         <span class="pl-c">// Do some stuff yo!</span>
     <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">var</span> <span class="pl-v">ComponentNameHere</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>

     <span class="pl-c1">mixins</span>: <span class="pl-kos">[</span><span class="pl-v">MixinNameHere</span><span class="pl-kos">]</span><span class="pl-kos">,</span>

     <span class="pl-en">componentDidMount</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
         <span class="pl-c">// So some stuff here, then (or before) the parent should be called.</span>
     <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">The above will not work because as you can see I have declared the existence of <code class="notranslate">componentDidMount()</code> twice. This would be fair if we didn't have libraries such as underscore or similar libraries that make the use of <code class="notranslate">_.extend</code> which then lets us do:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="ClassName.__super__.method.apply(this, arguments);"><pre class="notranslate"><span class="pl-v">ClassName</span><span class="pl-kos">.</span><span class="pl-c1">__super__</span><span class="pl-kos">.</span><span class="pl-c1">method</span><span class="pl-kos">.</span><span class="pl-en">apply</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">,</span> <span class="pl-smi">arguments</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">So my question is, as some one who likes to abstract common logic out and use inheritance (I mix backbone with react) - <em>Why can I not use inheritance to say "did my component mount, yes do this - oh and call the parent</em></p>