feat(HTML): replace div with actual buttons. Screen readers and other assistive technologies understand the semantics of a button, but not a div

Author: josueJURE

index.css

@@ -8,6 +8,8 @@
   list-style: none;
 }
 
+
+
 body {
   height: 100vh;
   width: 100vw;

index.html

@@ -10,29 +10,29 @@
     <div class="parent">
         <div data-screen class="screen">0</div>
         <div class="sliding-part">
-            <div data-value="AC" class="child symbol">AC</div>
-            <div data-value="minus" class="child symbol">+/-</div>
-            <div data-value="%" data-operator class="child symbol">%</div>
-            <div data-value="/" data-number class="child operator">÷</div>
-            <div data-value="7" class="child digit">7</div>
-            <div data-value="8" data-number class="child digit">8</div>
-            <div data-value="9" class="child digit">9</div>
-            <div data-value="*" data-operator class="child operator">x</div>
-            <div data-value="4" class="child digit">4</div>
-            <div data-value="5" class="child digit">5</div>
-            <div data-value="6" class="child digit">6</div>
-            <div data-value="-" data-operator  class="child operator">-</div>
-            <div data-value="1" class="child digit">1</div>
-            <div data-value="2" class="child digit">2</div>
-            <div data-value="3" class="child digit">3</div>
-            <div data-value="+" data-operator  class="child operator">+</div>
-            <div data-value="0" class="child zero">0</div>
-            <div data-value="DE" class="child DE">DE</div>
-            <div data-value="." class="child">.</div>
-            <div data-value="=" data-operator  class="child operator">=</div>
-            <div data-value="history" class="history-btn">history</div>
-            <div data-value="(" data-operator  class="child operator">(</div>
-            <div data-value=")" data-operator  class="child operator">)</div>
+            <button data-value="AC" class="child symbol">AC</button>
+            <button data-value="minus" class="child symbol">+/-</button>
+            <button data-value="%" data-operator class="child symbol">%</button>
+            <button data-value="/" data-number class="child operator">÷</button>
+            <button data-value="7" class="child digit">7</button>
+            <button data-value="8" data-number class="child digit">8</button>
+            <button data-value="9" class="child digit">9</button>
+            <button data-value="*" data-operator class="child operator">x</button>
+            <button data-value="4" class="child digit">4</button>
+            <button data-value="5" class="child digit">5</button>
+            <button data-value="6" class="child digit">6</button>
+            <button data-value="-" data-operator  class="child operator">-</button>
+            <button data-value="1" class="child digit">1</button>
+            <button data-value="2" class="child digit">2</button>
+            <button data-value="3" class="child digit">3</button>
+            <button data-value="+" data-operator  class="child operator">+</button>
+            <button data-value="0" class="child zero">0</button>
+            <button data-value="DE" class="child DE">DE</button>
+            <button data-value="." class="child">.</button>
+            <button data-value="=" data-operator  class="child operator">=</button>
+            <button data-value="history" class="history-btn">history</button>
+            <button data-value="(" data-operator  class="child operator">(</button>
+            <button data-value=")" data-operator  class="child operator">)</button>
         </div>
 
         <div class="computation-history-parent">