Gospel x Internet: 24 px hit area on the row checkboxes; the presets keep the coach-mark off

plugin-designs/gospel-internet/gospel-internet.instances.json

@@ -6,7 +6,8 @@
       "title": "Gospel x Internet — the board",
       "props": {
         "profile": "board",
-        "urlState": "query"
+        "urlState": "query",
+        "pinHint": false
       }
     },
     {
@@ -15,7 +16,8 @@
       "props": {
         "profile": "board",
         "view": "zero",
-        "urlState": "query"
+        "urlState": "query",
+        "pinHint": false
       }
     },
     {
@@ -25,7 +27,8 @@
         "profile": "board",
         "view": "province",
         "panel": "map",
-        "urlState": "query"
+        "urlState": "query",
+        "pinHint": false
       }
     },
     {
@@ -34,7 +37,8 @@
       "props": {
         "profile": "board",
         "panel": "tree",
-        "urlState": "query"
+        "urlState": "query",
+        "pinHint": false
       }
     },
     {
@@ -43,7 +47,8 @@
       "props": {
         "profile": "board",
         "view": "platforms",
-        "urlState": "query"
+        "urlState": "query",
+        "pinHint": false
       }
     },
     {
@@ -52,7 +57,8 @@
       "props": {
         "profile": "board",
         "list": "700",
-        "urlState": "query"
+        "urlState": "query",
+        "pinHint": false
       }
     }
   ]

plugin-designs/gospel-internet/src/components/GiGrid.vue

@@ -152,6 +152,7 @@ useShadowStyles(
   '.gig-sticky{position:sticky;inset-inline-start:0;z-index:1;background:inherit;font-weight:600}' +
   '.gig-chk{width:34px;justify-content:center}' +
   '.gig-chk input{width:15px;height:15px;margin:0;cursor:pointer;accent-color:#3b463d}' +
+  '.gig-hit{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;cursor:pointer}' +
   '.gig-dot{width:10px;height:10px;border-radius:50%;box-sizing:border-box;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);flex:none;margin-inline-end:6px}' +
   '.gig-sw{width:10px;height:10px;border-radius:2px;flex:none;margin-inline-end:6px;opacity:.85}' +
   '.gig-td a{color:#4f6b52}' +
@@ -197,7 +198,8 @@ useShadowStyles(
                @click="board.openGroup(r.slug)" @keydown="onRowKey($event, r)"
                @mouseenter="bus.setHover(r.slug)" @mouseleave="bus.setHover(null)">
             <div class="gig-td gig-chk" role="cell" @click.stop>
-              <input type="checkbox" :checked="isSel(r.slug)" :aria-label="T('gospelInternet.grid.selectRow', 'Select {name}', { name: r.people_group })" @change="bus.toggleSelect(r.slug)" />
+              <!-- a 24 px hit area around the 15 px box (WCAG 2.5.8 target size; rega RS2) -->
+              <label class="gig-hit"><input type="checkbox" :checked="isSel(r.slug)" :aria-label="T('gospelInternet.grid.selectRow', 'Select {name}', { name: r.people_group })" @change="bus.toggleSelect(r.slug)" /></label>
             </div>
             <div v-for="c in visibleCols" :key="c.key" class="gig-td" :class="{ num: c.num, 'gig-sticky': c.sticky }" :style="{ width: c.w + 'px' }" role="cell">
               <span v-if="c.dot" class="gig-dot" :style="{ background: DETAIL_FILL[r.access_detail], borderColor: DETAIL_RIM[r.access_detail] }" aria-hidden="true"></span>