make site valid in accordance to W3C validator..

Fixes gitpod-io/website#842
gitpod-io · Jan 7, 2021 · b96ebcf · b96ebcf
1 parent 49c7da9
commit b96ebcf
Show file tree

Hide file tree

Showing 25 changed files with 116 additions and 84 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -27,6 +27,10 @@ const StyledBanner = styled.header`
     text-align: center;
   }
 
+  .sub {
+      display: block;
+  }
+
   .para {
     margin-top: 3rem;
 
@@ -76,10 +80,10 @@ const Banner: React.SFC<BannerProps> = ({ subtitle, title, paragraph, linkPath,
   <div className="row pattern">
     <StyledBanner role="banner" className="banner">
       <div className="banner__text">
-        <header>
-            <p className="sub h3">{subtitle}</p>
+        <h1>
+            <span className="sub h3">{subtitle}</span>
             {title}
-        </header>
+        </h1>
         {paragraph ? <p className="para">{paragraph}</p> : null}
         {link(linkPath, linkText, '', true, false)}
         {children}

diff --git a/src/components/FeatureCard.tsx b/src/components/FeatureCard.tsx
@@ -43,7 +43,7 @@ const Styled = styled.div<{
 
   &:nth-of-type(2n) {
     @media (min-width: 1141px) {
-      flex-direction: ${({ opposite }) => (opposite ? 'reverse' : 'row-reverse')};
+      flex-direction: ${({ opposite }) => (opposite ? 'row' : 'row-reverse')};
     }
 
     @media (min-width: 1141px) {

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -16,14 +16,26 @@ const StyledFooter = styled.footer`
         flex-wrap: wrap;
 
         @media(max-width: 650px) {
-            justify-content: space-between;
+            justify-content: center;
 
             ul {
                 padding-bottom: 4rem;
                 border-bottom: 1px solid #ddd;
                 width: 48%;
                 text-align: center;
 
+                @media(max-width: 650px) {
+                    width: 46%;
+                    margin-left: 2%;
+                    margin-right: 2%;
+                }
+
+                @media(max-width: 400px) {
+                    width: 48%;
+                    margin-left: 1%;
+                    margin-right: 1%;
+                }
+
                 &:not(:last-child) {
                     margin-bottom: 5rem;
                 }
@@ -34,13 +46,16 @@ const StyledFooter = styled.footer`
                     img {
                         transform: translateX(1rem);
                     }
+
+                    @media(max-width: 650px) {
+                        transform: none;
+                    }
                 }
             }
         }
     }
 
     li {
-
         &:not(:last-child) {
             margin-bottom: 1.6rem;
         }
@@ -79,6 +94,8 @@ const StyledFooter = styled.footer`
     }
 
     .contact {
+        max-width: 11rem;
+
         li:not(:first-child) {
             display: inline-block;
             margin-left: 2rem;
@@ -173,7 +190,6 @@ const Footer: React.SFC<{}> = () => (
                             </svg>
                         </a>
                     </li>
-                    <br aria-hidden={true} />
                     <li>
                         <a href="https://twitter.com/gitpod" target="_blank" rel="noopener" title="Twitter">
                             <svg

diff --git a/src/components/MoreInfo.tsx b/src/components/MoreInfo.tsx
@@ -91,14 +91,14 @@ const PricingLinks = ({ img, title, text, links, backgroundShouldBeWhite }: Pric
   return (
     <div
       className="pattern-bg"
-      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', background: backgroundShouldBeWhite ? 'none' : '' }}
+      style={{ marginBottom: backgroundShouldBeWhite ? '' : '10rem', ...(backgroundShouldBeWhite && {background: 'none'}) }}
     >
       <div className="row">
         <StyledPricingLinks>
           {Img}
           <div>
             <h2>{Title}</h2>
-            <p>{Text}</p>
+            {Text}
             <span className="btn-wrapper">{Links}</span>
           </div>
         </StyledPricingLinks>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -242,7 +242,7 @@ const Nav = () => {
                     <div className="nav__burger-container">
                         <Link to="/"><img alt="Gitpod Logo" src={GitpodLogoDark} /></Link>
                         <div className="btns">
-                            <a href="https://gitpod.io/login/" rel="noopener" style={{ display: isNavRendered ? 'none' : '' }}>Log In</a>
+                            <a href="https://gitpod.io/login/" rel="noopener" style={{...(isNavRendered && { display: 'none'})}}>Log In</a>
                             <div className="nav__btn-container" aria-live="assertive">
                                 <button
                                     className="nav__btn"

diff --git a/src/components/PopOver.tsx b/src/components/PopOver.tsx
@@ -77,7 +77,7 @@ const StyledDescripion = styled.span`
     }
 `
 
-class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string }, {}> {
+class Description extends React.Component<{ description: string | JSX.Element; textPosition?: string; questionMarkShouldNotBeAButton?: boolean }, {}> {
   state = {
     isRendered: false
   }
@@ -96,7 +96,7 @@ class Description extends React.Component<{ description: string | JSX.Element; t
 
   render() {
     const { isRendered } = this.state
-    const { description } = this.props
+    const { description, questionMarkShouldNotBeAButton } = this.props
     const positionBottom = this.props.textPosition === 'bottom'
 
     return (
@@ -107,7 +107,9 @@ class Description extends React.Component<{ description: string | JSX.Element; t
         onFocus={this.handleMouseEnter}
         onBlur={this.handleMouseLeave}
       >
-        <button onClick={this.handleClick}>?</button>
+        {
+            questionMarkShouldNotBeAButton ? <span onClick={this.handleClick} tabIndex={1}>?</span> : <button onClick={this.handleClick}>?</button>
+        } 
         {isRendered ? <div className={`${positionBottom ? 'bottom' : ''} description__text`}>{description}</div> : null}
       </StyledDescripion>
     )

diff --git a/src/components/TrustedBy.tsx b/src/components/TrustedBy.tsx
@@ -78,7 +78,7 @@ const StyledTrustedBy = styled.section`
   }
 `
 
-const StyledBrandImage = styled.img<{ transform?: string }>`
+const StyledBrandImage = styled.img<{ transformValue?: string }>`
     width: 9.5rem;
 
     @media(max-width: ${sizes.breakpoints.lg}) {
@@ -90,7 +90,7 @@ const StyledBrandImage = styled.img<{ transform?: string }>`
     }
 
     @media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
-        transform: ${({ transform }) => (transform ? transform : 'none')};
+        transform: ${({ transformValue }) => (transformValue ? transformValue : 'none')};
     }
 `
 
@@ -117,7 +117,7 @@ const TrustedBy = ({ brands, title, styles }: TrustedByProps) => (
       <div className="logos">
         {brands.map((b: Brand) => (
           <a href={b.url} target="_blank" className="trustedBy">
-            <StyledBrandImage src={b.svg} alt={b.alt} transform={b.transform} className={b.className} />
+            <StyledBrandImage src={b.svg} alt={b.alt} transformValue={b.transform} className={b.className} />
           </a>
         ))}
       </div>

diff --git a/src/components/blog/PostPreview.tsx b/src/components/blog/PostPreview.tsx
@@ -48,6 +48,10 @@ const StyledPostPreview = styled.div`
         font-weight: 400;
         flex-wrap: wrap;
     }
+
+    .author-name {
+        font-weight: 600;
+    }
 `
 
 interface BlogData {
@@ -102,7 +106,7 @@ const PostPreview: React.SFC<PostPreviewProps> = (props) => {
                     <span>
                         by {
                             authors.map((author, idx) => <React.Fragment>
-                                <a href={`https://github.com/${author.socialProfiles.github}`} target="_blank">{author.name}</a>{idx < authors.length - 1 ? ', ' : ''}
+                                <span className="author-name">{author.name}</span>{idx < authors.length - 1 ? ', ' : ''}
                             </React.Fragment>)
                         }
                     </span>

diff --git a/src/components/features/Intro.tsx b/src/components/features/Intro.tsx
@@ -63,7 +63,7 @@ const Intro = () => (
   <div className="row">
     <Styled>
       <section className="intro pattern">
-        <object role="presentation" tabIndex={-1} data={IceStick} className="ice-stick" />
+        <object tabIndex={-1} data={IceStick} className="ice-stick" />
         <h1>Features</h1>
         <div className="features">
           {features.map((f, i) => (

diff --git a/src/components/index/GetStarted.tsx b/src/components/index/GetStarted.tsx
@@ -74,7 +74,7 @@ const GetStarted = () => (
         {projects.map((project, i) => (
           <Project
             key={i}
-            image={<object role="presentation" tabIndex={-1} data={project.image} />}
+            image={<object tabIndex={-1} data={project.image} />}
             title={project.title}
             githubUrl={project.githubUrl}
             gitlabUrl={project.gitlabUrl}

diff --git a/src/components/index/PrefixInput.tsx b/src/components/index/PrefixInput.tsx
@@ -272,41 +272,41 @@ const PrefixInput = () => {
 
     return (
         <Styled>
-            <div className="header" aria-hidden="true">
-                <div className="dots">
+            <span className="header" aria-hidden="true">
+                <span className="dots">
                     <span>&nbsp;</span>
                     <span>&nbsp;</span>
                     <span>&nbsp;</span>
-                </div>
-                <div className="tab">
-                    <div className="bar">
+                </span>
+                <span className="tab">
+                    <span className="bar">
                         &nbsp;
-                </div>
+                </span>
                     <img src={Close} />
-                </div>
-                <div className="new-tab">
+                </span>
+                <span className="new-tab">
                     <img src={Plus} />
-                </div>
-            </div>
-            <div className="main">
-                <div className="bar-container" aria-hidden="true">
-                    <div className="bar">&nbsp;</div>
-                    <div className="bar">&nbsp;</div>
-                    <div className="bar">&nbsp;</div>
-                </div>
-                <div className="input-container">
-                    <div className="label">
+                </span>
+            </span>
+            <span className="main">
+                <span className="bar-container" aria-hidden="true">
+                    <span className="bar">&nbsp;</span>
+                    <span className="bar">&nbsp;</span>
+                    <span className="bar">&nbsp;</span>
+                </span>
+                <span className="input-container">
+                    <span className="label">
                         <img src={World} aria-hidden="true" />
                         <span>https://gitpod.io/#</span>
-                    </div>
+                    </span>
                     <span className="wrapper">
                         <input
                             defaultValue={url}
                             onKeyPress={handleReturn}
                             onChange={handleChange}
                             type="text"
                         />
-                        <div className="message" style={ error ? {color: '#bf4338'} : {}}>
+                        <span className="message" style={ error ? {color: '#bf4338'} : {}}>
                             <>
                                 <p>
                                     { error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' }
@@ -320,13 +320,13 @@ const PrefixInput = () => {
                                     Start Workspace
                                 </a>
                             </>
-                        </div>
+                        </span>
                     </span>
-                </div>
-            </div>
-            <div className="info">
+                </span>
+            </span>
+            <span className="info">
                 &nbsp;
-            </div>
+            </span>
         </Styled>
     )
 }

diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx
@@ -52,7 +52,7 @@ const TextFeature = ({ path, alt, title, text, btnText, href }: TextFeatureProps
     <h3>
       <strong>{title}</strong>
     </h3>
-    <p>{text}</p>
+    <>{text}</>
     {btnText ? (
       <a href={href} target="_blank" className="btn">
         {btnText}

diff --git a/src/components/pricing/PricingBoxes.tsx b/src/components/pricing/PricingBoxes.tsx
@@ -52,7 +52,7 @@ const selfHostedPlans: PricingBoxProps[] = [
   {
     title: 'Free',
     duration: 'Unlimited users',
-    img: <object role="presentation" tabIndex={-1} data={Cloud} />,
+    img: <object tabIndex={-1} data={Cloud} />,
     features: ['Unlimited Use', 'Private & Public Repos'],
     price: (
       <>
@@ -84,7 +84,7 @@ const selfHostedPlans: PricingBoxProps[] = [
 const plans: PricingBoxProps[] = [
   {
     title: 'Free',
-    img: <object role="presentation" tabIndex={-1} data={IconOpenSource} />,
+    img: <object tabIndex={-1} data={IconOpenSource} />,
     price: (
       <>
         {isEurope() ? '€0' : '$0'}
@@ -95,7 +95,7 @@ const plans: PricingBoxProps[] = [
   },
   {
     title: 'Personal',
-    img: <object role="presentation" tabIndex={-1} data={LightBulb} />,
+    img: <object tabIndex={-1} data={LightBulb} />,
     price: (
       <>
         {isEurope() ? '€8' : '$9'}
@@ -145,7 +145,7 @@ const plans: PricingBoxProps[] = [
   },
   {
     title: 'Unlimited',
-    img: <object role="presentation" tabIndex={-1} data={MagicCap} />,
+    img: <object tabIndex={-1} data={MagicCap} />,
     price: (
       <>
         {isEurope() ? '€35' : '$39'}
@@ -278,7 +278,7 @@ const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => {
               ))}
             </div>
             <div className={`pricing__boxes ${isRendered ? 'show' : 'hide'}`}>
-              <object role="presentation" tabIndex={-1} data={Cloud} className="cloud-img cloud-img--1" />
+              <object tabIndex={-1} data={Cloud} className="cloud-img cloud-img--1" />
               {selfHostedPlans.map((plan, i) => (
                 <PricingBox 
                     key={i} 
@@ -287,7 +287,7 @@ const PricingBoxes = ({ isRendered, changeIsRendered }: PricingBoxesProps) => {
                     headingLevel="h2"
                 />
               ))}
-              <object role="presentation" tabIndex={-1} data={Cloud} className="cloud-img cloud-img--2" />
+              <object tabIndex={-1} data={Cloud} className="cloud-img cloud-img--2" />
             </div>
           </div>
           <p>