🎨 Improve UI accessibility and code consistency by adding label for attribute, updating button styles, and refining DOM manipulation

code/websites/pokedex.online/src/views/GamemasterExplorer.vue

@@ -162,8 +162,8 @@
 
       <!-- Property Filter -->
       <div v-if="fileContent && jsonPaths.length > 0" class="property-filter">
-        <label>Filter by Property:</label>
-        <select v-model="filterProperty" @change="onFilterChange">
+        <label for="property-select">Filter by Property:</label>
+        <select id="property-select" v-model="filterProperty" @change="onFilterChange">
           <option value="">All Properties</option>
           <option v-for="path in jsonPaths" :key="path" :value="path">
             {{ path }}
@@ -306,7 +306,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import { ref, computed, onMounted, nextTick } from 'vue';
 import { RecycleScroller } from 'vue-virtual-scroller';
 import { GamemasterClient } from '@/utilities/gamemaster-client.js';
 import { useKeyboardShortcuts } from '@/composables/useKeyboardShortcuts.js';
@@ -678,12 +678,12 @@ function downloadFile(content, filename) {
   a.download = filename;
   document.body.appendChild(a);
   a.click();
-  document.body.removeChild(a);
+  a.remove();
   URL.revokeObjectURL(url);
 }
 
 async function shareUrl() {
-  const url = window.location.href;
+  const url = globalThis.location.href;
   await clipboard.copyToClipboard(url);
 }
 
@@ -1064,8 +1064,8 @@ onMounted(() => {
 
 .btn-action {
   padding: 0.75rem 1rem;
-  background: #3498db;
-  color: white;
+  background: #2980b9;
+  color: #ffffff;
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -1074,11 +1074,12 @@ onMounted(() => {
 }
 
 .btn-action:hover {
-  background: #2980b9;
+  background: #21618c;
 }
 
 .btn-action:disabled {
-  background: #ccc;
+  background: #95a5a6;
+  color: #ffffff;
   cursor: not-allowed;
 }