title: how can i toggle changes in background color using only the arrow keys?
body: <p>I'm trying to make this toggle accessible and I've succeeded in getting the arrow keys to toggle the switch but I'm unable to change the background color of the h1 which defeats the purpose of the accessible toggle. what am I doing wrong here? i tried using the keydwon listener and I'm getting the inputs from the arrow keys but not receiving the accurate data attribute from the inputs.</p>
  <p>my code:-
  HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; &gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css.css&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h2&gt;Three Pos&lt;/h2&gt;
      &lt;div class=&quot;container&quot;&gt;
          
          &lt;input data-type=&quot;first&quot; type=&quot;radio&quot; id=&quot;first&quot; name=&quot;toggle_option2&quot;&gt;
          &lt;input data-type=&quot;second&quot; type=&quot;radio&quot; id=&quot;second&quot; name=&quot;toggle_option2&quot; checked&gt;
          &lt;input data-type=&quot;third&quot; type=&quot;radio&quot; id=&quot;third&quot; name=&quot;toggle_option2&quot;&gt;
          
          &lt;label data-radio=&quot;first&quot; for=&quot;first&quot; class=&quot;radio one&quot;&gt;&lt;p&gt;Lions&lt;/p&gt;&lt;/label&gt;
          &lt;label data-radio=&quot;second&quot; for=&quot;second&quot; class=&quot;radio bottom two&quot;&gt;&lt;p&gt;Tigers&lt;/p&gt;&lt;/label&gt;
          &lt;label data-radio=&quot;third&quot; for=&quot;third&quot; class=&quot;radio three&quot;&gt;&lt;p&gt;Bears&lt;/p&gt;&lt;/label&gt;
          &lt;div class=&quot;bg&quot;&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>CSS</p>
  <pre><code>*,
  *::after,
  *::before{
      padding: 0;
      box-sizing: border-box;
      margin: 0;
  }
  
  
  :root{
      --bg-one: hsl(0, 100%, 50%);
      --bg-two: hsl(240, 100%, 50%);
      --bg-three: hsl(39, 100%, 50%);
  }
  
  [color-scheme='first']{
      --bg: var(--bg-one);
  }
  
  [color-scheme='second']{
      --bg: var(--bg-two);
  }
  
  [color-scheme='third']{
      --bg: var(--bg-three);
  }
  
  
  
  
  body{
      display: grid;
      min-height: 100vh;
      place-content: center;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgb(31, 30, 30);
      color: white;
  }
  
  h2{
      transition: all 250ms ease-in-out;
      padding: 1rem;
      background-color: var(--bg);
  }
  
  
  
  .bg{
      position: absolute;
      height: 40px;
      width: 40px;
      top: -5px;
      border-radius: 50%;
      transition: background-color 350ms ease,
                  left 250ms ease ;
      
  }
  
  
  .container input[type=radio]:checked ~ .bg {
      background-color: green;
  }
  
  .container input[type=radio]:nth-child(1):checked ~ .bg {
      background-color: red;
      left: -1px;
  }
  
  .container input[type=radio]:nth-child(2):checked ~ .bg {
      background-color: blue;
      left: 31px;
  }
  
  .container input[type=radio]:nth-child(3):checked ~ .bg {
      background-color: orange;
      left: 60px;
  }
  </code></pre>
  <p>JS</p>
  <pre><code>const root = document.querySelector(':root')
  const toggle = document.querySelectorAll('.radio')
  const input = document.querySelectorAll('input [type=&quot;radio&quot;]')
  
  let theme = 'second';
  root.setAttribute('color-scheme', `${theme}`)
  
  const loadTheme = theme =&gt; {
      root.setAttribute('color-scheme', `${theme}`)
  }
  
  toggle.forEach(radio =&gt;{ 
      radio.addEventListener('click', () =&gt; {
          let theme = radio.getAttribute('data-radio')
          loadTheme(theme)
      })
  })
  
  
  document.addEventListener('keydown', e =&gt;{
      console.log(e)
      input.forEach(radio =&gt;{ 
          let theme = radio.getAttribute('data-type')
          loadTheme(theme)
      })
  })
  
  
  </code></pre>
  <p>edit:- removed unnecessary CSS cuz I couldn't post the whole thing</p>