Accessibility updates to config page settings

advplyr · Dec 20, 2024 · aea2951 · aea2951
1 parent 71b943f
commit aea2951
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 10 deletions.
diff --git a/client/components/ui/ToggleSwitch.vue b/client/components/ui/ToggleSwitch.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <button :aria-labelledby="labeledBy" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer justify-start" :style="{ width: buttonWidth + 'px' }" :aria-checked="toggleValue" :class="className" @click="clickToggle">
+    <button :aria-labelledby="labeledBy" :aria-label="label" role="checkbox" type="button" class="border rounded-full border-black-100 flex items-center cursor-pointer justify-start" :style="{ width: buttonWidth + 'px' }" :aria-checked="toggleValue" :class="className" @click="clickToggle">
       <span class="rounded-full border border-black-50 shadow transform transition-transform duration-100" :style="{ width: cursorHeightWidth + 'px', height: cursorHeightWidth + 'px' }" :class="switchClassName"></span>
     </button>
   </div>
@@ -20,6 +20,7 @@ export default {
     },
     disabled: Boolean,
     labeledBy: String,
+    label: String,
     size: {
       type: String,
       default: 'md'

diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
@@ -6,29 +6,29 @@
           <div class="pt-4">
             <h2 class="font-semibold">{{ $strings.HeaderSettingsGeneral }}</h2>
           </div>
-          <div class="flex items-end py-2">
-            <ui-toggle-switch labeledBy="settings-store-cover-with-items" v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
-            <ui-tooltip :text="$strings.LabelSettingsStoreCoversWithItemHelp">
+          <div role="article" :aria-label="$strings.LabelSettingsStoreCoversWithItemHelp" class="flex items-end py-2">
+            <ui-toggle-switch :label="$strings.LabelSettingsStoreCoversWithItem" v-model="newServerSettings.storeCoverWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeCoverWithItem', val)" />
+            <ui-tooltip aria-hidden="true" :text="$strings.LabelSettingsStoreCoversWithItemHelp">
               <p class="pl-4">
                 <span id="settings-store-cover-with-items">{{ $strings.LabelSettingsStoreCoversWithItem }}</span>
                 <span class="material-symbols icon-text">info</span>
               </p>
             </ui-tooltip>
           </div>
 
-          <div class="flex items-center py-2">
-            <ui-toggle-switch labeledBy="settings-store-metadata-with-items" v-model="newServerSettings.storeMetadataWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeMetadataWithItem', val)" />
-            <ui-tooltip :text="$strings.LabelSettingsStoreMetadataWithItemHelp">
+          <div role="article" :aria-label="$strings.LabelSettingsStoreMetadataWithItemHelp" class="flex items-center py-2">
+            <ui-toggle-switch :label="$strings.LabelSettingsStoreMetadataWithItem" v-model="newServerSettings.storeMetadataWithItem" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('storeMetadataWithItem', val)" />
+            <ui-tooltip aria-hidden="true" :text="$strings.LabelSettingsStoreMetadataWithItemHelp">
               <p class="pl-4">
                 <span id="settings-store-metadata-with-items">{{ $strings.LabelSettingsStoreMetadataWithItem }}</span>
                 <span class="material-symbols icon-text">info</span>
               </p>
             </ui-tooltip>
           </div>
 
-          <div class="flex items-center py-2">
-            <ui-toggle-switch labeledBy="settings-sorting-ignore-prefixes" v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
-            <ui-tooltip :text="$strings.LabelSettingsSortingIgnorePrefixesHelp">
+          <div role="article" :aria-label="$strings.LabelSettingsSortingIgnorePrefixesHelp" class="flex items-center py-2">
+            <ui-toggle-switch :label="$strings.LabelSettingsSortingIgnorePrefixes" v-model="newServerSettings.sortingIgnorePrefix" :disabled="updatingServerSettings" @input="(val) => updateSettingsKey('sortingIgnorePrefix', val)" />
+            <ui-tooltip aria-hidden="true" :text="$strings.LabelSettingsSortingIgnorePrefixesHelp">
               <p class="pl-4">
                 <span id="settings-sorting-ignore-prefixes">{{ $strings.LabelSettingsSortingIgnorePrefixes }}</span>
                 <span class="material-symbols icon-text">info</span>

diff --git a/plugins/Test/index.js b/plugins/Test/index.js
@@ -0,0 +1,18 @@
+const PluginAbstract = require('../../server/PluginAbstract')
+
+class TestPlugin extends PluginAbstract {
+  constructor() {
+    super()
+
+    this.name = 'Test'
+  }
+
+  init(context) {
+    context.Logger.info('[TestPlugin] Test plugin loaded successfully')
+  }
+
+  async onAction(context, actionName, target, data) {
+    context.Logger.info('[TestPlugin] Test plugin onAction', actionName, target, data)
+  }
+}
+module.exports = new TestPlugin()
diff --git a/plugins/Test/manifest.json b/plugins/Test/manifest.json
@@ -0,0 +1,52 @@
+{
+  "name": "Test Plugin",
+  "slug": "test",
+  "version": "1.0.0",
+  "description": "This is a test plugin",
+  "extensions": [
+    {
+      "target": "item.detail.actions",
+      "name": "test",
+      "label": "Test Action",
+      "labelKey": "TestAction"
+    }
+  ],
+  "config": {
+    "title": "Test Plugin Configuration",
+    "titleKey": "TestPluginConfiguration",
+    "description": "This is a test plugin",
+    "descriptionKey": "TestPluginConfigurationDescription",
+    "formFields": [
+      {
+        "name": "apiKey",
+        "label": "API Key",
+        "labelKey": "LabelApiKey",
+        "type": "text",
+        "required": false
+      },
+      {
+        "name": "requestAddress",
+        "label": "Request Address",
+        "labelKey": "LabelRequestAddress",
+        "type": "text",
+        "required": true
+      },
+      {
+        "name": "enable",
+        "label": "Enable",
+        "labelKey": "LabelEnable",
+        "type": "checkbox"
+      }
+    ]
+  },
+  "localization": {
+    "en-us": {
+      "TestAction": "Test Action",
+      "LabelApiKey": "API Key",
+      "LabelEnable": "Enable",
+      "TestPluginConfiguration": "Test Plugin Configuration",
+      "TestPluginConfigurationDescription": "This is a test plugin",
+      "LabelRequestAddress": "Request Address"
+    }
+  }
+}