Responsive DOM Manipulators

About this code

Usually, HTML code order and screen reader reading and tab order follow the same, expected path: Left to right, top to bottom.

Responsive CSS and Grid can visually move elements around with Flex order, Position Absolute, or Floats. With these visual changes, sometimes it's difficult to ensure the HTML/DOM/TAB order is properly reflected (without very specific JavaScript to deal with focus).

The code here changes that by moving DOM elements to different spots in the DOM based on breakpoint

Give it a try

Try tabbing through the area at different breakpoints. You'll see the tabbing order remains correct while the DOM changes significantly!

1
320
640
960
1280

HTML

Note: classes and empty divs omitted for simplicity

<section class="responsive-dom-manipulator-example" data-equalize-height="example">
          <div class="desktop-row-container">
            <div class="display:flex lg=:flex-grow:0 xl+:flex-grow:1">
              <div class="box-5" data-move-container="box-5" data-move-container-lg></div>
              <div class="box-4 xl+:flex-grow:1" data-move-container="box-4" data-move-container-xl></div>
              <div class="box-3" data-move-container="box-3" data-move-container-lg></div>
              <div class="box-2" data-move-container="box-2" data-move-container-xl></div>
            </div>
            <div class="box-1 lg=:flex-grow:0" data-move-container="box-1" data-move-container-lg></div>
            <div class="box-3" data-move-container="box-3" data-move-container-xl></div>
            <div class="box-2 lg=:flex-grow:1" data-move-container="box-2" data-move-container-lg></div>
            <div class="box-5" data-move-container="box-5" data-move-container-xl></div>
            <div class="box-4 lg=:flex-grow:1" data-move-container="box-4" data-move-container-lg></div>
          </div>
          <div class="main-row">
            <div class="px:12px display:flex align:middle heebo:bold">
              LOGO
            </div>
            <div class="box-1" data-move-container="box-1" data-move-container-xl></div>
            <div class="box-6 lg+:flex-grow:1" data-move-container="box-6" data-move-container-lg data-move-container-xl></div>
            <div class="display:flex">
              <div data-move-container="box-1" data-move-container-sm data-move-container-md data-move-container-xl>
                <div class="box-1" data-move="box-1">
                  <a class="anchor secondary" tabindex="0">
                    <div class="sm=:heebo:bold white-space:nowrap">SM Anchor #1</div>
                    <div class="md=:heebo:bold white-space:nowrap">MD Anchor #1</div>
                    <div class="lg=:heebo:bold white-space:nowrap">LG Anchor #3</div>
                    <div class="xl+:heebo:bold white-space:nowrap">XL Anchor #6</div>
                  </a>
                </div>
              </div>
              <div class="hamburger-icon-container">
                <button tabindex="-1"></button>
                <div class="mobile-menu-container-wrapper" data-equalize-height="example2">
                  <div class="mobile-menu-container">
                    <div data-move-container="box-6" data-move-container-md></div>
                    <div data-move-container="box-5" data-move-container-md></div>
                    <div data-move-container="box-4" data-move-container-md></div>
                    <div data-move-container="box-3" data-move-container-md></div>
                    <div data-move-container="box-2" data-move-container-md></div>
                    <div data-move-container="box-2" data-move-container-sm>
                      <div class="box-2" data-move="box-2">
                        <a class="anchor secondary" tabindex="0">
                          <div class="sm=:heebo:bold white-space:nowrap">SM Anchor #2</div>
                          <div class="md=:heebo:bold white-space:nowrap">MD Anchor #6</div>
                          <div class="lg=:heebo:bold white-space:nowrap">LG Anchor #4</div>
                          <div class="xl+:heebo:bold white-space:nowrap">XL Anchor #2</div>
                        </a>
                      </div>
                    </div>
                    <div data-move-container="box-3" data-move-container-sm>
                      <div class="box-3" data-move="box-3">
                        <a class="anchor secondary" tabindex="0">
                          <div class="sm=:heebo:bold white-space:nowrap">SM Anchor #3</div>
                          <div class="md=:heebo:bold white-space:nowrap">MD Anchor #5</div>
                          <div class="lg=:heebo:bold white-space:nowrap">LG Anchor #2</div>
                          <div class="xl+:heebo:bold white-space:nowrap">XL Anchor #3</div>
                        </a>
                      </div>
                    </div>
                    <div data-move-container="box-4" data-move-container-sm>
                      <div class="box-4" data-move="box-4">
                        <a class="anchor secondary" tabindex="0">
                          <div class="sm=:heebo:bold white-space:nowrap">SM Anchor #4</div>
                          <div class="md=:heebo:bold white-space:nowrap">MD Anchor #4</div>
                          <div class="lg=:heebo:bold white-space:nowrap">LG Anchor #5</div>
                          <div class="xl+:heebo:bold white-space:nowrap">XL Anchor #1</div>
                        </a>
                      </div>
                    </div>
                    <div data-move-container="box-5" data-move-container-sm>
                      <div class="box-5" data-move="box-5">
                        <a class="anchor secondary" tabindex="0">
                          <div class="sm=:heebo:bold white-space:nowrap">SM Anchor #5</div>
                          <div class="md=:heebo:bold white-space:nowrap">MD Anchor #3</div>
                          <div class="lg=:heebo:bold white-space:nowrap">LG Anchor #1</div>
                          <div class="xl+:heebo:bold white-space:nowrap">XL Anchor #4</div>
                        </a>
                      </div>
                    </div>
                  </div>
                  <div data-move-container="box-6" data-move-container-sm>
                    <div class="box-6" data-move="box-6">
                      <a class="anchor secondary" tabindex="0">
                        <div class="sm=:heebo:bold white-space:nowrap">SM Anchor #6</div>
                        <div class="md=:heebo:bold white-space:nowrap">MD Anchor #2</div>
                        <div class="lg=:heebo:bold white-space:nowrap">LG Anchor #6</div>
                        <div class="xl+:heebo:bold white-space:nowrap">XL Anchor #5</div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

