SysAdmin
2aadd8ed2c
Implemented comprehensive accessibility enhancements to meet WCAG 2.1 AA standards:
**Skip Navigation:**
- Added skip-to-content link for keyboard users
- Link appears on focus and jumps directly to main content area
**Screen Reader Support:**
- Created .sr-only and .sr-only-focusable utility classes
- Added aria-hidden="true" to all decorative icons
- Added descriptive aria-label attributes to all icon-only buttons
**Enhanced Focus Indicators:**
- Implemented 3px visible outlines on all interactive elements
- Added :focus-visible for keyboard-only focus indicators
- Special focus styling for primary actions (orange outline)
- Consistent 2px outline-offset for better visibility
**Table Accessibility:**
- Added scope="col" attributes to all table headers
- Properly grouped button actions with role="group" and aria-label
**Button Improvements:**
- All icon-only buttons now have descriptive ARIA labels
- Added responsive text labels (visible on sm+ screens, hidden on mobile)
- Improved button groups with proper ARIA roles
**Files Modified:**
- _Layout.cshtml: Skip link, accessible menu close button
- Categories/Index.cshtml: ARIA labels, table scopes
- Users/Index.cshtml: ARIA labels, table scopes
- Orders/Index.cshtml: Table scopes
- Products/Index.cshtml: Table scopes
- ShippingRates/Index.cshtml: ARIA labels, table scopes
- VariantCollections/Index.cshtml: ARIA labels, table scopes
- modern-admin.css: Accessibility utilities and enhanced focus styles
**WCAG 2.1 AA Criteria Addressed:**
- 2.4.1 Bypass Blocks (Level A)
- 2.4.7 Focus Visible (Level AA)
- 4.1.2 Name, Role, Value (Level A)
- 1.3.1 Info and Relationships (Level A)
🚀 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
103 lines
4.6 KiB
Plaintext
103 lines
4.6 KiB
Plaintext
@model IEnumerable<LittleShop.DTOs.ShippingRateDto>
|
|
|
|
@{
|
|
ViewData["Title"] = "Shipping Rates";
|
|
}
|
|
|
|
<div class="row mb-4">
|
|
<div class="col">
|
|
<h1><i class="fas fa-truck"></i> Shipping Rates</h1>
|
|
</div>
|
|
<div class="col-auto">
|
|
<a href="@Url.Action("Create")" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Add Shipping Rate
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
@if (Model.Any())
|
|
{
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Country</th>
|
|
<th scope="col">Weight Range (g)</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Delivery Days</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var rate in Model)
|
|
{
|
|
<tr>
|
|
<td>
|
|
<strong>@rate.Name</strong>
|
|
@if (!string.IsNullOrEmpty(rate.Description))
|
|
{
|
|
<br><small class="text-muted">@rate.Description</small>
|
|
}
|
|
</td>
|
|
<td>@rate.Country</td>
|
|
<td>@rate.MinWeight - @rate.MaxWeight</td>
|
|
<td>£@rate.Price</td>
|
|
<td>@rate.MinDeliveryDays - @rate.MaxDeliveryDays days</td>
|
|
<td>
|
|
@if (rate.IsActive)
|
|
{
|
|
<span class="badge bg-success">Active</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="badge bg-danger">Inactive</span>
|
|
}
|
|
</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm" role="group" aria-label="Shipping rate actions">
|
|
<a href="@Url.Action("Edit", new { id = rate.Id })" class="btn btn-outline-primary" aria-label="Edit @rate.Name">
|
|
<i class="fas fa-edit" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Edit</span>
|
|
</a>
|
|
<form method="post" action="@Url.Action("Delete", new { id = rate.Id })" class="d-inline"
|
|
onsubmit="return confirm('Are you sure you want to delete this shipping rate?')">
|
|
@Html.AntiForgeryToken()
|
|
<button type="submit" class="btn btn-outline-danger" aria-label="Delete @rate.Name">
|
|
<i class="fas fa-trash" aria-hidden="true"></i><span class="d-none d-sm-inline ms-1">Delete</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-truck fa-3x text-muted mb-3"></i>
|
|
<p class="text-muted">No shipping rates configured. <a href="@Url.Action("Create")">Add your first shipping rate</a>.</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-info-circle"></i> Shipping Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>Configure shipping rates based on weight ranges and destination countries.</p>
|
|
<ul>
|
|
<li>Weight ranges are in grams</li>
|
|
<li>Rates are automatically calculated based on order weight</li>
|
|
<li>The cheapest applicable rate is selected for customers</li>
|
|
<li>Set rates as inactive to temporarily disable them</li>
|
|
</ul>
|
|
</div>
|
|
</div> |