From 2036cd4295265f059094818cdd3cb1d8dd321075 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 23 Dec 2023 17:32:11 +0100
Subject: [PATCH 1/6] fix: Add aria-labelledby property to `EditInputField` for
 improved accessibility

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/FormComponents/EditInputField.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/FormComponents/EditInputField.vue b/src/components/FormComponents/EditInputField.vue
index 28afd5ce5..9191964b6 100644
--- a/src/components/FormComponents/EditInputField.vue
+++ b/src/components/FormComponents/EditInputField.vue
@@ -1,6 +1,6 @@
 <template>
     <fieldset>
-        <label>
+        <label :id="inputLabelId">
             {{ fieldLabel }}
         </label>
         <textarea
@@ -9,6 +9,7 @@
             "
             ref="inputField"
             v-model="content"
+            :aria-labelledby="inputLabelId"
             @input="handleInput"
             @keydown="keyDown"
             @keyup="handleSuggestionsPopupKeyUp"
@@ -23,6 +24,7 @@
                 ref="inputField"
                 v-model="content"
                 :type="props.fieldType"
+                :aria-labelledby="inputLabelId"
                 @input="handleInput"
                 @keydown="keyDown"
                 @keyup="handleSuggestionsPopupKeyUp"
@@ -89,6 +91,12 @@ const suggestionsData = ref(null);
  */
 const content = ref(props.value);
 
