title: How to get 'aria-label' attribute of <a> tag when <a> contains child elements using javascript
body: <p>I am trying to read 'aria-label' attribute of an anchor tag . But i am getting null value since my code reads child element(<code>&lt;use&gt;&lt;/use&gt;</code>) rather than parent element(<code>&lt;a&gt;&lt;/a&gt;</code>). Below is my HTML and js code.</p>
  
  <p>HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var inputs = document.querySelectorAll("a");
  for (var i = 0; i &lt; inputs.length; i++) {
    inputs[i].addEventListener("click", function(e) {
      console.log(inputs[i].getAttribute("aria-label"));
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" role="menuitem" id="main-6" aria-haspopup="true" aria-label="Choose your country site"&gt;
    &lt;svg class="header-redirect--icon-w"&gt;
       &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-country"&gt;&lt;/use&gt;
    &lt;/svg&gt;
    &lt;i class="i-globe-w"&gt;&lt;/i&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>