Make Live Sample keyboard accessible (#600)

Fix mdn/content#25017 --------- Co-authored-by: wbamberg <[email protected]>
mdn · Sep 15, 2023 · c754e63 · c754e63
1 parent 0da39a7
commit c754e63
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/javascript/introduction-to-js-1/what-is-js/javascript-label.html b/javascript/introduction-to-js-1/what-is-js/javascript-label.html
@@ -5,33 +5,32 @@
     <meta name="viewport" content="width=device-width" />
     <title>JavaScript label example</title>
     <style>
-      p {
+      button {
         font-family: "helvetica neue", helvetica, sans-serif;
         letter-spacing: 1px;
         text-transform: uppercase;
         text-align: center;
-        border: 2px solid rgb(0 0 200 / 0.6);
-        background: rgb(0 0 200 / 0.6);
-        color: rgb(255 255 255 / 1);
+        border: 2px solid rgb(200 200 0 / 0.6);
+        background: rgba(0, 217, 217, 0.6);
+        color: rgb(100 0 0 / 1);
         box-shadow: 1px 1px 2px rgb(0 0 200 / 0.4);
         border-radius: 10px;
         padding: 3px 10px;
-        display: inline-block;
         cursor: pointer;
       }
     </style>
   </head>
   <body>
-    <p>Player 1: Chris</p>
+    <button type="button">Player 1: Chris</button>
 
     <script>
-      const para = document.querySelector("p");
+      const button = document.querySelector("button");
 
-      para.addEventListener("click", updateName);
+      button.addEventListener("click", updateName);
 
       function updateName() {
         const name = prompt("Enter a new name");
-        para.textContent = `Player 1: ${name}`;
+        button.textContent = `Player 1: ${name}`;
       }
     </script>
   </body>