closes #13597
closes #26442

Another approach from #26446, please review ListItemButton.js

Summary

• ListItemButton always render 2 DOM <li class="root"><div class="button"></li>

  <List>
    <ListItemButton ButtonBaseProps={{ component: 'a', href: '#id' }}>
    </ListItemButton>
  </List>
  
  // result
  <ul>
    <li> {/* ListItemButton-root */}
      <a href="#id"> {/* ListItemButton-button */}
      </a>
    </li>
  </ul>

  // nav
  <List component="nav">
   <ListItemButton component="div" ButtonBaseProps={{ component: 'a', href: '#id' }}>
   </ListItemButton>
  </List>
  
  // result
  <nav>
   <div> {/* ListItemButton-root */}
     <a href="#id"> {/* ListItemButton-button */}
     </a>
   </div>
  </nav>

• accept secondaryAction as prop (wrapped with ListItemSecondaryAction) instead of children because it must be the same level as button (not inside).

  <ListItemButton
    secondaryAction={<IconButton><Checkbox /></IconButton>}
  >
    <ListItemText>Simple</ListItemText>
  </ListItemButton>
  
  // result
  <ul>
    <li class="root"> {/* ListItemButton-root */}
      <a class="button"> {/* ListItemButton-button */}
        <div>Simple</div>
      </a>
      <div class="secondaryAction"></div>
    </li>
  </ul>

  If this api sounds good to the team, will add to ListItem so that it does not need to iterate children to find secondary action

• I have followed (at least) the PR section of the contributing guide.