feat: changes focusing invalid choices behavior in UiMultipleAnswer and UiMultipleChoices (#532)

* - adds emitted `focus:invalidChoice` event to UiMultipleAnswer and UiMultipleChoices;
- adds `{ preventScroll: true }` to the `el.focus` call in the `focusElement` helper function;

* fix: changes --font-weight-thick from 600 to 500 (MGPFE-2281)

---------

Co-authored-by: Alan Leszczuk <[email protected]>

Author: AlanLes

src/components/organisms/UiMultipleAnswer/UiMultipleAnswer.vue

@@ -139,6 +139,7 @@ export type MultipleAnswerAttrsProps = DefineAttrsProps<MultipleAnswerProps>;
 export interface MultipleAnswerEmits {
   (e:'update:modelValue', value: MultipleAnswerModelValue): void;
   (e: 'update:invalid', value: boolean): void;
+  (e: 'focus:invalidChoice', value: HTMLInputElement): void;
 }
 
 const firstMultipleAnswerItemRef = ref<HTMLInputElement | null>(null);
@@ -212,7 +213,10 @@ watch([
   errorValue,
   item,
 ]) => {
-  if (errorValue) focusElement(item, true);
+  if (errorValue && item) {
+    focusElement(item, true);
+    emit('focus:invalidChoice', item);
+  }
 });
 </script>
 

src/components/organisms/UiMultipleChoices/UiMultipleChoices.vue

@@ -108,6 +108,7 @@ export type MultipleChoicesAttrsProps = DefineAttrsProps<MultipleChoicesProps>;
 export interface MultipleChoicesEmits {
   (e: 'update:modelValue', value: MultipleChoicesModelValue[]): void;
   (e: 'update:invalid', value: boolean): void;
+  (e: 'focus:invalidChoice', value: HTMLInputElement): void;
 }
 export type InvalidInputs = Map<number, HTMLInputElement>;
 export type ExposedTypes = {
@@ -154,6 +155,7 @@ function focusInvalidChoice() {
   const elementToFocus = firstRadioItemsInput ?? firstInvalidChoice.$el.querySelector('input');
 
   focusElement(elementToFocus, true);
+  emit('focus:invalidChoice', elementToFocus);
 }
 
 defineExpose<ExposedTypes>({ focusInvalidChoice });

src/styles/variables/typography.scss

@@ -15,7 +15,7 @@ html {
   --font-size-6: 1.75rem;
   --font-size-7: 2rem;
   --font-weight-default: 400;
-  --font-weight-thick: 600;
+  --font-weight-thick: 500;
   --letter-spacing-medium: 0.02em;
   --letter-spacing-none: 0;
   --letter-spacing-small: 0.01em;
@@ -61,4 +61,4 @@ html {
     --letter-spacing-h2: var(--letter-spacing-none);
     --letter-spacing-h3: var(--letter-spacing-none);
   }
-}
+}

src/utilities/helpers/focus-element/index.ts

@@ -6,7 +6,7 @@ export const focusElement = (el: HTMLElement | null, focusVisible = false): Prom
     }
     return new Promise((resolve) => {
       setTimeout(() => {
-        el.focus();
+        el.focus({ preventScroll: true });
         resolve();
       }, 0);
     });