From 272295f862000141797993bc0fba2cf208493a2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 29 Feb 2024 13:24:56 +0100
Subject: [PATCH 1/3] accessbility test 1

---
 src/components/Form/FormGroup.vue            |   3 +
 src/components/Form/fields/FieldOptions2.vue | 279 +++++++++++++++++++
 src/components/Form/mocks/form-base.js       |   3 +-
 3 files changed, 284 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Form/fields/FieldOptions2.vue

diff --git a/src/components/Form/FormGroup.vue b/src/components/Form/FormGroup.vue
index 5528f30e8..7470ccf85 100644
--- a/src/components/Form/FormGroup.vue
+++ b/src/components/Form/FormGroup.vue
@@ -62,6 +62,8 @@ import FieldPubId from './fields/FieldPubId.vue';
 import FieldHtml from './fields/FieldHtml.vue';
 import FieldMetadataSetting from './fields/FieldMetadataSetting.vue';
 import FieldOptions from './fields/FieldOptions.vue';
+import FieldOptions2 from './fields/FieldOptions2.vue';
+
 import FieldPreparedContent from './fields/FieldPreparedContent.vue';
 import FieldRadioInput from './fields/FieldRadioInput.vue';
 import FieldRichTextarea from './fields/FieldRichTextarea.vue';
