Skip to content

"Semantic Markup with HTML and ARIA" workshop - Main heading refactor idea with context #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
+357 −322
Draft

"Semantic Markup with HTML and ARIA" workshop - Main heading refactor idea with context #1

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02c1716
git pod stuff
aguscha333 Sep 25, 2022
c00779c
Set h1 inside header through context
aguscha333 Sep 25, 2022
e04e88f
Set main heading using useMainHeading hook
aguscha333 Sep 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .gitpod.yml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# This configuration file was automatically generated by Gitpod.
# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
# and commit this file to your remote git repository to share the goodness with others.

tasks:
- init: yarn install && yarn run build
command: yarn run start


59 changes: 31 additions & 28 deletions App.js
View file
Original file line number Diff line number Diff line change
@@ -21,36 +21,39 @@ import Exercise3NamesListingsPage from "./exercise3-accessible-names/page-listin
import Exercise4A11yInfoListingPage from "./exercise4-programmatic-a11y-info/page-listing-detail"

import imgFooterLogo from "images/icons/footer-logo.svg"
import { MainHeadingContextProvider } from "./components/main-heading-context"

export function App() {
return <>
<Header />
<div id="main">
<Router>
<HomePage path="/" />
<AboutPage path="/about" />
<CareersPage path="/careers" />
<ListingsPage path="/listings" />
<Listing path="/listing/:id" />
<SubmitListingPage path="/submit-listing" />
<EventsPage path="/events" />
<PassesPage path="/passes" />
<HikesPage path="/adventures-hikes" />
<TripIdeasPage path="/trip-ideas" />
<Exercise1ListingsPage path="/exercise1/listings" />
<Exercise1ListingPage path="/exercise1/:id" />
<Exercise2ARIAListingPage path="/exercise2/:id" />
<Exercise3NamesListingPage path="/exercise3/:id" />
<Exercise3NamesListingsPage path="/exercise3/listings" />
<Exercise4A11yInfoListingPage path="/exercise4/:id" />
</Router>
</div>
<div id="footer">
<div className="layout">
<div id="footer-logo">
<img src={imgFooterLogo} alt="CampSpots" />
return (
<MainHeadingContextProvider>
<Header />
<div id="main">
<Router>
<HomePage path="/" />
<AboutPage path="/about" />
<CareersPage path="/careers" />
<ListingsPage path="/listings" />
<Listing path="/listing/:id" />
<SubmitListingPage path="/submit-listing" />
<EventsPage path="/events" />
<PassesPage path="/passes" />
<HikesPage path="/adventures-hikes" />
<TripIdeasPage path="/trip-ideas" />
<Exercise1ListingsPage path="/exercise1/listings" />
<Exercise1ListingPage path="/exercise1/:id" />
<Exercise2ARIAListingPage path="/exercise2/:id" />
<Exercise3NamesListingPage path="/exercise3/:id" />
<Exercise3NamesListingsPage path="/exercise3/listings" />
<Exercise4A11yInfoListingPage path="/exercise4/:id" />
</Router>
</div>
<div id="footer">
<div className="layout">
<div id="footer-logo">
<img src={imgFooterLogo} alt="CampSpots" />
</div>
</div>
</div>
</div>
</>
</MainHeadingContextProvider>
)
}
9 changes: 6 additions & 3 deletions components/header.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import React from "react"
import React, { useContext } from "react"
import "./styles/header.scss"

import CampSpotsLogo from "images/icons/camp-spots-logo.svg"
import MegaNav from "./meganav/"
import { MainHeadingContext } from "./main-heading-context"

