I need to expand and collapse pure css accordion when I hit keyboard Enter Key for web accessibility

I have created an accordion with an input checkbox. No Js used. I need to expand and collapse the accordion when I hit Enter Key in the keyboard. It's for web accessibility. please help me to solve this.

HTML code below

<div class="tabs">
        <div class="tab">
          <input type="checkbox" id="chck1" />
          <label class="tab-label" for="chck1">
            Item 1
          </label>
          <div class="tab-content">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
          </div>
        </div>
      </div>

CSS code below

$midnight: #2c3e50;
$clouds: #ecf0f1;
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
  &-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    background: $midnight;
    font-weight: bold;
    cursor: pointer;
  }
  &-content {
    max-height: 0;
    padding: 0 1em;
    color: $midnight;
    background: white;
    transition: all .35s;
  }
}
input:checked {
  + .tab-label {
    background: darken($midnight, 10%);
    &::after {
      transform: rotate(90deg);
    }
  }
  ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
  }
}