Improve accessibility and touch target size across views and styles

- Updated links in `back-login.blade.php` and `register.blade.php` to include `a11y-target-link` class for better accessibility.
- Adjusted styles in `_tables.scss` and `_cards.scss` to ensure minimum clickable area meets touch target requirements.
- Enhanced `SiteAssetPresenter` links with `site-asset-link` class for improved accessibility and consistency.

Author: rbruhn

app/Presenters/SiteAssetPresenter.php

@@ -40,7 +40,7 @@ public function assetUrl()
             $filename = basename($this->model->download_path);
             $ariaLabel = e(t('Open file: %s (site asset %s; opens in a new tab)', (string) $filename, (string) $this->model->id));
 
-            return '<a href="'.$url.'" target="_blank" rel="noopener noreferrer" aria-label="'.$ariaLabel.'"><i class="fas fa-file" aria-hidden="true"></i> '.e((string) $filename).'</a>';
+            return '<a href="'.$url.'" target="_blank" rel="noopener noreferrer" class="site-asset-link" aria-label="'.$ariaLabel.'"><i class="fas fa-file" aria-hidden="true"></i> '.e((string) $filename).'</a>';
         }
 
         return '';

resources/css/components/_cards.scss

@@ -49,14 +49,9 @@
   list-style-type: none;
   -webkit-margin-before: 0;
   -webkit-margin-after: 0;
-  -webkit-margin-start: 0px;
-  -webkit-margin-end: 0px;
-  -webkit-padding-start: 0px;
-  margin-before: 0;
-  margin-after: 0;
-  margin-start: 0px;
-  margin-end: 0px;
-  padding-start: 0px;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-start: 0;
 }
 
 .card ul.text li {
@@ -164,6 +159,13 @@
   box-shadow: none;
 }
 
+.card-footer .site-asset-link {
+  display: inline-flex;
+  align-items: center;
+  min-width: 44px;
+  min-height: 44px;
+}
+
 .project-banner {
   position: relative;
   cursor: pointer;

resources/css/components/_tables.scss

@@ -6,28 +6,27 @@
   font-size: .8rem;
 }
 
-/* Global: improve Bootstrap/DataTables pagination contrast (Axe color-contrast) */
+/* Global: improve Bootstrap/DataTables pagination contrast */
 .page-link {
-  color: $brand-red; /* was #0056b3 */
+  color: $brand-red;
 }
 
 .page-link:hover,
 .page-link:focus {
-  color: darken($brand-red, 8%); /* was #003d80 */
+  color: darken($brand-red, 8%);
 }
 
 .page-item.active .page-link {
-  background-color: $brand-red; /* was #0056b3 */
-  border-color: $brand-red;     /* was #0056b3 */
+  background-color: $brand-red;
+  border-color: $brand-red;
   color: #ffffff;
 }
 
-/* Optional: make DataTables table links use brand color too (this is what Axe is flagging on Group show) */
+/* DataTables table links */
 table.dataTable tbody a {
   color: $brand-red;
 }
 
-/* A11y: striped rows are gray; darken link color there to meet WCAG AA for small text */
 table.dataTable.table-striped tbody tr:nth-of-type(odd) a {
   color: darken($brand-red, 14%);
 }
@@ -38,11 +37,7 @@ table.dataTable tbody a:focus {
   text-decoration: underline;
 }
 
-/**
- * ADA: DataTables "Search" inputs need sufficient contrast.
- * DataTables creates: .dataTables_wrapper .dataTables_filter input[type="search"]
- * Keep this scoped to DataTables so we don't affect every input site-wide.
- */
+/* DataTables search input */
 .dataTables_wrapper {
   .dataTables_filter {
     input[type="search"] {
@@ -52,7 +47,7 @@ table.dataTable tbody a:focus {
 
       &::placeholder {
         color: #6c757d;
-        opacity: 1; // ensure consistent placeholder contrast across browsers
+        opacity: 1;
       }
 
       &:focus {
@@ -63,3 +58,26 @@ table.dataTable tbody a:focus {
     }
   }
 }
+
+/* DataTables pagination target size */
+.dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.previous):not(.next) {
+  width: 44px;
+  height: 44px;
+}
+
+.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 44px !important;
+  min-width: 44px !important;
+  padding: 0 12px !important;
+  line-height: 1 !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .pagination .page-item.previous .page-link,
+.dataTables_wrapper .dataTables_paginate .pagination .page-item.next .page-link {
+  min-width: 44px !important;
+}

resources/css/components/_utilities.scss

@@ -127,3 +127,11 @@
   color: #7e8ea1;
   cursor: help;
 }
+
+.a11y-target-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+}

resources/views/auth/register.blade.php

@@ -79,7 +79,7 @@ class="form-horizontal">
                     @include('common.submit-button')
                 </form>
                 <div class="mt-4 text-center">
-                    <a href="{{ route('app.get.login') }}">{{ t('Already have an account? Login') }}</a>
+                    <a href="{{ route('app.get.login') }}" class="a11y-target-link">{{ t('Already have an account? Login') }}</a>
                 </div>
             </div>
         </div>

resources/views/common/back-login.blade.php

@@ -1,3 +1,3 @@
 <div class="mt-4 text-center">
-    <a href="{{ $route }}">{{ t('Back to Login') }}</a>
+    <a href="{{ $route }}" class="a11y-target-link">{{ t('Back to Login') }}</a>
 </div>