DEV Community

Discussion on: button cannot appear as a descendant of button

View post
Collapse
 
athomsfere profile image
Austin French •

I would have gone with the Div approach.

If you can't do it in plain Js out of the box, it's probably not the best option. Unless it has some other benefit (like a lot less code).

jsfiddle.net/athomsfere/35wakz2j/1/

<div class="fancy-div" onclick="fancyClick(this)">
  <div class="fancy-content">
  The things! 🐱‍🏍
  </div>

  <button type="button" class="fancy-button">
  Click me
  </button>
</div>

<div class="fancy-div" onclick="fancyClick(this)">
  <div class="fancy-content">
  Cake 🎂
  </div>

  <button type="button" class="fancy-button">
  Click me
  </button>
</div>

<div class="fancy-div" onclick="fancyClick(this)">
  <div class="fancy-content">
  Steamy 😤
  </div>

  <button type="button" class="fancy-button">
  Click me
  </button>
</div>
Enter fullscreen mode Exit fullscreen mode 
function fancyClick(elem){  
  elem.classList.toggle('clicked');
}
Enter fullscreen mode Exit fullscreen mode 
.fancy-div {
    display: flex;
    border-style: solid;
    border-color: red;
    border-radius: 5px;
    border-width: 1px;
    padding: 5px 5%;
    margin: 10px;
}

.fancy-div:hover {
  background-color: lightgray;
}

.fancy-content {
  float: left;
  width: 90%;
}

.fancy-button {
  float: right;
}

.clicked {
  border-color: orange;
  color: gray;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dvnrsn profile image
Devin Rasmussen •

I love seeing raw JS solutions like this. Too much we get lost in frameworks and it's a good reminder.

I believe the weakness of this solution is its inaccessibility. For example there are no tabs on the clickable rows. Additionally, screen readers will not register that the divs are serving as buttons.

Collapse
 
athomsfere profile image
Austin French •

True, but I'd also say:

Scrolling through the page, it doesn't look like a button either. (I guess this is why I went straight to adding a hover effect).

Tabbable == fixable at least.

But I guess back to my original point: I tent to prototype the big idea in pure JS. And then move it to a framework or rewrite it as a reusable component where I can continue to work through enhancements like accessibility.