VPR-104 fix(a11y): make CTS edit button aria-labels unique per item

- Include item name in aria-label for edit buttons in list views
- Applies to ManageLevels, ManageEpas, ManageDomains, ManageRoles,
  and ManageBundles (both .cshtml and .vue versions)
- Makes controls distinguishable for screen reader users (WCAG 2.4.6)

Author: rlorenzo

VueApp/src/CTS/pages/ManageBundles.vue

@@ -176,7 +176,7 @@ load()
                     dense
                     size="sm"
                     icon="edit"
-                    aria-label="Edit bundle"
+                    :aria-label="`Edit bundle: ${props.row.name}`"
                     @click="selectBundle(props.row)"
                     color="primary"
                 ></q-btn>
@@ -200,7 +200,7 @@ load()
                     class="q-mr-md"
                     icon="list"
                     color="primary"
-                    aria-label="View competencies"
+                    :aria-label="`View competencies for ${props.row.name}`"
                     :to="'ManageBundleCompetencies?bundleId=' + props.row.bundleId"
                 ></q-btn>
                 {{ props.row.competencyCount }}

VueApp/src/CTS/pages/ManageDomains.vue

@@ -142,7 +142,7 @@ getDomains()
                         dense
                         flat
                         class="secondary"
-                        aria-label="Edit domain"
+                        :aria-label="`Edit domain: ${d.name}`"
                         @click="domain = d"
                     ></q-btn>
                 </q-item-section>

VueApp/src/CTS/pages/ManageEpas.vue

@@ -227,7 +227,7 @@ getEpas()
                                 size="md"
                                 icon="edit"
                                 color="primary"
-                                aria-label="Edit EPA"
+                                :aria-label="`Edit EPA: ${epaItem.name}`"
                                 @click="selectEpa(epaItem)"
                             />
                         </span>

VueApp/src/CTS/pages/ManageLevels.vue

@@ -216,7 +216,7 @@ loadLevels()
                         size="md"
                         color="primary"
                         icon="edit"
-                        aria-label="Edit level"
+                        :aria-label="`Edit level: ${l.levelName}`"
                         @click="editLevel(l)"
                     ></q-btn>
                 </q-item-section>

VueApp/src/CTS/pages/ManageRoles.vue

@@ -89,7 +89,7 @@ load()
             size="sm"
             icon="edit"
             color="primary"
-            aria-label="Edit role"
+            :aria-label="`Edit role: ${r.name}`"
             @click="role = r"
             class="q-mt-xs q-mr-md"
         ></q-btn>

web/Areas/CTS/Views/ManageDomains.cshtml

@@ -40,7 +40,7 @@
 		{
 			<q-item>
 				<q-item-section top side>
-					<a href="?domainId=@d.DomainId" aria-label="Edit domain">
+					<a href="?domainId=@d.DomainId" aria-label="Edit domain: @d.Name">
 						<q-icon name="edit" size="sm" class="text-secondary"></q-icon>
 					</a>
 				</q-item-section>

web/Areas/CTS/Views/ManageEpas.cshtml

@@ -67,7 +67,7 @@
             <template v-slot:default>
                 <span class="row fit">
                     <span class="col">
-                        <q-btn dense no-caps size="md" icon="edit" color="primary" aria-label="Edit EPA" @@click="selectEpa(epa)"></q-btn>
+                        <q-btn dense no-caps size="md" icon="edit" color="primary" :aria-label="'Edit EPA: ' + epa.name" @@click="selectEpa(epa)"></q-btn>
                     </span>
                     <span class="col">
                         <q-icon :name="epa.active ? 'check' : 'close'" :color="epa.active ? 'green' : 'red'" size="md"></q-icon>

web/Areas/CTS/Views/ManageLevels.cshtml

@@ -34,7 +34,7 @@
         </q-item-label>
         <q-item v-for="l in levels.filter(l => l.epa)">
             <q-item-section side top>
-                <q-btn dense no-caps size="md" color="primary" icon="edit" aria-label="Edit level" @@click="selectLevel(l)"></q-btn>
+                <q-btn dense no-caps size="md" color="primary" icon="edit" :aria-label="'Edit level: ' + l.levelName" @@click="selectLevel(l)"></q-btn>
             </q-item-section>
             <q-item-section side top>
                 <q-icon :name="l.active ? 'check' : 'close'" :color="l.active ? 'green' : 'red'"></q-icon>