@@ -89,6 +91,7 @@ export default {
 		FieldHtml,
 		FieldMetadataSetting,
 		FieldOptions,
+		FieldOptions2,
 		FieldPreparedContent,
 		FieldRadioInput,
 		FieldRichTextarea,
diff --git a/src/components/Form/fields/FieldOptions2.vue b/src/components/Form/fields/FieldOptions2.vue
new file mode 100644
index 000000000..ca7597ad0
--- /dev/null
+++ b/src/components/Form/fields/FieldOptions2.vue
@@ -0,0 +1,279 @@
+<template>
+	<div class="pkpFormField pkpFormField--options" :class="classes">
+		<h2 class="pkpFormField--options__legend">
+			<template v-if="localeLabel">
+				<span class="aria-hidden">{{ localeLabel }}</span>
+				<span class="-screenReader">{{ multilingualLabel }}</span>
+			</template>
+			<template v-else>
+				{{ label }}
+			</template>
+		</h2>
+		<div
+			v-if="isPrimaryLocale && description"
+			:id="describedByDescriptionId"
+			class="pkpFormField__description pkpFormField--options__description"
+			v-html="description"
+		/>
+		<div class="pkpFormField__control">
+			<VueDraggable
+				ref="el"
+				v-model="localizedOptions"
+				element
+				:disabled="!isOrderable"
+				@end="updateValueOrder"
+			>
+				<ul>
+					<li
+						v-for="option in localizedOptions"
+						:key="option.value"
+						class="pkpFormField--options__option"
+					>
+						<span
+							class="pkpFormField--options__optionLabel"
+							v-html="option.label"
+						/>
+						<orderer
+							v-if="isOrderable"
+							:item-id="option.value"
+							:item-title="option.label"
+							@up="optionOrderUp"
+							@down="optionOrderDown"
+						/>
+					</li>
+				</ul>
+			</VueDraggable>
+		</div>
+		<field-error
+			v-if="errors && errors.length"
+			:id="describedByErrorId"
+			:messages="errors"
+		/>
+	</div>
+</template>
+
+<script>
+import FieldBase from './FieldBase.vue';
+import {VueDraggable} from 'vue-draggable-plus';
+import Orderer from '@/components/Orderer/Orderer.vue';
+
+export default {
+	name: 'FieldOptions',
+	components: {
+		VueDraggable,
+		Orderer,
+	},
+	extends: FieldBase,
+	props: {
+		/** Type of the `<input>` field. Either `checkbox` or `radio`. */
+		type: {
+			validator: function (value) {
+				return ['checkbox', 'radio'].includes(value);
+			},
+			default: 'checkbox',
+		},
+		/** Allow the user to reorder the options. Reordering will resort the items in the `value` property.  */
+		isOrderable: {
+			type: Boolean,
+			default: false,
+		},
+		/** An array of objects defining the options which can be selected. */
+		options: {
+			type: [Array, Object],
+			required: true,
+		},
+		/** The current value for this field. */
+		value: {
+			type: [Array, Number, String, Boolean],
+			required: true,
+		},
+	},
+	data() {
+		return {
+			/**
+			 *
+			 */
+			localizedOptions: this.isMultilingual
+				? this.options[this.localeKey]
+				: this.options,
+
+			/**
+			 * This replaces the computed `currentValue` property in FieldBase. We
+			 * use a custom watcher for checkboxes so that all change events are
+			 * recorded. The setter function for the computed property `currentValue`
+			 * is not called when an option is deselected. See:
+			 * https://github.com/vuejs/vuex/issues/249
+			 */
+			selectedValue: this.isMultilingual
+				? this.value[this.localeKey]
+				: this.value,
+		};
+	},
+	computed: {
+		/**
+		 * Get classes for the wrapper element
+		 *
+		 * @return {Array}
+		 */
+		classes() {
+			let classes = [];
+			if (this.isOrderable) {
+				classes.push('pkpFormField--optionsOrderable');
+			}
+			return classes;
+		},
+	},
+	watch: {
+		/**
+		 * Sync the selectedValue to the value if it is changed programatically
+		 */
+		value(newVal, oldVal) {
+			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+				return;
+			}
+			this.selectedValue = this.isMultilingual
+				? this.value[this.localeKey]
+				: this.value;
+		},
+
+		/**
+		 * Whenever the selected value changes, emit an event to update the value of
+		 * this field in the form component.
+		 */
+		selectedValue: function (newVal, oldVal) {
+			if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
+				return;
+			}
+			if (this.isOrderable) {
+				newVal = this.localizedOptions
+					.filter((option) => newVal.includes(option.value))
+					.map((option) => option.value);
+			}
+			this.$emit('change', this.name, 'value', newVal, this.localeKey);
+		},
+
+		/**
+		 * Whenever the options change, override the localized options with them
+		 */
+		options: function (newVal) {
+			this.localizedOptions = this.isMultilingual
+				? newVal[this.localeKey]
+				: newVal;
+		},
+	},
+	methods: {
+		/**
+		 * Move an option up in the list
+		 *
+		 * @param {Number} optionValue The value of the option to move up
+		 */
+		optionOrderUp: function (optionValue) {
+			const index = this.localizedOptions.findIndex((option) => {
+				return option.value === optionValue;
+			});
+			if (!index) {
+				return;
+			}
+			this.localizedOptions.splice(
+				index - 1,
+				0,
+				this.localizedOptions.splice(index, 1)[0],
+			);
+			this.updateValueOrder();
+		},
+
+		/**
+		 * Move an option down in the list
+		 *
+		 * @param {Number} optionValue The value of the option to move down
+		 */
+		optionOrderDown: function (optionValue) {
+			const index = this.localizedOptions.findIndex((option) => {
+				return option.value === optionValue;
+			});
+			if (index < 0 || index >= this.localizedOptions.length - 1) {
+				return;
+			}
+			this.localizedOptions.splice(
+				index + 1,
+				0,
+				this.localizedOptions.splice(index, 1)[0],
+			);
+			this.updateValueOrder();
+		},
+
+		/**
+		 * Update the order of selected values when the order of options is changed
+		 */
+		updateValueOrder() {
+			this.selectedValue = this.localizedOptions
+				.filter((option) => this.selectedValue.includes(option.value))
+				.map((option) => option.value);
+		},
+	},
+};
+</script>
+
+<style lang="less">
+@import '../../../styles/_import';
+
+.pkpFormField--options {
+	margin: 0;
+	padding: 0.5rem 1rem 1rem;
+	border: @bg-border;
+	border-radius: @radius;
+}
+
+.pkpFormField--options__legend {
+	padding: 0 0.5rem;
+	font-weight: @bold;
+}
+
+.pkpFormField--options__description {
+	margin-bottom: 1rem;
+}
+
+.pkpFormField--options__option {
+	position: relative;
+	display: flex;
+	align-items: flex-start;
+	gap: 0.5rem;
+	font-size: @font-sml;
+	line-height: 1.8em;
+	cursor: pointer;
+
+	+ .pkpFormField--options__option {
+		margin-top: 0.5rem;
+	}
+}
+
+.pkpFormField--options__input {
+	margin-top: 0.4rem; // align with first line of option text
+
+	&:focus {
+		outline: 2px solid @primary;
+		outline-offset: 1px;
+	}
+}
+
+.pkpFormField--options .multilingualProgress {
+	margin-top: 1rem;
+}
+
+.pkpFormField--options .pkpFieldError {
+	&:before {
+		display: none;
+	}
+}
+
+// Adjust when options can be ordered
+.pkpFormField--optionsOrderable {
+	.pkpFormField--options__option {
+		position: relative;
+		padding: 0.5rem;
+		padding-inline-start: 4rem;
+		padding-inline-end: 7rem;
+		border: @bg-border-light;
+	}
+}
+</style>
diff --git a/src/components/Form/mocks/form-base.js b/src/components/Form/mocks/form-base.js
index 110e30c74..c4c415bda 100644
--- a/src/components/Form/mocks/form-base.js
+++ b/src/components/Form/mocks/form-base.js
@@ -3,7 +3,7 @@ import FieldTextGivenName from './field-text-given-name';
 import FieldTextFamilyName from './field-text-family-name';
 import FieldTextEmail from './field-text-email';
 import FieldTextareaMailingAddress from './field-textarea-mailing-address';
