title: Aria-label makes nested content not visible for screen reader
body: <p>I'm displaying some numeric info to the user describing it by using graphic icon label. I want to make it readable by screen reader using the <code>aria-label</code> tag. However, when I add this attribute, it makes the nested content not visible for screen readers. Below is the structure how the html looks like.</p>
  <pre><code>&lt;ul&gt;
      &lt;li tabindex=&quot;0&quot; aria-label=&quot;Counter 1&quot;&gt;
          &lt;div&gt;
              &lt;i aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
              &lt;span class=&quot;counter&quot;&gt;{{properties.counter1}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li tabindex=&quot;0&quot; aria-label=&quot;Counter 2&quot;&gt;
          &lt;div&gt;
              &lt;i aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
              &lt;span&gt;{{properties.counter2}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>I was trying to use <code>aria-describedby</code> attribute, but it didn't work with dynamically created id.</p>
  <p>Below is the screenshot from the chrome dev tools accessibility tab. I wonder why labeling makes content value omitted.
  <a href="https://i.stack.imgur.com/4DoGS.png" rel="nofollow noreferrer">Screenshot</a></p>