sanitised id

FreeTubeApp · Dec 9, 2024 · b5c7529 · b5c7529
1 parent 12bb29f
commit b5c7529
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.js b/src/renderer/components/ft-input-tags/ft-input-tags.js
@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue'
 import FtInput from '../ft-input/ft-input.vue'
 import { showToast } from '../../helpers/utils'
+import { sanitizeForHtmlId } from '../../helpers/accessibility'
 
 export default defineComponent({
   name: 'FtInputTags',
@@ -58,6 +59,11 @@ export default defineComponent({
     }
   },
   emits: ['already-exists', 'change', 'error-find-tag-info', 'invalid-name', 'toggle-show-tags'],
+  computed: {
+    sanitizedId: function() {
+      return sanitizeForHtmlId(`checkbox-${this.label}`)
+    },
+  },
   methods: {
     updateTags: async function (text, _e) {
       if (this.areChannelTags) {

diff --git a/src/renderer/components/ft-input-tags/ft-input-tags.vue b/src/renderer/components/ft-input-tags/ft-input-tags.vue
@@ -26,12 +26,12 @@
       class="checkbox-container"
     >
       <input
-        :id="label"
+        :id="sanitizedId"
         type="checkbox"
         :checked="showTags"
         @change="toggleShowTags"
       >
-      <label :for="label">
+      <label :for="sanitizedId">
         {{ $t('Settings.Distraction Free Settings.Show Added Items') }}
       </label>
     </div>