update starting points

App.js

@@ -28,7 +28,7 @@ export function App() {
 
 	return <AppContext.Provider value={context}>
 		<Header inert={inertMarkupValue ? 'inert' : null} />
-		<main id="main" inert={inertMarkupValue ? 'inert' : null}>
+		<div id="main" inert={inertMarkupValue ? 'inert' : null}>
 			<Router>
 				<HomePage path="/" />
 				<AboutPage path="/about" />
@@ -41,14 +41,14 @@ export function App() {
 				<HikesPage path="/adventures-hikes" />
 				<TripIdeasPage path="/trip-ideas" />
 			</Router>
-		</main>
+		</div>
 		<footer id="footer" inert={inertMarkupValue ? 'inert' : null}>
 			<div className="layout">
 				<div id="footer-logo">
 					<img src={imgFooterLogo} alt="logo" />
 				</div>
 			</div>
-		</footer>
+		</div>
 	</AppContext.Provider>
 }
 

components/__tests__/icon-button.test.js

@@ -11,13 +11,8 @@
 
  const user = userEvent.setup()
 
- xdescribe('IconButton', () =>{
-     xit('labels the button', () => {
-         const textFixture = "Send it!"
-         const { getByLabelText } = render(<IconButton name={textFixture} />)
-
-         const buttonText = getByLabelText(textFixture)
-
-         expect(buttonText).toBeInTheDocument()
+describe('IconButton', () =>{
+     it('labels the button', () => {
+
      })
  })

components/header.js

@@ -6,7 +6,7 @@ import MegaNav from "./meganav/"
 
 const Header = ({inert}) => {
     return (
-        <header id="header" inert={inert}>
+        <div id="header" inert={inert}>
             <div id="header-nav">
                 <div id="header-logo">
                     <a href="/" className="header-main-item">
@@ -21,7 +21,7 @@ const Header = ({inert}) => {
                     <a href="#">Login</a>
                 </div>
             </div>
-        </header>
+        </div>
     )
 }
 

components/page-home.js

@@ -20,7 +20,7 @@ const HomePage = () => {
                 <SearchForm />
                 <div className="wide-layout two-part-overlap">
                     <div className="content-block-wrap">
-                        <img src={imgTents} alt="tents"/>
+                        <img src={imgTents} />
                         <div className="content-block">
                             <h3>Rest and relaxation is a part of life</h3>
                             <div>We know you need a break. Get out of town, or stay and play. Taking rest and time away from the daily grind of life is essential for maintaining balance and positive well-being.</div>

components/payment-form/presets-custom-amounts.js

@@ -1,17 +1,12 @@
 import React, {useRef, useState} from "react"
 
 const PresetsCustomAmounts = ({amounts}) => {
-    const [selectedOption, setSelectedOption] = useState(false)
     const customAmtRadio = useRef(null)
 
     const focusInCustomInput = () => {
         customAmtRadio.current.checked = true
     }
-    const handleChange = (event) => {
-        if (event.target.checked) {
-            setSelectedOption(event.target.value)
-        }
-    }
+
     return (
         <>
             {amounts.map((amount, index)=> {
@@ -29,10 +24,8 @@ const PresetsCustomAmounts = ({amounts}) => {
             })}
             <label className="custom-radio-group">
                 <input
-                    checked={selectedOption === 'Custom'}
                     id="amt_custom"
                     name="amounts"
-                    onChange={(event) => handleChange(event)}
                     ref={customAmtRadio}
                     type="radio"
                     value="Custom"

exercise2-cypress-components/answer/meganav.t.js

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { mount } from '@cypress/react'
+
+import MegaNav from './meganav/index'
+
+xdescribe('MegaNav', () => {
+  beforeEach(() => {
+    mount(<MegaNav />)
+    cy.injectAxe()
+  })
+
+  it('should operate with the keyboard via toggle buttons', () => {
+    cy.get('button[data-testid="megamenu-section1"]').focus().click()
+
+    cy.focused().should('have.attr', 'aria-expanded', 'true')
+
+    cy.focused().type('{esc}').should('have.attr', 'aria-expanded', 'false')
+  })
+
+  it('submenus should not be reachable when closed', () => {
+    cy.get('button[data-testid="megamenu-section1"]').focus().realPress('Tab')
+
+    cy.focused().should('not.have.attr', '[data-testid="link-0"]')
+    cy.focused().then(($el) => {
+      expect($el).to.have.attr('data-testid', 'megamenu-section2')
+    })
+  })
+
+  it('should reach open submenu items with the keyboard', () => {
+    cy.get('button[data-testid="megamenu-section2"]').focus().click()
+
+    cy.focused().realPress('Tab')
+
+    cy.focused().then(($el) => {
+      expect($el).to.have.attr('data-testid', 'link-0')
+    })
+  })
+
+  it('should have no accessibility issues when open', () => {
+      cy.get('button[data-testid="megamenu-section1"]').click()
+
+      cy.checkA11y(null, {
+          runOnly: {
+              type: 'rule',
+              values: ['color-contrast']
+          }
+      })
+  })
+})