-
+import FieldOptionsOrderable from './field-options-orderable';
 export default {
 	...Form,
 	id: 'example',
@@ -14,6 +14,7 @@ export default {
 		{...FieldTextFamilyName, groupId: 'default'},
 		{...FieldTextEmail, groupId: 'default'},
 		{...FieldTextareaMailingAddress, groupId: 'default'},
+		{...FieldOptionsOrderable, groupId: 'default', component: 'field-options2'},
 	],
 	groups: [
 		{

From cfb3b71e222ddad834ee4e6358291d2126f3137a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 29 Feb 2024 13:38:32 +0100
Subject: [PATCH 2/3] Fix describedBy and add description to one field

---
 src/components/Form/fields/FieldBase.vue | 2 +-
 src/components/Form/mocks/form-base.js   | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/fields/FieldBase.vue b/src/components/Form/fields/FieldBase.vue
index 025cb3fee..ed30a82c9 100644
--- a/src/components/Form/fields/FieldBase.vue
+++ b/src/components/Form/fields/FieldBase.vue
@@ -185,7 +185,7 @@ export default {
 			if (this.isMultilingual) {
 				ids.push(this.multilingualProgressId);
 			}
-			return ids.length ? ids.join(' ') : false;
+			return ids.length ? ids.join(' ') : undefined;
 		},
 
 		/**
diff --git a/src/components/Form/mocks/form-base.js b/src/components/Form/mocks/form-base.js
index c4c415bda..e83560572 100644
--- a/src/components/Form/mocks/form-base.js
+++ b/src/components/Form/mocks/form-base.js
@@ -10,7 +10,11 @@ export default {
 	action: 'http://httpbin.org/put',
 	method: 'PUT',
 	fields: [
-		{...FieldTextGivenName, groupId: 'default'},
+		{
+			...FieldTextGivenName,
+			groupId: 'default',
+			description: 'very useful and interesting description',
+		},
 		{...FieldTextFamilyName, groupId: 'default'},
 		{...FieldTextEmail, groupId: 'default'},
 		{...FieldTextareaMailingAddress, groupId: 'default'},

From c0291b21fe4a3d389a6f746c3cec829140d2cf74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jarda=20Kot=C4=9B=C5=A1ovec?= <jarda.kotesovec@gmail.com>
Date: Thu, 29 Feb 2024 13:46:02 +0100
Subject: [PATCH 3/3] fix tag

---
 src/components/Form/fields/FieldOptions2.vue | 38 ++++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/Form/fields/FieldOptions2.vue b/src/components/Form/fields/FieldOptions2.vue
index ca7597ad0..4f1482778 100644
--- a/src/components/Form/fields/FieldOptions2.vue
+++ b/src/components/Form/fields/FieldOptions2.vue
@@ -19,29 +19,27 @@
 			<VueDraggable
 				ref="el"
 				v-model="localizedOptions"
-				element
+				tag="ul"
 				:disabled="!isOrderable"
 				@end="updateValueOrder"
 			>
-				<ul>
-					<li
-						v-for="option in localizedOptions"
-						:key="option.value"
-						class="pkpFormField--options__option"
-					>
-						<span
-							class="pkpFormField--options__optionLabel"
-							v-html="option.label"
-						/>
-						<orderer
-							v-if="isOrderable"
-							:item-id="option.value"
-							:item-title="option.label"
-							@up="optionOrderUp"
-							@down="optionOrderDown"
-						/>
-					</li>
-				</ul>
+				<li
+					v-for="option in localizedOptions"
+					:key="option.value"
+					class="pkpFormField--options__option"
+				>
+					<span
+						class="pkpFormField--options__optionLabel"
+						v-html="option.label"
+					/>
+					<orderer
+						v-if="isOrderable"
+						:item-id="option.value"
+						:item-title="option.label"
+						@up="optionOrderUp"
+						@down="optionOrderDown"
+					/>
+				</li>
 			</VueDraggable>
 		</div>
 		<field-error