const Header = () => {
const {mainHeading} = useContext(MainHeadingContext);
return (
<div id="header">
<header id="header">
<h1 className="visually-hidden">{mainHeading}</h1>
<div id="header-nav">
<div id="header-logo">
<a href="/" className="header-main-item">
@@ -21,7 +24,7 @@ const Header = () => {
<a href="#">Login</a>
</div>
</div>
</div>
</header>
)
}

37 changes: 37 additions & 0 deletions components/main-heading-context.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React, { createContext, useContext, useEffect, useMemo, useState } from "react";

const DEFAULT_MAIN_HEADING = 'CampSpots'

// create context
const MainHeadingContext = createContext({ mainHeading: DEFAULT_MAIN_HEADING, setMainHeading: () => {} });

const MainHeadingContextProvider = ({ children }) => {
// the value that will be given to the context
const [mainHeading, setMainHeading] = useState(DEFAULT_MAIN_HEADING);

const context = useMemo(() => ({
mainHeading,
setMainHeading
}), [mainHeading, setMainHeading])

return (
// the Provider gives access to the context to its children
<MainHeadingContext.Provider value={context}>
{children}
</MainHeadingContext.Provider>
);
};

const useMainHeading = (mainHeading = '') => {
const {setMainHeading} = useContext(MainHeadingContext);

useEffect(() => {
const newMainHeading = `${DEFAULT_MAIN_HEADING}${mainHeading ? ' - ': ''}${mainHeading}`
setMainHeading(newMainHeading)

return () => setMainHeading(DEFAULT_MAIN_HEADING)
}, [mainHeading])

}

export {MainHeadingContext, MainHeadingContextProvider, useMainHeading}
34 changes: 16 additions & 18 deletions components/page-adventures-hikes.js
View file
Original file line number Diff line number Diff line change
@@ -7,8 +7,11 @@ import Slideshow from "components/slideshow/slideshow"

import "components/styles/page-adventure-ideas.scss"
import * as imageURLs from "../images/adventure-ideas/hikes/*.{png,jpg}"
import { useMainHeading } from "./main-heading-context"

const HikesPage = () => {
useMainHeading('CampSpots - Adventure Ideas: Hikes')

const images = [{
"src": "img1.jpg",
"alt": "",
@@ -28,24 +31,19 @@ const HikesPage = () => {
}]
return (
<BodyClassName className="header-overlap page-adventure-ideas">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section aria-labelledby="heading-1">
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style" id="heading-1">Adventure Ideas: Hikes</h2>
</div>
</header>
<article className="layout">
<div className="inspiration-slideshow">
<h3>Inspiration Gallery</h3>
<Slideshow images={images} imageURLs={imageURLs} />
</div>
</article>
</section>
</>
<section aria-labelledby="heading-1">
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style" id="heading-1">Adventure Ideas: Hikes</h2>
</div>
</header>
<article className="layout">
<div className="inspiration-slideshow">
<h3>Inspiration Gallery</h3>
<Slideshow images={images} imageURLs={imageURLs} />
</div>
</article>
</section>
</BodyClassName>
)
}
6 changes: 3 additions & 3 deletions components/page-careers.js
View file
Original file line number Diff line number Diff line change
@@ -4,8 +4,11 @@ import {Helmet} from "react-helmet"

import HeaderPortal from "components/header-portal"
import "components/styles/page-careers.scss"
import { useMainHeading } from "./main-heading-context"

const CareersPage = () => {
useMainHeading('Work with Us')

const closeBtnRef = useRef(null)
const customAmtRadio = useRef(null)

@@ -25,9 +28,6 @@ const CareersPage = () => {
return (
<BodyClassName className="header-overlap page-careers">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Work With Us</h2>
106 changes: 51 additions & 55 deletions components/page-events.js
View file
Original file line number Diff line number Diff line change
@@ -5,66 +5,62 @@ import {Helmet} from "react-helmet"
import HeaderPortal from "components/header-portal"
import "components/styles/page-events.scss"
import video from "images/camping-reel.mp4"
import { useMainHeading } from "./main-heading-context"

const EventsPage = () => {

// useMainHeading('Events')
return (
<BodyClassName className="header-overlap page-events">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section>
<header className="page-header">
<div className="header-video">
<video autoPlay muted loop>
<source src={video} />
Sorry, your browser doesn't support this video.
</video>
</div>
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Events</h2>
</div>
</header>
<article className="wide-layout two-parts-70-30">
<div>
<div className="headline-flex">
<h2>Looking for fun stuff to do? Join a community event!</h2>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32">
<path className="one" d="M16,26c1.1,0,2,0.9,2,2v2c0,1.1-0.9,2-2,2s-2-0.9-2-2v-2C14,26.9,14.9,26,16,26z" />
<path className="one" d="M16,6c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2s2,0.9,2,2v2C18,5.1,17.1,6,16,6z" />
<path className="one" d="M30,14c1.1,0,2,0.9,2,2s-0.9,2-2,2h-2c-1.1,0-2-0.9-2-2s0.9-2,2-2H30z" />
<path className="one" d="M6,16 c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2s0.9-2,2-2h2C5.1,14,6,14.9,6,16z" />
<path className="two" d="M25.9,23.1l1.4,1.4c0.8,0.8,0.8,2,0,2.8s-2,0.8-2.8,0l-1.4-1.4c-0.8-0.8-0.8-2,0-2.8S25.1,22.3,25.9,23.1z" />
<path className="two" d=" M6.1,8.9L4.7,7.5c-0.8-0.8-0.8-2,0-2.8s2-0.8,2.8,0l1.4,1.4c0.8,0.8,0.8,2,0,2.8S6.9,9.7,6.1,8.9z" />
<path className="two" d="M25.9,8.9c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8l1.4-1.4c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8L25.9,8.9z" />
<path className="two" d="M6.1,23.1c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8l-1.4,1.4c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8C4.7,24.5,6.1,23.1,6.1,23.1z" />
<path className="middle" d="M16,8c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S20.4,8,16,8z M16,21c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5
S18.8,21,16,21z" />
</svg>
</div>
<ul className="event-list">
<li><a href="https://summermeltdown.com/">Summer Meltdown Festival 2022</a> - July 28-31, Sky Meadows Park - Darrington, WA</li>
<li>YurtFest 2022 - August 5-7 - Deming, WA</li>
<li>Lopez Island Bikepacking Adventure - Ongoing - Lopez Island, WA</li>
<li>Mountain Loop Backpacking - September, dependent on conditions - Granite Falls, WA</li>
<li>Mountain bike skills workshops - All summer long - Bellingham, WA</li>
</ul>
</div>
<div className="aside">
<h3>Summer must-haves</h3>
<ul className="event-list">
<li>Camp towel</li>
<li>Backpacker water filter</li>
<li>Hip-pack</li>
<li>Sunscreen</li>
<li>Pizza slice pool float</li>
<li>Twinkle lights</li>
</ul>
<section>
<header className="page-header">
<div className="header-video">
<video autoPlay muted loop>
<source src={video} />
Sorry, your browser doesn't support this video.
</video>
</div>
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Events</h2>
</div>
</header>
<article className="wide-layout two-parts-70-30">
<div>
<div className="headline-flex">
<h2>Looking for fun stuff to do? Join a community event!</h2>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 32 32">
<path className="one" d="M16,26c1.1,0,2,0.9,2,2v2c0,1.1-0.9,2-2,2s-2-0.9-2-2v-2C14,26.9,14.9,26,16,26z" />
<path className="one" d="M16,6c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2s2,0.9,2,2v2C18,5.1,17.1,6,16,6z" />
<path className="one" d="M30,14c1.1,0,2,0.9,2,2s-0.9,2-2,2h-2c-1.1,0-2-0.9-2-2s0.9-2,2-2H30z" />
<path className="one" d="M6,16 c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2s0.9-2,2-2h2C5.1,14,6,14.9,6,16z" />
<path className="two" d="M25.9,23.1l1.4,1.4c0.8,0.8,0.8,2,0,2.8s-2,0.8-2.8,0l-1.4-1.4c-0.8-0.8-0.8-2,0-2.8S25.1,22.3,25.9,23.1z" />
<path className="two" d=" M6.1,8.9L4.7,7.5c-0.8-0.8-0.8-2,0-2.8s2-0.8,2.8,0l1.4,1.4c0.8,0.8,0.8,2,0,2.8S6.9,9.7,6.1,8.9z" />
<path className="two" d="M25.9,8.9c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8l1.4-1.4c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8L25.9,8.9z" />
<path className="two" d="M6.1,23.1c0.8-0.8,2-0.8,2.8,0s0.8,2,0,2.8l-1.4,1.4c-0.8,0.8-2,0.8-2.8,0s-0.8-2,0-2.8C4.7,24.5,6.1,23.1,6.1,23.1z" />
<path className="middle" d="M16,8c-4.4,0-8,3.6-8,8s3.6,8,8,8s8-3.6,8-8S20.4,8,16,8z M16,21c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5
S18.8,21,16,21z" />
</svg>
</div>
</article>
</section>
</>
<ul className="event-list">
<li><a href="https://summermeltdown.com/">Summer Meltdown Festival 2022</a> - July 28-31, Sky Meadows Park - Darrington, WA</li>
<li>YurtFest 2022 - August 5-7 - Deming, WA</li>
<li>Lopez Island Bikepacking Adventure - Ongoing - Lopez Island, WA</li>
<li>Mountain Loop Backpacking - September, dependent on conditions - Granite Falls, WA</li>
<li>Mountain bike skills workshops - All summer long - Bellingham, WA</li>
</ul>
</div>
<div className="aside">
<h3>Summer must-haves</h3>
<ul className="event-list">
<li>Camp towel</li>
<li>Backpacker water filter</li>
<li>Hip-pack</li>
<li>Sunscreen</li>
<li>Pizza slice pool float</li>
<li>Twinkle lights</li>
</ul>
</div>
</article>
</section>
</BodyClassName>
)
}
5 changes: 2 additions & 3 deletions components/page-home.js
View file
Original file line number Diff line number Diff line change
@@ -9,14 +9,13 @@ import imgTents from "images/tents.jpg"
import iconTag from "images/icons/icon-treetag.svg"
import iconBackpack from "images/icons/icon-backpack.svg"
import iconKayak from "images/icons/icon-kayak.svg"
import { useMainHeading } from "./main-heading-context"

const HomePage = () => {
useMainHeading('Homepage')
return (
<BodyClassName className="page-home">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<SearchForm />
<section aria-label="Site information">
<div className="wide-layout two-part-overlap">
6 changes: 3 additions & 3 deletions components/page-passes.js
View file
Original file line number Diff line number Diff line change
@@ -9,8 +9,11 @@ import iconProPlan from "images/icons/icon-proplan.svg"
import iconCreditCard from "images/icons/icon-credit-card.svg"
import iconPayPal from "images/icons/paypal-inactive-dark.svg"
import iconCreditCardTypes from "images/icons/credit-card-icons.png"
import { useMainHeading } from "./main-heading-context"

const PassesPage = () => {
useMainHeading('Classes')

const closeBtnRef = useRef(null)
const customAmtRadio = useRef(null)

@@ -30,9 +33,6 @@ const PassesPage = () => {
return (
<BodyClassName className="page-plans">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section className="layout-centered">
<header className="page-header">
<div className="page-header-content layout">
5 changes: 2 additions & 3 deletions components/page-submit-listing.js
View file
Original file line number Diff line number Diff line change
@@ -4,14 +4,13 @@ import {Helmet} from "react-helmet"
import HeaderPortal from "components/header-portal"

import "components/styles/page-submit-listing.scss"
import { useMainHeading } from "./main-heading-context"

const SubmitListingPage = () => {
useMainHeading('Submit your spot')
return (
<BodyClassName className="header-overlap page-submit-listing">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section aria-labelledby="heading-1">
<header className="page-header">
<div className="page-header-content layout">
27 changes: 12 additions & 15 deletions components/page-trip-ideas.js
View file
Original file line number Diff line number Diff line change
@@ -3,25 +3,22 @@ import BodyClassName from "react-body-classname"
import {Helmet} from "react-helmet"

import HeaderPortal from "components/header-portal"
import { useMainHeading } from "./main-heading-context"

const TripIdeasPage = () => {
useMainHeading('Trip Ideas')
return (
<BodyClassName className="page-plans">
<>
<HeaderPortal>
<h1 className="visually-hidden">CampSpots</h1>
</HeaderPortal>
<section>
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Trip Ideas</h2>
</div>
</header>
<article className="layout">

</article>
</section>
</>
<section>
<header className="page-header">
<div className="page-header-content layout">
<h2 className="primary-heading h1-style">Trip Ideas</h2>
</div>
</header>
<article className="layout">

</article>
</section>
</BodyClassName>
)
}
91 changes: 45 additions & 46 deletions exercise1-headings-landmarks/page-listing-detail.js
View file
Original file line number Diff line number Diff line change
@@ -12,59 +12,58 @@ import ListingsData from "data/listings.json"
import DatePicker from "components/date-picker/date-picker"

import * as imageURLs from "../images/listings/*.{png,jpg}"
import { useMainHeading } from "../components/main-heading-context"

const Exercise1ListingPage = props => {
const data = ListingsData.listings[props.id]
const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc)

useMainHeading(data.listingName)

return (
<BodyClassName className="header-overlap page-listing-detail">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />

<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</>
<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</BodyClassName>
)
}
6 changes: 3 additions & 3 deletions exercise1-headings-landmarks/page-listings.js
View file
Original file line number Diff line number Diff line change
@@ -11,14 +11,14 @@ import ListingExcerpt from "./listing-excerpt"
import DropdownList from "components/dropdown-list"

import * as imageURLs from "../images/listings/*.{png,jpg}"
import { useMainHeading } from "../components/main-heading-context"

const Exercise1ListingsPage = () => {
useMainHeading('Listings')

return (
<BodyClassName className="page-listings">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<div className="wide-layout listings-header">
<h2>Listings</h2>
<DropdownList defaultItemText="All site types" items={["Campgrounds", "State Parks", "Tent sites", "National Parks"]} />
91 changes: 45 additions & 46 deletions exercise2-what-is-aria/page-listing-detail.js
View file
Original file line number Diff line number Diff line change
@@ -12,59 +12,58 @@ import ListingsData from "data/listings.json"
import DatePicker from "./date-picker"

import * as imageURLs from "../images/listings/*.{png,jpg}"
import { useMainHeading } from "../components/main-heading-context"

const Exercise2ARIAListingPage = props => {
const data = ListingsData.listings[props.id]
const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc)

useMainHeading(data.listingName)

return (
<BodyClassName className="header-overlap page-listing-detail">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />

<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</>
<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</BodyClassName>
)
}
90 changes: 44 additions & 46 deletions exercise3-accessible-names/page-listing-detail.js
View file
Original file line number Diff line number Diff line change
@@ -12,59 +12,57 @@ import ListingsData from "data/listings.json"
import DatePicker from "./date-picker"

import * as imageURLs from "../images/listings/*.{png,jpg}"
import { useMainHeading } from "../components/main-heading-context"

const Exercise3NamesListingPage = props => {
const data = ListingsData.listings[props.id]
const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc)

useMainHeading(data.listingName)
return (
<BodyClassName className="header-overlap page-listing-detail">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />

<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</>
<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</BodyClassName>
)
}
6 changes: 3 additions & 3 deletions exercise3-accessible-names/page-listings.js
View file
Original file line number Diff line number Diff line change
@@ -11,14 +11,14 @@ import ListingExcerpt from "./listing-excerpt"
import DropdownList from "components/dropdown-list"

import * as imageURLs from "../images/listings/*.{png,jpg}"
import { useMainHeading } from "../components/main-heading-context"

const Exercise3NamesListingsPage = () => {
useMainHeading('Listings')

return (
<BodyClassName className="page-listings">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<div className="wide-layout listings-header">
<h2>Listings</h2>
<DropdownList defaultItemText="All site types" items={["Campgrounds", "State Parks", "Tent sites", "National Parks"]} />
91 changes: 45 additions & 46 deletions exercise4-programmatic-a11y-info/page-listing-detail.js
View file
Original file line number Diff line number Diff line change
@@ -12,59 +12,58 @@ import ListingsData from "data/listings.json"
import DatePicker from "./date-picker"

import * as imageURLs from "../images/listings/*.{png,jpg}"
import { useMainHeading } from "../components/main-heading-context"

const Exercise4A11yInfoListingPage = props => {
const data = ListingsData.listings[props.id]
const headerImageUrl = LoadedImageUrl(imageURLs, data.detailHeaderImageSrc)

useMainHeading(data.listingName)

return (
<BodyClassName className="header-overlap page-listing-detail">
<>
<HeaderPortal>
<h1 className="visually-hidden">Camp Spots</h1>
</HeaderPortal>
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />
<article>
<header
className="page-header"
style={{backgroundImage: `url(${headerImageUrl}`}}
>
<div className="page-header-content wide-layout">
<h2 className="listing-name">{data.listingName}</h2>
<p className="location">{data.location}</p>
</div>
</header>
<section className="wide-layout two-parts-70-30" aria-label="Site description and booking calendar">
<div>
<h3 className="h4-style">Description</h3>
<div className="description-text" dangerouslySetInnerHTML={{__html: sanitizeHtml(data.description)}} />

<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</>
<h3 className="h4-style">Amenities</h3>
<ul className="amenity-icons grid">
{data.amenities.map((amenity, index) => {
return <li key={index}>
<Icon name={amenity} showText={true} />
</li>
})}
</ul>
</div>
<div>
<h3 className="h4-style">Calendar</h3>
<DatePicker />
</div>
</section>
<section className="wide-layout" aria-label="Image gallery">
<div className="detail-images">
{data.detailImages.map((image, index) => {
let detailImageUrl = LoadedImageUrl(imageURLs, image.imageSrc)
return <img
key={index}
src={detailImageUrl}
alt={image.imageAlt}
/>
})}
</div>
</section>
</article>
</BodyClassName>
)
}
1 change: 0 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -6,7 +6,6 @@
<title>CampSpots</title>
</head>
<body>
<div id="portal-root"></div>
<div id="app-root"></div>
<script type="module" src="index.js"></script>
</body>