List group with anchors and buttons semantic html and accessibility

Created by: mtscout6

I'm reviewing pull request react-bootstrap/react-bootstrap#467 and could use some input on a clear direction to take the ListGroup and ListGroupItem React components we are putting together there.

When working with a list-group component the docs highlight two major code paths using either div or ul which lead me to this example:

<div>
  <ul class="list-group">
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Cras sit amet nibh libero</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">
      <a href='#'>Vestibulum at eros</a>
    </li>
  </ul>
  <div class="list-group">
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Cras sit amet nibh libero</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <span class="list-group-item">Porta ac consectetur ac</span>
    <button class="list-group-item">Vestibulum at eros</button>
  </div>
</div>

Which produces:

I thought about using a vertical button group, but the background colors for contextual items are darker with the btn-group.

Have you considered having buttons within a list-group styled the same as the anchors? Or on the flip side having anchors and buttons that are direct children of an li appear the same as the div approach?