order buttons #2991

assets/json/Signalement/questions_profile_tous.json

@@ -18,7 +18,8 @@
  "label": "Je démarre",
  "slug": "introduction_go",
  "action": "goto:adresse_logement_intro",
- "customCss": "fr-btn--icon-left fr-icon-check-line"
+ "customCss": "fr-btn--icon-left fr-icon-check-line",
+ "validOnEnter": true
  },
  {
  "type": "SignalementFormLink",
@@ -140,18 +141,27 @@
  ],
  "footer": [
  {
- "type": "SignalementFormButton",
- "label": "Précédent",
- "slug": "adresse_logement_previous",
- "action": "goto:adresse_logement_intro",
- "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
- },
- {
- "type": "SignalementFormButton",
- "label": "Suivant",
- "slug": "adresse_logement_next",
- "action": "goto.checkloc:signalement_concerne",
- "customCss": "fr-btn--icon-right fr-icon-arrow-right-line"
+ "type": "SignalementFormSubscreen",
+ "slug": "adresse_logement_footer",
+ "customCss": "button-group-responsive-inverted",
+ "components": {
+ "body": [
+ {
+ "type": "SignalementFormButton",
+ "label": "Suivant",
+ "slug": "adresse_logement_next",
+ "action": "goto.checkloc:signalement_concerne",
+ "customCss": "fr-btn--icon-right fr-icon-arrow-right-line"
+ },
+ {
+ "type": "SignalementFormButton",
+ "label": "Précédent",
+ "slug": "adresse_logement_previous",
+ "action": "goto:adresse_logement_intro",
+ "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
+ }
+ ]
+ }
  }
  ]
  }