+/**
+ * Unique identifier used for identifying the input label for accessibility reasons.
+ * @type {import('vue').Ref<string>}
+ */
+const inputLabelId = ref(`input-label-${Math.floor(Math.random() * 10000000)}`);
+
 // deconstruct composable
 const {
     suggestionsPopupVisible,

From 8bc600559a7a1d15242b9c655d6cca76b8dc4e87 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 23 Dec 2023 17:44:13 +0100
Subject: [PATCH 2/6] fix: Add placeholder and aria-placeholder property to
 `EditInputField` for improved accessibility

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/FormComponents/EditInputField.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/FormComponents/EditInputField.vue b/src/components/FormComponents/EditInputField.vue
index 9191964b6..c35aaff2d 100644
--- a/src/components/FormComponents/EditInputField.vue
+++ b/src/components/FormComponents/EditInputField.vue
@@ -9,7 +9,9 @@
             "
             ref="inputField"
             v-model="content"
+            :placeholder="placeholder"
             :aria-labelledby="inputLabelId"
+            :aria-placeholder="placeholder"
             @input="handleInput"
             @keydown="keyDown"
             @keyup="handleSuggestionsPopupKeyUp"
@@ -24,7 +26,9 @@
                 ref="inputField"
                 v-model="content"
                 :type="props.fieldType"
+                :placeholder="placeholder"
                 :aria-labelledby="inputLabelId"
+                :aria-placeholder="placeholder"
                 @input="handleInput"
                 @keydown="keyDown"
                 @keyup="handleSuggestionsPopupKeyUp"
@@ -66,6 +70,10 @@ const props = defineProps({
         default: false,
         required: false,
     },
+    placeholder: {
+        type: String,
+        default: '',
+    },
     suggestionOptions: {
         type: Array,
         default: () => [],

From 01b87abfbd283168044adc03dc46dd392c8235e9 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 23 Dec 2023 17:46:26 +0100
Subject: [PATCH 3/6] feat: Add `citation` field to recipe editor

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeEdit.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index 00b11a1e3..595ff960c 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -16,6 +16,15 @@
                 :field-label="t('cookbook', 'Description')"
                 :suggestion-options="allRecipeOptions"
             />
+            <EditInputField
+                v-model="recipe['citation']"
+                :field-type="'text'"
+                :field-label="t('cookbook', 'Source')"
+                :placeholder="
+                    // TRANSLATORS Example (placeholder) name for a citation of the recipe's source
+                    t('cookbook', 'Grandma Betty')
+                "
+            />
             <EditInputField
                 v-model="recipe['url']"
                 :field-type="'url'"
@@ -201,6 +210,7 @@ const recipe = ref({
     id: 0,
     name: '',
     description: '',
+    citation: '',
     url: '',
     image: '',
     prepTime: '',
@@ -531,6 +541,7 @@ const initEmptyRecipe = () => {
         id: 0,
         name: null,
         description: '',
+        citation: '',
         url: '',
         image: '',
         prepTime: '',

From 2fd77900d887d9c1ffdfa332a3c11f532f8a514c Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 23 Dec 2023 18:10:54 +0100
Subject: [PATCH 4/6] feat: Add `citation` field to `RecipeView`

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeView/RecipeView.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/RecipeView/RecipeView.vue b/src/components/RecipeView/RecipeView.vue
index 671a7cc1d..5a5140a39 100644
--- a/src/components/RecipeView/RecipeView.vue
+++ b/src/components/RecipeView/RecipeView.vue
@@ -14,9 +14,18 @@
                 </div>
 
                 <div class="meta">
-                    <h2 class="heading">{{ $store.state.recipe.name }}</h2>
+                    <div class="heading">
+                        <h2 class="mb-0">{{ $store.state.recipe.name }}</h2>
+                        <p v-if="$store.state.recipe.citation">
+                            {{
+                                // TRANSLATORS Indicates citation/source of recipe. Ex. "by Grandma Betty"
+                                t('cookbook', 'by')
+                            }}
+                            <span>{{ $store.state.recipe.citation }}</span>
+                        </p>
+                    </div>
                     <div class="details">
-                        <div v-if="recipe.keywords.length">
+                        <div v-if="recipe.keywords.length" class="mb-3">
                             <ul v-if="recipe.keywords.length">
                                 <RecipeKeyword
                                     v-for="(keyword, idx) in recipe.keywords"
@@ -816,6 +825,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+.mb-3 {
+    margin-bottom: 0.75rem !important;
+}
 .wrapper {
     width: 100%;
 }
@@ -873,6 +888,7 @@ export default {
 
 .heading {
     margin-top: 12px;
+    margin-bottom: 1rem;
 }
 
 .dates {

From 720924b5f0ded9f39492eaa4f419bf0908131fc0 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 23 Dec 2023 18:13:34 +0100
Subject: [PATCH 5/6] chore: Update CHANGELOG

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
Signed-off-by: Christian Wolf <github@christianwolf.email>
---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e4327947..e49277e66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Added
 - Toast with success/error message after trying to copy ingredients [#2040](https://github.com/nextcloud/cookbook/pull/2040) @seyfeb
 - Seconds can now be specified for recipe times [#2014](https://github.com/nextcloud/cookbook/pull/2014) @seyfeb
+- Added support for citation field [#2023](https://github.com/nextcloud/cookbook/pull/2023) @seyfeb
 
 ### Fixed
 - Prevent yield calculation for ## as ingredient headline [#1998](https://github.com/nextcloud/cookbook/pull/1998) @j0hannesr0th

From 2a384277c8ddc63a44414e39bb757a838d7a1486 Mon Sep 17 00:00:00 2001
From: Sebastian Fey <info@sebastianfey.de>
Date: Sat, 23 Dec 2023 18:21:23 +0100
Subject: [PATCH 6/6] style: Fix code style

Signed-off-by: Sebastian Fey <info@sebastianfey.de>
---
 src/components/RecipeView/RecipeView.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/RecipeView/RecipeView.vue b/src/components/RecipeView/RecipeView.vue
index 5a5140a39..bef4bdadd 100644
--- a/src/components/RecipeView/RecipeView.vue
+++ b/src/components/RecipeView/RecipeView.vue
@@ -828,9 +828,11 @@ export default {
 .mb-0 {
     margin-bottom: 0 !important;
 }
+
 .mb-3 {
     margin-bottom: 0.75rem !important;
 }
+
 .wrapper {
     width: 100%;
 }