[BUGFIX] Le scroll auto ne descend pas assez bas (PIX-15476)

mon-pix/app/components/module/navbar.gjs

@@ -52,6 +52,7 @@ export default class ModulixNavbar extends Component {
 
   <template>
     <nav
+      id="module-navbar"
       class="module-navbar"
       aria-label={{t "pages.modulix.flashcards.navigation.currentStep" current=@currentStep total=@totalSteps}}
     >

mon-pix/app/services/modulix-auto-scroll.js

@@ -4,19 +4,27 @@ import Service, { service } from '@ember/service';
 export default class ModulixAutoScroll extends Service {
   @service modulixPreviewMode;
 
-  #SCROLL_OFFSET_PX = 70;
+  #DISTANCE_BETWEEN_GRAIN_AND_NAVBAR_PX = 70;
 
   @action
   setHTMLElementScrollOffsetCssProperty(htmlElement) {
-    htmlElement.style.setProperty('--scroll-offset', `${this.#SCROLL_OFFSET_PX}px`);
+    htmlElement.style.setProperty('--scroll-offset', `${this.#getScrollOffset()}px`);
+  }
+
+  #getScrollOffset({ getNavbar } = { getNavbar: this.#getNavbar }) {
+    const navbarElement = getNavbar();
+    const navbarHeight = navbarElement ? navbarElement.getBoundingClientRect().height : 0;
+
+    return this.#DISTANCE_BETWEEN_GRAIN_AND_NAVBAR_PX + navbarHeight;
   }
 
   focusAndScroll(
     htmlElement,
-    { scroll, userPrefersReducedMotion, getWindowScrollY } = {
+    { scroll, userPrefersReducedMotion, getWindowScrollY, getNavbar } = {
       scroll: this.#scroll,
       userPrefersReducedMotion: this.#userPrefersReducedMotion,
       getWindowScrollY: this.#getWindowScrollY,
+      getNavbar: this.#getNavbar,
     },
   ) {
     if (this.modulixPreviewMode.isEnabled) {
@@ -27,7 +35,7 @@ export default class ModulixAutoScroll extends Service {
 
     const elementY = htmlElement.getBoundingClientRect().top + getWindowScrollY();
     scroll({
-      top: elementY - this.#SCROLL_OFFSET_PX,
+      top: elementY - this.#getScrollOffset({ getNavbar }),
       behavior: userPrefersReducedMotion() ? 'instant' : 'smooth',
     });
   }
@@ -44,4 +52,8 @@ export default class ModulixAutoScroll extends Service {
   #getWindowScrollY() {
     return window.scrollY;
   }
+
+  #getNavbar() {
+    return document.getElementById('module-navbar');
+  }
 }

mon-pix/tests/unit/services/modulix-auto-scroll-test.js

@@ -36,6 +36,39 @@ module('Unit | Services | Module | ModulixAutoScroll', function (hooks) {
         assert.ok(true);
       });
 
+      test('should scroll to given html element', function (assert) {
+        // given
+        const scrollOffsetPx = 70;
+        const topOfGivenElement = 150;
+        const navbarHeight = 72;
+        const windowScrollY = 12;
+
+        const modulixAutoScrollService = this.owner.lookup('service:modulix-auto-scroll');
+        const htmlElement = document.createElement('div');
+        htmlElement.getBoundingClientRect = sinon.stub().returns({ top: topOfGivenElement });
+        const navbarElement = document.createElement('nav');
+        navbarElement.getBoundingClientRect = sinon.stub().returns({ height: navbarHeight });
+        const scroll = sinon.stub();
+        const getNavbar = sinon.stub().returns(navbarElement);
+        const getWindowScrollY = sinon.stub().returns(windowScrollY);
+        const userPrefersReducedMotion = sinon.stub().returns(false);
+
+        // when
+        modulixAutoScrollService.focusAndScroll(htmlElement, {
+          scroll,
+          userPrefersReducedMotion,
+          getWindowScrollY,
+          getNavbar,
+        });
+
+        // then
+        sinon.assert.calledWithExactly(scroll, {
+          top: topOfGivenElement + windowScrollY - (scrollOffsetPx + navbarHeight),
+          behavior: 'smooth',
+        });
+        assert.ok(true);
+      });
+
       module('according to user preferences', function (hooks) {
         let modulixAutoScrollService;
         let htmlElement;
@@ -64,6 +97,7 @@ module('Unit | Services | Module | ModulixAutoScroll', function (hooks) {
             scroll: scrollStub,
             userPrefersReducedMotion: userPrefersReducedMotionStub,
             getWindowScrollY: getWindowScrollYStub,
+            getNavbar: sinon.stub(),
           });
         }
 
@@ -110,9 +144,11 @@ module('Unit | Services | Module | ModulixAutoScroll', function (hooks) {
         const modulixAutoScrollService = this.owner.lookup('service:modulix-auto-scroll');
         const htmlElement = document.createElement('div');
         htmlElement.focus = sinon.stub();
+
         class PreviewModeServiceStub extends Service {
           isEnabled = true;
         }
+
         this.owner.register('service:modulixPreviewMode', PreviewModeServiceStub);
 
         // when