@@ -317,30 +327,39 @@
  ],
  "footer": [
  {
- "type": "SignalementFormButton",
- "label": "Précédent",
- "slug": "signalement_concerne_previous",
- "action": "goto:adresse_logement",
- "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
- },
- {
- "type": "SignalementFormButton",
- "label": "Suivant",
- "slug": "signalement_concerne_next_occupant",
- "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
- "action": "goto.save:vos_coordonnees_occupant",
- "conditional": {
- "show": "formStore.data.signalement_concerne_profil === 'logement_occupez'"
- }
- },
- {
- "type": "SignalementFormButton",
- "label": "Suivant",
- "slug": "signalement_concerne_next_tiers",
- "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
- "action": "goto.save:vos_coordonnees_tiers",
- "conditional": {
- "show": "formStore.data.signalement_concerne_profil === 'autre_logement'"
+ "type": "SignalementFormSubscreen",
+ "slug": "signalement_concerne_footer",
+ "customCss": "button-group-responsive-inverted",
+ "components": {
+ "body": [
+ {
+ "type": "SignalementFormButton",
+ "label": "Suivant",
+ "slug": "signalement_concerne_next_occupant",
+ "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
+ "action": "goto.save:vos_coordonnees_occupant",
+ "conditional": {
+ "show": "formStore.data.signalement_concerne_profil === 'logement_occupez'"
+ }
+ },
+ {
+ "type": "SignalementFormButton",
+ "label": "Suivant",
+ "slug": "signalement_concerne_next_tiers",
+ "customCss": "fr-btn--icon-right fr-icon-arrow-right-line",
+ "action": "goto.save:vos_coordonnees_tiers",
+ "conditional": {
+ "show": "formStore.data.signalement_concerne_profil === 'autre_logement'"
+ }
+ },
+ {
+ "type": "SignalementFormButton",
+ "label": "Précédent",
+ "slug": "signalement_concerne_previous",
+ "action": "goto:adresse_logement",
+ "customCss": "fr-btn--secondary fr-btn--icon-left fr-icon-arrow-left-line"
+ }
+ ]
  }
  }
  ]

assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue

@@ -19,6 +19,7 @@
  v-for="(suggestion, index) in suggestions"
  :key="index"
  class="fr-col-12 fr-p-3v fr-text-label--blue-france fr-address-suggestion"
+ ref="addressSuggestions"
  tabindex="0"
  @click="handleClickSuggestion(index)"
  @keyup="handleKeyboardSuggestion($event, index)"
@@ -193,12 +194,12 @@ export default defineComponent({
  }
  },
  handleKeyboardSuggestion (event: any, index: number) {
- if (event.key === 'Enter') {
+ if (event.key === ' ' || event.key === 'Spacebar') {
  this.handleClickSuggestion(index)
  } else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
  event.preventDefault()
- const suggestionElements = document.querySelectorAll('.fr-address-suggestion')
- if (suggestionElements.length > 0) {
+ const suggestionElements = this.$refs.addressSuggestions as HTMLElement[]
+ if (suggestionElements && suggestionElements.length > 0) {
  let newIndex = index
  if (event.key === 'ArrowUp') {
  newIndex = (index === 0) ? suggestionElements.length - 1 : index - 1

assets/scripts/vue/components/signalement-form/components/SignalementFormAutocomplete.vue

@@ -10,6 +10,7 @@
  :validate="validate"
  :access_name="access_name"
  :access_autocomplete="access_autocomplete"
+ :access_focus="access_focus"
  :hasError="hasError"
  :error="error"
  @keydown.down.prevent="handleDownSuggestion"
@@ -73,16 +74,6 @@ export default defineComponent({
  selectedSuggestionIndex: -1
  }
  },
- mounted () {
- if (this.access_focus) {
- this.$nextTick(() => {
- const element = document.querySelector('#' + this.idAutocomplete + '_input') as HTMLElement
- if (element) {
- element.focus()
- }
- })
- }
- },
  created () {
  document.addEventListener('click', this.closeAutocomplete)
  watch(

assets/scripts/vue/components/signalement-form/components/SignalementFormButton.vue

@@ -1,7 +1,8 @@
 <template>
- <div class="signalement-form-button" :id="id">
+ <div class="signalement-form-button" :id="id" ref="button">
  <button
- id="button"
+ :id="id + '_button'"
+ :ref="id + '_ref'"
  :type="type"
  :class="[ 'fr-btn', customCss, formStore.lastButtonClicked === id ? 'fr-btn--loading fr-btn--icon-right fr-icon-refresh-line' : '' ]"
  :disabled="formStore.lastButtonClicked !== ''"
@@ -40,6 +41,7 @@ export default defineComponent({
  ariaControls: { type: String, default: undefined },
  clickEvent: Function,
  access_focus: { type: Boolean, default: false },
+ validOnEnter: { type: Boolean, default: false },
  // les propriétés suivantes ne sont pas utilisées,
  // mais si on ne les met pas, elles apparaissent dans le DOM
  // et ça soulève des erreurs W3C
@@ -54,13 +56,9 @@ export default defineComponent({
  }
  },
  mounted () {
- if (this.access_focus) {
- this.$nextTick(() => {
- const element = document.querySelector('#button') as HTMLElement
- if (element) {
- element.focus()
- }
- })
+ const element = this.$refs.button as HTMLElement
+ if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+ this.focusInput()
  }
  },
  computed: {
@@ -82,6 +80,12 @@ export default defineComponent({
  if (this.clickEvent !== undefined) {
  this.clickEvent(this.actionType, this.actionParam, this.id)
  }
+ },
+ focusInput () {
+ const focusableElement = this.$refs[this.id + '_ref'] as HTMLElement
+ if (focusableElement) {
+ focusableElement.focus()
+ }
  }
  }
 })

assets/scripts/vue/components/signalement-form/components/SignalementFormCheckbox.vue

@@ -1,9 +1,10 @@
 <template>
- <div class="fr-fieldset__element signalement-form-checkbox">
+ <div class="fr-fieldset__element signalement-form-checkbox" ref="checkbox">
  <div :class="['fr-checkbox-group', { 'fr-checkbox-group--error': hasError }]" :id="id">
  <input
  type="checkbox"
  :id="idCheckbox"
+ :ref="id + '_ref'"
  :name="idCheckbox"
  :value="modelValue"
  :class="[ customCss ]"
@@ -41,14 +42,14 @@ export default defineComponent({
  validate: { type: Object, default: null },
  hasError: { type: Boolean, default: false },
  error: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false },
  // les propriétés suivantes ne sont pas utilisées,
  // mais si on ne les met pas, elles apparaissent dans le DOM
  // et ça soulève des erreurs W3C
  clickEvent: Function,
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' },
- access_focus: { type: Boolean, default: false }
+ access_autocomplete: { type: String, default: '' }
  },
  data () {
  return {
@@ -57,6 +58,12 @@ export default defineComponent({
  idCheckbox: this.id + '_check'
  }
  },
+ mounted () {
+ const element = this.$refs.checkbox as HTMLElement
+ if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+ this.focusInput()
+ }
+ },
  methods: {
  updateValue (event: Event) {
  const value = (event.target as HTMLInputElement).checked
@@ -68,6 +75,12 @@ export default defineComponent({
  }
  }
  }
+ },
+ focusInput () {
+ const focusableElement = (this.$refs[this.id + '_ref']) as HTMLElement
+ if (focusableElement) {
+ focusableElement.focus()
+ }
  }
  },
  emits: ['update:modelValue']

assets/scripts/vue/components/signalement-form/components/SignalementFormCounter.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="fr-input-group" :id="id">
+ <div class="fr-input-group" :id="id" ref="counter">
  <label :class="[ customCss, 'fr-label' ]" :for="id + '_input'">
  {{ variablesReplacer.replace(label) }}
  <span class="fr-hint-text">{{ description }}</span>
@@ -9,6 +9,7 @@
  pattern="[0-9]*"
  inputmode="numeric"
  :id="id + '_input'"
+ :ref="id + '_ref'"
  :name="id"
  :value="internalValue"
  :class="[ customCss, 'fr-input' ]"
@@ -41,14 +42,14 @@ export default defineComponent({
  hasError: { type: Boolean, default: false },
  error: { type: String, default: '' },
  defaultValue: { type: Number, default: null },
+ access_focus: { type: Boolean, default: false },
  // les propriétés suivantes ne sont pas utilisées,
  // mais si on ne les met pas, elles apparaissent dans le DOM
  // et ça soulève des erreurs W3C
  handleClickComponent: Function,
  clickEvent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined },
- access_focus: { type: Boolean, default: false }
+ access_autocomplete: { type: String, default: undefined }
  },
  data () {
  return {
@@ -69,13 +70,23 @@ export default defineComponent({
  updateValue (event: Event) {
  const value = (event.target as HTMLInputElement).value
  this.$emit('update:modelValue', value)
+ },
+ focusInput () {
+ const focusableElement = (this.$refs[this.id + '_ref']) as HTMLElement
+ if (focusableElement) {
+ focusableElement.focus()
+ }
  }
  },
  emits: ['update:modelValue'],
  mounted () {
  if (this.modelValue === null) {
  this.$emit('update:modelValue', this.internalValue)
  }
+ const element = this.$refs.counter as HTMLElement
+ if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+ this.focusInput()
+ }
  }
 })
 </script>

assets/scripts/vue/components/signalement-form/components/SignalementFormDate.vue

@@ -1,10 +1,11 @@
 <template>
- <div class="fr-input-group" :id="id">
+ <div class="fr-input-group" :id="id" ref="date">
  <label :class="[ customCss, 'fr-label' ]" :for="id + '_input'">{{ label }}</label>
  <span v-if="hint !== ''" class="fr-hint-text">{{ hint }}</span>
  <input
  type="date"
  :id="id + '_input'"
+ :ref="id + '_ref'"
  :name="id"
  :value="internalValue"
  :class="[ customCss, 'fr-input' ]"
@@ -34,15 +35,21 @@ export default defineComponent({
  customCss: { type: String, default: '' },
  hasError: { type: Boolean, default: false },
  error: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false },
  // les propriétés suivantes ne sont pas utilisées,
  // mais si on ne les met pas, elles apparaissent dans le DOM
  // et ça soulève des erreurs W3C
  validate: { type: Object, default: null },
  handleClickComponent: Function,
  clickEvent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined },
- access_focus: { type: Boolean, default: false }
+ access_autocomplete: { type: String, default: undefined }
+ },
+ mounted () {
+ const element = this.$refs.date as HTMLElement
+ if (this.access_focus && element && !element.classList.contains('fr-hidden')) {
+ this.focusInput()
+ }
  },
  computed: {
  internalValue: {
@@ -58,6 +65,12 @@ export default defineComponent({
  updateValue (event: Event) {
  const value = (event.target as HTMLInputElement).value
  this.$emit('update:modelValue', value)
+ },
+ focusInput () {
+ const focusableElement = (this.$refs[this.id + '_ref']) as HTMLElement
+ if (focusableElement) {
+ focusableElement.focus()
+ }
  }
  },
  emits: ['update:modelValue']