Change button labels to be more descriptive

chriswilty · Mar 14, 2024 · 9058240 · 9058240
1 parent f2d29f6
commit 9058240
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/App.css b/src/App.css
@@ -79,7 +79,7 @@ main button[aria-disabled='true']:focus-visible ~ .tooltip {
 main button[aria-disabled='true']:hover ~ .tooltip {
  transition-delay: 250ms;
 }
-main button .arrow {
+main button .icon {
  font-size: 2rem;
  line-height: 1;
 }

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,11 +3,11 @@ import './App.css';
 
 function App() {
  const [count, setCount] = useState(0);
+ const downIsDisabled = count <= 0;
+
  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => Math.max(prev - 1, 0));
 
- const downIsDisabled = count <= 0;
-
  return (
  <main>
  <section aria-labelledby="count-heading">
@@ -25,19 +25,19 @@ function App() {
  className="boxed"
  onClick={decrement}
  >
- Down
- <span className="arrow" aria-hidden="true">
- &#8675;
+ Minus
+ <span className="icon" aria-hidden="true">
+ -
  </span>
  </button>
  <div role="tooltip" id="why-disabled" className="tooltip">
  <span>Value cannot be negative</span>
  </div>
  <button className="boxed" onClick={increment}>
- <span className="arrow" aria-hidden="true">
- &#8673;
+ <span className="icon" aria-hidden="true">
+ +
  </span>
- Up
+ Plus
  </button>
  </div>
  </main>