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%;
}