How labels for interactions are found

When browser agent detects that an interaction started from the user interacting with some element (for example clicking a button), we try to label the element with the first found non-empty:

1. A data-plumbr-service attribute on element or parent:

   <a href="/profile/23" data-plumbr-service="User Profile">John Doe</a>
   
   <p data-plumbr-service="Editable Features">
   	<span>Features to configure</span>
   	<label><input type="checkbox" /> Price</label>
   	<label><input type="checkbox" /> SKUs</label>
   </p>
   

2. A <label> element that has for attribute that matches the element id:

   <input type="checkbox" id="newsletter">
   <label for="newsletter">Send me marketing e-mails</label>

3. Within the DOM tree (starting from interaction target) the first found:
   1. A parent <label> element

      <label>
          <input type="checkbox" id="newsletter">
          Send me marketing e-mails
      </label>

   2. An element with aria-label attribute

      <input type="text" name="location" aria-label="Location">

   3. An element with aria-labelledby attribute

      <input type="text" name="location" aria-labelledby="location-help">
      <p id="location-help">Enter Location</p>
      

4. <img> alt attribute

   <a href="/sale">
       <img src="/img/sale.png" alt="Hot Sales">
   </a>

    

5. <img> filename

   <a href="/sale"><img src="/img/sale.png"></a>

    

6. <input> value if type is button, radio or submit

   <input type="submit" value="Purchase">

    

7. The text of first <option> element in <select>

   <select name="delivery">
       <option value="0">Select Delivery Method</option>
       <option value="1">Courier</option>
   </select>

    

8. title attribute of <i>

   <i class="fa fa-times" title="Remove">

    

9. The text in closest parent <a>, <button>, <label>, <span>, <td> or <th>

   <a href="#">Continue to checkout</a>

    

Should none of these be found, a css selector is constructed from the target element and it’s parents.

<ul id="todo-list">
    <li class="item">
        <input type="text" name="item[]" value="Test labels">
    </li>
</ul>

Results in: ul#todo-list > li.item > input[type="text"][name="item[]"]