Update conditional for aria-describedby on shop page

thatblindgeye · Jul 28, 2021 · ef7d1b1 · ef7d1b1
1 parent 5ac5c6d
commit ef7d1b1
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/src/components/Items/CartAddModal.js b/src/components/Items/CartAddModal.js
@@ -12,9 +12,13 @@ export default function CartAddModal({ attemptCardAdd, closeModal }) {
         <div className='modal-mask' onClick={closeModal}>
             <div
                 className='modal-container elevation-08dp'
+                role='dialog'
+                aria-labelledby='modal-title'
                 onClick={(e) => e.stopPropagation()}
             >
-                <h3 className='modal-message'>{attemptCardAdd.message}</h3>
+                <h3 id='modal-title' className='modal-message'>
+                    {attemptCardAdd.message}
+                </h3>
                 <div className='modal-actions'>
                     <Link
                         to='/cart'

diff --git a/src/components/Items/ItemCard.js b/src/components/Items/ItemCard.js
@@ -22,7 +22,7 @@ export default function ItemCard({ item }) {
                     to={`/shop/${id}`}
                     className='item-link'
                     aria-describedby={`price-${id} ${
-                        stock < 10 ? `stock-warning-${id}` : null
+                        stock < 20 ? `stock-warning-${id}` : null
                     }`}
                 >
                     {name}

diff --git a/src/components/Pages/Item.js b/src/components/Pages/Item.js
@@ -140,7 +140,7 @@ export default function Item() {
             <div className='details-container'>
                 <h1>{item.name}</h1>
                 <StockWarning id={item.id} stock={item.stock} />
-                <div>{item.price}</div>
+                <div>${item.price}</div>
                 <div className='description-container'>
                     <h2 className='container-label'>Description</h2>
                     <div className='item-description'>{item.description}</div>