Add sr-only text to read more links. OWC-92, OWC-95

Author: markacato

build/blocks/owc-openkaarten/streetmap/client.js

@@ -1,5 +1,5 @@
 {
-    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=27274f7322b6ebce3dcef6dde1bec7e5",
+    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=7a35ddc22ecd2afb0e29c5bc1867f468",
     "/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=0c70cc29722d11466724176fc03cdd58",
     "/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
 }

build/blocks/owc-openkaarten/streetmap/client.js.map

@@ -48,7 +48,7 @@ const initializeSelectedDatasets = () => {
 // Add datasetChange handler
 const handleDatasetChange = (id, checked) => {
   if (!id) return null;
-  
+
   if (checked) {
     const dataLayers = selectedDatasets.value;
     dataLayers.push(id);
@@ -247,4 +247,16 @@ onMounted(() => {
     grid-column: 1 / span 2;
   }
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 </style>

build/mix-manifest.json

@@ -92,7 +92,7 @@ onMounted(() => {
 					<svg aria-hidden="true" width="20" height="21" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<path d="M10.243 4.91a.833.833 0 0 1 1.178 0l5 5a.833.833 0 0 1 0 1.18l-5 5a.833.833 0 0 1-1.178-1.18l3.577-3.577H4.165a.833.833 0 0 1 0-1.667h9.655L10.243 6.09a.833.833 0 0 1 0-1.178Z" fill="#fff"/>
 					</svg>
-					{{ button.button_text }}
+					{{ button.button_text }} <span class="sr-only">over {{ title }}</span>
 				</a>
 			</div>
 		</div>

src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/App.vue

@@ -155,6 +155,7 @@ const loadMore = () => {
                 <path d="M10.243 4.41a.833.833 0 0 1 1.178 0l5 5a.833.833 0 0 1 0 1.18l-5 5a.833.833 0 0 1-1.178-1.18l3.577-3.577H4.165a.833.833 0 0 1 0-1.667h9.655L10.243 5.59a.833.833 0 0 1 0-1.178Z" fill="#1261A3"/>
               </svg>
               {{ location.button.button_text }}
+              <span class="sr-only">over {{ location.title }}</span>
             </a>
           </template>
         </BaseListCard>