Use menu/li structure for upper menu

[DISCO-196]

Author: RoyEJohnson

src/app/components/shell/header/menus/upper-menu/upper-menu.scss

@@ -28,6 +28,7 @@
     .container {
         align-items: center;
         display: grid;
+        margin: 0;
 
         @include width-up-to($tablet-max) {
             justify-items: left;
@@ -91,8 +92,9 @@
         overflow: hidden;
         width: 0;
 
-        > img {
+        img {
             max-height: 3rem;
+            vertical-align: middle;
         }
 
         @media (max-height: #{39em * $scale-factor}) {

src/app/components/shell/header/menus/upper-menu/upper-menu.tsx

@@ -25,14 +25,14 @@ function MenuItem({label, url, showButton}: {
     if (label === 'Give') {
         return showButton ?
             null :
-            <a className="nav-menu" target="_blank" rel="noreferrer" href={url}>
+            <li className="nav-menu"><a target="_blank" rel="noreferrer" href={url}>
                 {label}
-            </a>
+            </a></li>
         ;
     }
 
     return (
-        <a className="nav-menu" href={url}>{label}</a>
+        <li className="nav-menu"><a href={url}>{label}</a></li>
     );
 }
 
@@ -43,16 +43,16 @@ export default function UpperMenu() {
     const riceLogo = useOptimizedImage('https://openstax.org/dist/images/rice.webp', 80);
 
     return (
-        <div className="container" data-analytics-nav="Upper Menu">
+        <menu className="container" data-analytics-nav="Upper Menu">
             {
                 menuData.map(
                     ({label, url}) => <MenuItem key={label} label={label} url={url} showButton={showButton} />
                 )
             }
-            <a className="logo rice-logo logo-wrapper" href="http://www.rice.edu">
+            <li className="logo rice-logo logo-wrapper"><a href="http://www.rice.edu">
                 <img src={riceLogo} alt="Rice University logo" height="30" width="79" />
-            </a>
+            </a></li>
             {showButton ? <JITLoad importFn={importGiveButton} /> : null}
-        </div>
+        </menu>
     );
 }

src/styles/main.scss

@@ -45,7 +45,8 @@ strong {
     font-weight: bold;
 }
 
-.no-bullets {
+.no-bullets,
+menu {
     // Hide bullets in IE
     list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
     list-style-type: none;