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[]"]