<!-- 
@chrisbautista @codespud
A few UI solutions which leverages focus-within psuedo selector to fix accessibility
-->
<div class="app">
  <div>
    <div class="notice">
      <p> Use the <kbd>Tab</kbd> key to navigate these samples.</p>
    </div>
  </div>
  <div>
    <div class="widget work-stage">

      <table>
        <thead>
          <tr>
            <th>
              <div class="sr-only">Checkbox</div>
            </th>
            <th>Name</th>
            <th>Job description</th>
            <th>
              <div class="sr-only">Controls</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input type="checkbox" value="1" name="user"></td>
            <td>John Doe</td>
            <td>rocket scientist</td>
            <td>
              <button class="delete" aria-label="delete">❌</button>
              <button class="save" aria-label="save">💾</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" value="1" name="user"></td>
            <td>Adam smith</td>
            <td>economist</td>
            <td>
              <button class="delete" aria-label="delete">❌</button>
              <button class="save" aria-label="save">💾</button>
            </td>
          </tr>
          <tr>
            <td><input type="checkbox" value="1" name="user"></td>
            <td>Jose <Rizal></Rizal>
            </td>
            <td>novelist</td>
            <td>
              <button class="delete" aria-label="delete">❌</button>
              <button class="save" aria-label="save">💾</button>
            </td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
  <div>
    <div class="widget work-stage">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1671026423293-7adf6a6abd13?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMwNTEwNzE&ixlib=rb-4.0.3&q=80" alt="">
        <span>♥</span>
        <div class="button-group">
          <button class="like">♥</button>
        </div>
      </div>
    </div>
  </div>

  <div>
    <div class="widget work-stage">
      <div class="picker">
        <div class="picker-group">
          <button class="picker-item" style="--selected-color: #912424"><span class="sr-only">red</span></button>
          <button class="picker-item" style="--selected-color: #3566b2"><span class="sr-only">blue</span></button>
          <button class="picker-item" style="--selected-color: #226642"><span class="sr-only">green</span></button>
        </div>
      </div>
    </div>
  </div>
</div>
.work-stage {
  width: auto;
  margin: 2rem 2rem 2rem 0;

  &:first-child {
    margin-left: 2rem;
  }
}

table {
  min-width: 500px;
  border-collapse: collapse;
}

td,
th:not(:first-child) {
  padding: 1rem 0.6rem;
  margin: 0;
  text-align: left;
}

thead tr {
  border-bottom: 3px solid #ddd;
}

tbody tr {
  button {
    opacity: 0;
  }

  /**
  * Show buttons on hover and when an element is focused inside the row
  */
  &:hover,
  &:focus-within {
    background-color: #ffd57e;
    button {
      opacity: 100%;
    }
  }
}

button {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  box-shadow: none;
}

.card {
  min-width: 250px;
  max-width: 250px;
  position: relative;

  img {
    width: 100%;
    transition: opacity 0.35s ease-in-out;
  }

  span {
    font-size: 9rem;
    position: absolute;
    left: 50%;
    top: 50%;
    color: #ddd;
    transform: translate(-50%, -50%);
    text-decoration: none;
    opacity: 0;
  }

  /**
  * Make heart cover image visible when button is focused
  */
  &:hover,
  &:focus-within {
    img {
      opacity: 70%;
      background-color: #000;
    }

    span {
      opacity: 100%;
    }

    button {
      opacity: 0;
    }
  }

  &:focus-within {
    outline: 4px dashed #333;
    outline-offset: 2px;
  }

  button {
    position: absolute;
    bottom: 8px;
    right: 8px;
    color: #ddd;
    font-size: 1.5rem;
  }
}

/* picker */

.picker {
  position: relative;
  display: flex;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background-image: url(https://images.unsplash.com/photo-1552944150-6dd1180e5999?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzMwNTkzNzg&ixlib=rb-4.0.3&q=80);
  background-size: cover;
  background-position: 20%;
  border-radius: 4px;
  background-color: var(--selected-color);
  transition: background-color 0.35s ease-in-out;
  flex: 1;

  &:hover,
  &:focus-within {
    // blend image with color when button is hovered or focused
    background-blend-mode: hard-light;
  }

  &-item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ededed;
    background-color: var(--selected-color);
    cursor: pointer;
  }

  &-group {
    position: absolute;
    bottom: 8px;
    left: 8px;
  }
}

/*
@chrisbautista @codespud
A few UI solutions which leverages focus-within psuedo selector to 
*/

kbd {
  background-color: #ffe5bc;
  font-size: 0.8rem;
  padding: 4px 3px;
  border-radius: 4px;
}
View Compiled 
const picker = document.querySelector(".picker");
const buttons = document.querySelectorAll(".picker-item");

function onHighlight(e) {
  const target = e.currentTarget;
  picker.style = target.style.cssText;
}

function onRemoveColor() {
  picker.style = "";
}

buttons.forEach((button) => {
  button.addEventListener("mouseover", onHighlight);
  button.addEventListener("focus", onHighlight);
});

picker.addEventListener("mouseout", onRemoveColor);
View Compiled
Run Pen

External CSS

  1. https://codepen.io/chrisbautista/pen/yLpEeZy.css

External JavaScript

This Pen doesn't use any external JavaScript resources.