JavaScript

storm_eagle.module("responsive_dom_manipulator", () => {
  'use strict';

let self;
  let array_of_keys = [];

return {
    initialize: () => {
      self = storm_eagle.responsive_dom_manipulator;
      self.resize_listener();
    },
    ready: () => {
      self.force_resize();
    },
    /*
     * Re-evaluate moving the dom when the page loads or is resized
     */
    resize_listener: () => {
      const force_resize = () => {
        return self.force_resize();
      }
      storm_eagle.resize_observer(document.querySelector("body"), force_resize);
    },
    /*
     * Check for any new items to equalize, and then equalize them
     * Do not equalize height for small size if the item contains [data-equalize-md-up] data attribute
     */
    force_resize: () => {
      array_of_keys = [];
      document.querySelectorAll("[data-move]").forEach((el) => {
        array_of_keys.push(el.dataset["move"]);
      })
      console.log(array_of_keys);
      if (storm_eagle.client.viewport.is_sm_only()) {
        document.querySelectorAll("[data-move-container-sm]").forEach((el) => {
          el.appendChild(document.querySelector(`[data-move=${el.dataset["moveContainer"]}]`));
        });
      }
      if (storm_eagle.client.viewport.is_md_only()) {
        document.querySelectorAll("[data-move-container-md]").forEach((el) => {
          el.appendChild(document.querySelector(`[data-move=${el.dataset["moveContainer"]}]`));
        });
      }
      if (storm_eagle.client.viewport.is_lg_only()) {
        document.querySelectorAll("[data-move-container-lg]").forEach((el) => {
          el.appendChild(document.querySelector(`[data-move=${el.dataset["moveContainer"]}]`));
        });
      }
      if (storm_eagle.client.viewport.is_xl_up()) {
        document.querySelectorAll("[data-move-container-xl]").forEach((el) => {
          el.appendChild(document.querySelector(`[data-move=${el.dataset["moveContainer"]}]`));
        });
      }
    },
  };
});