Skip to content

Commit 3bd72d5

Browse files
josueJUREjosueJURE
authored
Merge pull request #20 from josueJURE/accessibility
Accessibility
2 parents 343def4 + b6c95cd commit 3bd72d5

File tree

2 files changed

+28
-26
lines changed

2 files changed

+28
-26
lines changed

‎index.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
list-style: none;
99
}
1010

11+
12+
1113
body {
1214
height: 100vh;
1315
width: 100vw;

‎index.html‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,37 +8,37 @@
88
</head>
99
<body>
1010
<div class="parent">
11-
<div data-screen class="screen">0</div>
11+
<div data-screen class="screen" aria-label="Calculator Screen">0</div>
1212
<div class="sliding-part">
13-
<div data-value="AC" class="child symbol">AC</div>
14-
<div data-value="minus" class="child symbol">+/-</div>
15-
<div data-value="%" data-operator class="child symbol">%</div>
16-
<div data-value="/" data-number class="child operator">÷</div>
17-
<div data-value="7" class="child digit">7</div>
18-
<div data-value="8" data-number class="child digit">8</div>
19-
<div data-value="9" class="child digit">9</div>
20-
<div data-value="*" data-operator class="child operator">x</div>
21-
<div data-value="4" class="child digit">4</div>
22-
<div data-value="5" class="child digit">5</div>
23-
<div data-value="6" class="child digit">6</div>
24-
<div data-value="-" data-operator class="child operator">-</div>
25-
<div data-value="1" class="child digit">1</div>
26-
<div data-value="2" class="child digit">2</div>
27-
<div data-value="3" class="child digit">3</div>
28-
<div data-value="+" data-operator class="child operator">+</div>
29-
<div data-value="0" class="child zero">0</div>
30-
<div data-value="DE" class="child DE">DE</div>
31-
<div data-value="." class="child">.</div>
32-
<div data-value="=" data-operator class="child operator">=</div>
33-
<div data-value="history" class="history-btn">history</div>
34-
<div data-value="(" data-operator class="child operator">(</div>
35-
<div data-value=")" data-operator class="child operator">)</div>
13+
<button data-value="AC" class="child symbol" aria-label="All Clear">AC</button>
14+
<button data-value="minus" class="child symbol" aria-label="Toggle Sign">+/-</button>
15+
<button data-value="%" data-operator class="child symbol" aria-label="Percentage">%</button>
16+
<button data-value="/" data-number class="child operator" aria-label="Divide">÷</button>
17+
<button data-value="7" class="child digit" aria-label="Number 7">7</button>
18+
<button data-value="8" data-number class="child digit" aria-label="Number 8">8</button>
19+
<button data-value="9" class="child digit" aria-label="Number 9">9</button>
20+
<button data-value="*" data-operator class="child operator" aria-label="Mutiply">x</button>
21+
<button data-value="4" class="child digit" aria-label="Number 4">4</button>
22+
<button data-value="5" class="child digit" aria-label="Number 5">5</button>
23+
<button data-value="6" class="child digit" aria-label="Number 6">6</button>
24+
<button data-value="-" data-operator class="child operator" aria-label="Minus">-</button>
25+
<button data-value="1" class="child digit" aria-label="Number 1">1</button>
26+
<button data-value="2" class="child digit" aria-label="Number 2">2</button>
27+
<button data-value="3" class="child digit" aria-label="Number 3">3</button>
28+
<button data-value="+" data-operator class="child operator" aria-label="Add">+</button>
29+
<button data-value="0" class="child zero" aria-label="Number 0">0</button>
30+
<button data-value="DE" class="child DE" aria-label="Delete">DE</button>
31+
<button data-value="." class="child" aria-label="Decimal point">.</button>
32+
<button data-value="=" data-operator class="child operator" aria-label="Equal sign">=</button>
33+
<button data-value="history" class="history-btn" aria-label="History button">history</button>
34+
<button data-value="(" data-operator class="child operator" aria-label="Opening parenthesis">(</button>
35+
<button data-value=")" data-operator class="child operator" aria-label="Closing parenthesis">)</button>
3636
</div>
3737

3838
<div class="computation-history-parent">
3939
<h3>history</h3>
40-
<ul class="computation-history"></ul>
41-
<button class="clear-history-btn">clear history</button>
40+
<ul class="computation-history" aria-label="Computation History"></ul>
41+
<button class="clear-history-btn" aria-label="Clear History">clear history</button>
4242

4343
</div>
4444

0 commit comments

Comments
 (0)