manage focus order #2991

MTES-MCT · Sep 18, 2024 · a4bdd15 · a4bdd15
1 parent c3efaa9
commit a4bdd15
Show file tree

Hide file tree

Showing 26 changed files with 83 additions and 19 deletions.
diff --git a/assets/json/Signalement/questions_profile_locataire.json b/assets/json/Signalement/questions_profile_locataire.json
@@ -19,7 +19,10 @@
  "label": "Monsieur",
  "value": "mr"
  }
- ]
+ ],
+ "accessibility": {
+ "focus": true
+ }
  },
  {
  "type": "SignalementFormTextfield",
@@ -124,6 +127,9 @@
  "autocomplete": {
  "isAbsoluteLink": false,
  "route": "/bailleurs?postcode={{formStore.data.adresse_logement_adresse_detail_code_postal}}&name={{formStore.data.coordonnees_bailleur_nom_autocomplete_textfield}}&sanitize=true"
+ },
+ "accessibility": {
+ "focus": true
  }
  },
  {

diff --git a/assets/json/Signalement/questions_profile_tous.json b/assets/json/Signalement/questions_profile_tous.json
@@ -174,7 +174,10 @@
  "label": "En savoir plus",
  "slug": "signalement_concerne_savoir_plus",
  "customCss": "fr-btn--sm fr-badge fr-badge--info",
- "ariaControls": "signalement_concerne_modal"
+ "ariaControls": "signalement_concerne_modal",
+ "accessibility": {
+ "focus": true
+ }
  },
  {
  "type": "SignalementFormOnlyChoice",

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAddress.vue
@@ -83,7 +83,8 @@ export default defineComponent({
  components: Object,
  handleClickComponent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  const updatedSubscreenData = subscreenManager.generateSubscreenData(this.id, subscreenData.body, this.validate)

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormAutocomplete.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormAutocomplete.vue
@@ -56,6 +56,7 @@ export default defineComponent({
  disabled: { type: Boolean, default: false },
  access_name: { type: String, default: '' },
  access_autocomplete: { 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
@@ -72,6 +73,16 @@ 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(

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormButton.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormButton.vue
@@ -1,6 +1,7 @@
 <template>
  <div class="signalement-form-button" :id="id">
  <button
+ id="button"
  :type="type"
  :class="[ 'fr-btn', customCss, formStore.lastButtonClicked === id ? 'fr-btn--loading fr-btn--icon-right fr-icon-refresh-line' : '' ]"
  :disabled="formStore.lastButtonClicked !== ''"
@@ -38,6 +39,7 @@ export default defineComponent({
  customCss: { type: String, default: '' },
  ariaControls: { type: String, default: undefined },
  clickEvent: Function,
+ 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
@@ -51,6 +53,16 @@ export default defineComponent({
  formStore
  }
  },
+ mounted () {
+ if (this.access_focus) {
+ this.$nextTick(() => {
+ const element = document.querySelector('#button') as HTMLElement
+ if (element) {
+ element.focus()
+ }
+ })
+ }
+ },
  computed: {
  actionType (): string {
  if (this.action.includes(':')) {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormCheckbox.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormCheckbox.vue
@@ -47,7 +47,8 @@ export default defineComponent({
  clickEvent: Function,
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormConfirmation.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormConfirmation.vue
@@ -29,7 +29,8 @@ export default defineComponent({
  clickEvent: Function,
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  }
 })
 </script>

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormCounter.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormCounter.vue
@@ -47,7 +47,8 @@ export default defineComponent({
  handleClickComponent: Function,
  clickEvent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {
@@ -66,7 +67,7 @@ export default defineComponent({
  },
  methods: {
  updateValue (event: Event) {
- let value = (event.target as HTMLInputElement).value
+ const value = (event.target as HTMLInputElement).value
  this.$emit('update:modelValue', value)
  }
  },

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormDate.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormDate.vue
@@ -41,7 +41,8 @@ export default defineComponent({
  handleClickComponent: Function,
  clickEvent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  computed: {
  internalValue: {

diff --git a/...cripts/vue/components/signalement-form/components/SignalementFormDisorderCategoryList.vue b/...cripts/vue/components/signalement-form/components/SignalementFormDisorderCategoryList.vue
@@ -39,7 +39,8 @@ export default defineComponent({
  hasError: { type: Boolean, default: false },
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/...ts/scripts/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue b/...ts/scripts/vue/components/signalement-form/components/SignalementFormDisorderOverview.vue
@@ -114,7 +114,8 @@ export default defineComponent({
  clickEvent: Function,
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormEmailfield.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormEmailfield.vue
@@ -44,6 +44,7 @@ export default defineComponent({
  error: { type: String, default: '' },
  access_name: { type: String, default: '' },
  access_autocomplete: { 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

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormInfo.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormInfo.vue
@@ -25,7 +25,8 @@ export default defineComponent({
  clickEvent: Function,
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormLink.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormLink.vue
@@ -35,7 +35,8 @@ export default defineComponent({
  // et ça soulève des erreurs W3C
  hasError: { type: Boolean, default: undefined },
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  methods: {
  handleClick () {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormModal.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormModal.vue
@@ -48,7 +48,8 @@ export default defineComponent({
  clickEvent: Function,
  hasError: { type: Boolean, default: undefined },
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  methods: {
  closeModal () {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormOnlyChoice.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormOnlyChoice.vue
@@ -42,6 +42,7 @@ 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
@@ -55,6 +56,16 @@ export default defineComponent({
  variablesReplacer
  }
  },
+ mounted () {
+ if (this.access_focus) {
+ this.$nextTick(() => {
+ const element = document.querySelector('#' + this.id + '_' + this.values[0].value) as HTMLElement
+ if (element) {
+ element.focus()
+ }
+ })
+ }
+ },
  methods: {
  updateValue (event: Event) {
  const value = (event.target as HTMLInputElement).getAttribute('value')

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormOverview.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormOverview.vue
@@ -208,7 +208,8 @@ export default defineComponent({
  hasError: { type: Boolean, default: false },
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormPhonefield.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormPhonefield.vue
@@ -128,6 +128,7 @@ export default defineComponent({
  error: { type: String, default: '' },
  access_name: { type: String, default: '' },
  access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false },
  clickEvent: Function,
  // les propriétés suivantes ne sont pas utilisées,
  // mais si on ne les met pas, elles apparaissent dans le DOM

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormRoomList.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormRoomList.vue
@@ -69,7 +69,8 @@ export default defineComponent({
  // et ça soulève des erreurs W3C
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormScreen.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormScreen.vue
@@ -45,6 +45,7 @@
  :handleClickComponent="handleClickComponent"
  :access_name="component.accessibility?.name ?? component.slug"
  :access_autocomplete="component.accessibility?.autocomplete ?? 'off'"
+ :access_focus="component.accessibility?.focus ?? false"
  />
  </div>
  </div>

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormSubscreen.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormSubscreen.vue
@@ -101,6 +101,7 @@ export default defineComponent({
  hasError: { type: Boolean, default: undefined },
  access_name: { type: String, default: undefined },
  access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false },
  clickEvent: Function
  },
  data () {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormTextarea.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormTextarea.vue
@@ -49,7 +49,8 @@ export default defineComponent({
  clickEvent: Function,
  handleClickComponent: Function,
  access_name: { type: String, default: '' },
- access_autocomplete: { type: String, default: '' }
+ access_autocomplete: { type: String, default: '' },
+ access_focus: { type: Boolean, default: false }
  },
  computed: {
  internalValue: {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormTextfield.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormTextfield.vue
@@ -50,6 +50,7 @@ export default defineComponent({
  tagWhenEdit: { type: String, default: '' },
  access_name: { type: String, default: '' },
  access_autocomplete: { 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

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormUpload.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormUpload.vue
@@ -85,7 +85,8 @@ export default defineComponent({
  handleClickComponent: Function,
  clickEvent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormUploadPhotos.vue
@@ -45,7 +45,8 @@ export default defineComponent({
  handleClickComponent: Function,
  clickEvent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {

diff --git a/assets/scripts/vue/components/signalement-form/components/SignalementFormWarning.vue b/assets/scripts/vue/components/signalement-form/components/SignalementFormWarning.vue
@@ -25,7 +25,8 @@ export default defineComponent({
  handleClickComponent: Function,
  clickEvent: Function,
  access_name: { type: String, default: undefined },
- access_autocomplete: { type: String, default: undefined }
+ access_autocomplete: { type: String, default: undefined },
+ access_focus: { type: Boolean, default: false }
  },
  data () {
  return {