fix(form): add status regions, live total, and a11y CSS

Dual alert/status slots for form and admin, aria-live on the sticky
total, success heading focus target, More/Less affordance styles, and
44px coarse-pointer chip padding.
This commit is contained in:
Adam Moussa 2026-07-29 20:02:35 -04:00
parent 5ba3f00157
commit c0f6316f3f
No known key found for this signature in database
2 changed files with 69 additions and 3 deletions

View file

@ -152,6 +152,28 @@ header p { font-size: 0.85rem; opacity: 0.8; }
overflow: hidden; overflow: hidden;
} }
.meal-desc.is-expanded {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
.meal-desc-toggle {
display: inline-block;
margin: 0 0 4px;
padding: 0;
border: none;
background: none;
color: var(--color-brand);
font-size: 0.8rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
text-decoration: underline;
}
.meal-desc-toggle:hover { opacity: 0.85; }
.qty-control { .qty-control {
display: flex; display: flex;
align-items: center; align-items: center;
@ -367,6 +389,42 @@ header p { font-size: 0.85rem; opacity: 0.8; }
.qty-control .qty { width: 44px; height: 44px; } .qty-control .qty { width: 44px; height: 44px; }
.edit-qty button { width: 44px; height: 44px; } .edit-qty button { width: 44px; height: 44px; }
.edit-qty span { width: 44px; height: 44px; line-height: 44px; } .edit-qty span { width: 44px; height: 44px; line-height: 44px; }
.btn-chip { min-height: 44px; padding: 10px 16px; }
}
.form-status {
max-width: 1400px;
margin: 0 auto 8px;
}
.sticky-footer .form-status {
margin-bottom: 8px;
}
.admin-panel > .form-status {
margin: 0 0 12px;
}
.form-status-msg:empty { display: none; }
.form-status-msg {
padding: 8px 12px;
border-radius: var(--radius-control);
font-size: 0.85rem;
font-weight: 500;
text-align: center;
}
.form-status-error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.form-status-info {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
} }
.discount-banner { .discount-banner {

View file

@ -85,7 +85,7 @@
</div> </div>
<div class="qty-control"> <div class="qty-control">
<button type="button" data-qty-delta="-1" aria-label="Decrease">&minus;</button> <button type="button" data-qty-delta="-1" aria-label="Decrease">&minus;</button>
<input class="qty" type="number" min="0" step="1" value="0"> <input class="qty" type="number" min="0" step="1" value="0" aria-label="Quantity">
<button type="button" data-qty-delta="1" aria-label="Increase">+</button> <button type="button" data-qty-delta="1" aria-label="Increase">+</button>
</div> </div>
</div> </div>
@ -94,8 +94,12 @@
<div id="meals-list"></div> <div id="meals-list"></div>
<div class="sticky-footer{% if config.authMode == 'google' %} is-hidden{% endif %}" id="sticky-footer"> <div class="sticky-footer{% if config.authMode == 'google' %} is-hidden{% endif %}" id="sticky-footer">
<div class="form-status" id="form-status">
<div id="form-status-alert" class="form-status-msg form-status-error" role="alert"></div>
<div id="form-status-info" class="form-status-msg form-status-info" role="status"></div>
</div>
<div class="inner"> <div class="inner">
<div> <div aria-live="polite">
<span class="total" id="total-display">$0.00</span> <span class="total" id="total-display">$0.00</span>
<span class="count-display" id="count-display">0 meals</span> <span class="count-display" id="count-display">0 meals</span>
</div> </div>
@ -114,6 +118,10 @@
<button type="button" class="btn btn-outline back-btn" data-admin-action="hide-admin">Back to Menu</button> <button type="button" class="btn btn-outline back-btn" data-admin-action="hide-admin">Back to Menu</button>
</div> </div>
</div> </div>
<div class="form-status" id="admin-status">
<div id="admin-status-alert" class="form-status-msg form-status-error" role="alert"></div>
<div id="admin-status-info" class="form-status-msg form-status-info" role="status"></div>
</div>
<div id="admin-stats" class="admin-stats"></div> <div id="admin-stats" class="admin-stats"></div>
<div class="admin-table-wrap"> <div class="admin-table-wrap">
<table class="admin-table"> <table class="admin-table">
@ -134,7 +142,7 @@
</div> </div>
<div id="success" class="success-msg is-hidden"> <div id="success" class="success-msg is-hidden">
<h2>Order submitted!</h2> <h2 id="success-heading" tabindex="-1">Order submitted!</h2>
<p id="success-detail"></p> <p id="success-detail"></p>
<button type="button" id="success-back-btn" class="btn btn-outline back-btn">Back to Menu</button> <button type="button" id="success-back-btn" class="btn btn-outline back-btn">Back to Menu</button>
</div> </div>