From e5978e59072733bdabfc3c7222774a903efd492e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Busso?=
 <90727999+agustinbusso@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:40:30 -0300
Subject: [PATCH] Show aria label is renderAs is checkbox

---
 .../inspector/collection-select-list.vue      |  4 ++--
 src/components/inspector/options-list.vue     | 24 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/inspector/collection-select-list.vue b/src/components/inspector/collection-select-list.vue
index 68b9fd346..2a87487a6 100644
--- a/src/components/inspector/collection-select-list.vue
+++ b/src/components/inspector/collection-select-list.vue
@@ -31,7 +31,7 @@
       />
     </div>
 
-    <div v-if="fields.length > 1" class="mt-3">
+    <div v-if="fields.length > 1 && renderAs === 'checkbox'" class="mt-3">
       <label for="aria-label">{{ $t("Aria Label") }}</label>
       <b-form-select
         id="aria-label"
@@ -92,7 +92,7 @@ export default {
     MustacheHelper,
     ScreenVariableSelector
   },
-  props: ["value"],
+  props: ["value", "renderAs"],
   data() {
     return {
       collections: [],
diff --git a/src/components/inspector/options-list.vue b/src/components/inspector/options-list.vue
index 6bfd996ec..9d6f6259d 100644
--- a/src/components/inspector/options-list.vue
+++ b/src/components/inspector/options-list.vue
@@ -29,8 +29,8 @@
           <label class="mt-3" for="option-content">{{ $t('Content') }}</label>
           <b-form-input id="option-content" v-model="optionContent" data-cy="inspector-option-content" />
           
-          <label class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
-          <b-form-input id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
+          <label v-if="renderAs === 'checkbox'" class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
+          <b-form-input v-if="renderAs === 'checkbox'" id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
         </div>
 
         <div class="card-footer text-right p-2">
@@ -78,8 +78,8 @@
                     <label class="mt-3" for="option-content">{{ $t('Content') }}</label>
                     <b-form-input id="option-content" v-model="optionContent" data-cy="inspector-option-content" />
                     
-                    <label class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
-                    <b-form-input id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
+                    <label v-if="renderAs === 'checkbox'" class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
+                    <b-form-input v-if="renderAs === 'checkbox'" id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
                   </div>
 
                   <div class="card-footer text-right p-2">
@@ -137,7 +137,7 @@
     </div>
     
     <div v-if="dataSource === dataSourceValues.collection">
-      <collection-select-list v-model="collectionOptions"></collection-select-list>
+      <collection-select-list v-model="collectionOptions" :renderAs="renderAs"></collection-select-list>
     </div>
 
     <div v-if="showRenderAs">
@@ -210,10 +210,10 @@
       <b-form-input id="value" v-model="value" @change="valueChanged" data-cy="inspector-datasource-content"/>
       <small class="form-text text-muted mb-3">{{ $t('Content to display to the user in the select list.') }}</small>
 
-      <label for="aria-label">{{ $t('Aria Label') }}</label>
-      <mustache-helper/>
-      <b-form-input id="aria-label" v-model="optionAriaLabel" data-cy="inspector-datasource-aria-label"/>
-      <small class="form-text text-muted mb-3">{{ $t('Aria label for accessibility support.') }}</small>
+      <label v-if="renderAs === 'checkbox'" for="aria-label">{{ $t('Aria Label') }}</label>
+      <mustache-helper v-if="renderAs === 'checkbox'" />
+      <b-form-input v-if="renderAs === 'checkbox'" id="aria-label" v-model="optionAriaLabel" data-cy="inspector-datasource-aria-label"/>
+      <small v-if="renderAs === 'checkbox'" class="form-text text-muted mb-3">{{ $t('Aria label for accessibility support.') }}</small>
     </div>
 
     <div v-if="valueTypeReturned === 'single' && dataSource === dataSourceValues.dataObject">
@@ -221,9 +221,9 @@
       <b-form-input id="key" v-model="key" @change="keyChanged" placeholder="Request Variable Property" data-cy="inspector-options-value" />
       <small class="form-text text-muted mb-3">{{ $t('Enter the property name from the Request data variable that will be passed as the value when selected.') }}</small>
 
-      <label for="aria-label">{{ $t('Aria Label') }}</label>
-      <b-form-input id="aria-label" v-model="optionAriaLabel" placeholder="Aria Label Property" data-cy="inspector-options-aria-label" />
-      <small class="form-text text-muted mb-3">{{ $t('Enter the property name for the aria label from the Request data variable.') }}</small>
+      <label v-if="renderAs === 'checkbox'" for="aria-label">{{ $t('Aria Label') }}</label>
+      <b-form-input v-if="renderAs === 'checkbox'" id="aria-label" v-model="optionAriaLabel" placeholder="Aria Label Property" data-cy="inspector-options-aria-label" />
+      <small v-if="renderAs === 'checkbox'" class="form-text text-muted mb-3">{{ $t('Enter the property name for the aria label from the Request data variable.') }}</small>
     </div>
 
     <div v-if="dataSource === dataSourceValues.dataConnector">