Fix / enhancement - markup of footer menus in footer-top

[DJMyles]

DTA kit provides footer markup as per the following:

 <footer role="contentinfo">
  <div class="wrapper">
    <section class="footer-top">
      <nav>
        <ul>
          <li><h2>Title header</h2></li>
          <li><a href="#">This is a footer link</a></li>
          <li><a href="#">This is a footer link</a></li>
        </ul>
        <ul>
          <li><h2>Title header</h2></li>
          <li><a href="#">This is a footer link</a></li>
          <li><a href="#">This is a footer link</a></li>
        </ul>
        <ul>
          <li><h2>Title header</h2></li>
          <li><a href="#">This is a footer link</a></li>
          <li><a href="#">This is a footer link</a></li>
        </ul>
        <ul>
          <li><h2>Title header</h2></li>
          <li><a href="#">This is a footer link</a></li>
          <li><a href="#">This is a footer link</a></li>
        </ul>
      </nav>
    </section>
    <section>
      <div class="footer-logo">
        <img alt="Australian Government Coat of Arms" 
          src="/latest/img/coat-of-arms.png">
      </div>
      <div class="footer-links">
        <nav>
          <ul>
            <li><a href="#">Example global link</a></li>
            <li><a href="#">Example global link</a></li>
          </ul>
        </nav>
        <p>&copy; Commonwealth of Australia <br>
        <a href="https://github.com/AusDTO/gov-au-ui-kit/blob/master/LICENSE.md"
           rel="external license">Licensed under the MIT License.</a></p>
      </div>
    </section>
    </div>
  </footer> 

And states:

This framework uses CSS Flexboxes to manage columns. It provides:

lists of links arranged horizontally 2 columns for $mobile and $tablet breakpoint 4 columns for $desktop breakpoint.

Personally I don't think including the menu / block title as the first <li> element of the <ul> is semantically correct. It also makes theming and styling of the menus difficult in various CMS where generally $menu_title would be rendered before the <ul>.

I propose moving the <h2> out of the menu and instead of targeting the <ul> with the grid columns we add a <div class="footer-menu"> around each menu and target with that selector instead, which will encompass the menu + the heading, something like:

 <section class="footer-top">
   <nav>
       <div class="footer-menu>
          <h2>Title header</h2>
            <ul>
              <li><a href="#">Example global link</a></li>
              <li><a href="#">Example global link</a></li>
            </ul>
       </div>
    </nav>
</section>

I have a working branch and can pop a PR in if there is agreement.

[klepas]

Hey @DJMyles

I’ll try get around to all your awesome contributions today.

Thanks again (:

[DJMyles]

And i'll work on fixing my terrible markdown :P

[klepas]

Latest PR: https://github.com/AusDTO/gov-au-ui-kit/pull/453

[klepas]

This will be fixed in the next release. Closing. :)