Address accessibility issues, adjust header alignment.

samvera-labs · Sep 13, 2023 · 6358494 · 6358494
1 parent d0105d1
commit 6358494
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 26 deletions.
diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./index.tsx"></script>
+    <script type="module" src="/src/dev.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "clean": "rimraf dist",
     "coverage": "vitest --ui --coverage",
     "dev": "next dev",
+    "dev:vite": "vite",
     "prepublishOnly": "npm run build",
     "start": "next start",
     "test": "vitest",

diff --git a/pages/index.mdx b/pages/index.mdx
@@ -24,16 +24,16 @@ import "swiper/css/pagination";
 <HomepageHeader />
 <Splash>
   <SplashElement
-    css={{ height: "61.8vh" }}
+    css={{ height: "820px" }}
     text="Viewer"
     component={
       <Viewer
         iiifContent="https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif"
         options={{
-          showTitle: false,
-          showInformationToggle: false,
-          showIIIFBadge: false,
-          canvasBackgroundColor: "transparent"
+          canvasHeight: "600px",
+          informationPanel: {
+            open: true,
+          }
         }}
       />
     }
@@ -45,7 +45,7 @@ import "swiper/css/pagination";
   </SplashElement>
   <SplashElement
     text="Slider"
-    css={{ height: "38.2vh" }}
+    css={{ height: "600px" }}
     component={
       <Slider collectionId="https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif" />
     }

diff --git a/src/components/Slider/Header/Control.styled.ts b/src/components/Slider/Header/Control.styled.ts
@@ -38,12 +38,12 @@ const ControlStyled = styled("button", {
 
   [`&:disabled`]: {
     [`> ${Icon}`]: {
-      backgroundColor: "$secondaryAlt",
+      backgroundColor: "#6663",
       boxShadow: "none",
 
       svg: {
-        fill: "$secondaryMuted",
-        stroke: "$secondaryMuted",
+        fill: "$secondary",
+        stroke: "$secondary",
         filter: "unset",
       },
     },

diff --git a/src/components/Slider/Header/Header.styled.ts b/src/components/Slider/Header/Header.styled.ts
@@ -33,7 +33,6 @@ const HeaderStyled = styled("div", {
   },
 
   ".clover-slider-header-homepage": {
-    color: "$accent",
     textDecoration: "none",
   },
 

diff --git a/src/components/Slider/Header/Header.tsx b/src/components/Slider/Header/Header.tsx
@@ -76,13 +76,10 @@ const Header: React.FC<HeaderProps> = ({
           </Icon>
         </ControlStyled>
         {hasHomepage && (
-          <Homepage
-            // @ts-ignore
+          <ViewAll
             homepage={homepage}
             className="clover-slider-header-view-all"
-          >
-            <ViewAll />
-          </Homepage>
+          />
         )}
       </HeaderControls>
     </HeaderStyled>

diff --git a/src/components/Slider/Header/ViewAll.tsx b/src/components/Slider/Header/ViewAll.tsx
@@ -1,23 +1,24 @@
+import { Homepage } from "src/components/Primitives";
 import React from "react";
 import { styled } from "src/styles/stitches.config";
 
-const ViewAllStyled = styled("span", {
+const ViewAllStyled = styled(Homepage, {
   display: "flex",
-  background: "none",
+  backgroundColor: "$accent",
+  color: "$secondary",
   height: "2rem !important",
   padding: "0 $3",
   margin: "0 0 0 $3",
   borderRadius: "2rem",
-  backgroundColor: "$accent",
-  color: "$secondary",
   cursor: "pointer",
   boxSizing: "content-box !important",
   transition: "$all",
   justifyContent: "center",
   alignItems: "center",
-  fontSize: "0.8333rem",
   lineBreak: "none",
   whiteSpace: "nowrap",
+  textDecoration: "none !important",
+  fontSize: "0.8333rem",
 
   [`&:hover`]: {
     backgroundColor: "$accentAlt",
@@ -29,8 +30,8 @@ const ViewAllStyled = styled("span", {
   },
 });
 
-const ViewAll = () => {
-  return <ViewAllStyled>View All</ViewAllStyled>;
+const ViewAll = (props) => {
+  return <ViewAllStyled {...props}>View All</ViewAllStyled>;
 };
 
 export default ViewAll;
diff --git a/src/components/Viewer/Viewer/Header.styled.ts b/src/components/Viewer/Viewer/Header.styled.ts
@@ -59,6 +59,7 @@ const Header = styled("header", {
   backgroundColor: "transparent !important",
   justifyContent: "space-between",
   alignItems: "flex-start",
+  width: "100%",
 
   [`> ${CollectionStyled}`]: {
     flexGrow: "1",
@@ -74,9 +75,10 @@ const Header = styled("header", {
 const HeaderOptions = styled("div", {
   display: "flex",
   alignItems: "flex-end",
+  justifyContent: "flex-end",
   padding: "1rem",
   flexShrink: "0",
-  flexGrow: "0",
+  flexGrow: "1",
 });
 
 export {

diff --git a/src/components/Viewer/Viewer/Toggle.tsx b/src/components/Viewer/Viewer/Toggle.tsx
@@ -29,6 +29,8 @@ const Toggle = () => {
         checked={checked}
         onCheckedChange={() => setChecked(!checked)}
         id="information-toggle"
+        aria-label="information panel toggle"
+        name="toggled?"
       >
         <StyledThumb />
       </StyledSwitch>

diff --git a/src/dev.tsx b/src/dev.tsx
@@ -0,0 +1,79 @@
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+import {
+  Homepage,
+  Label,
+  Metadata,
+  PartOf,
+  RequiredStatement,
+  SeeAlso,
+  Summary,
+  Thumbnail,
+} from "src/components/Primitives";
+import {
+  IIIFExternalWebResource,
+  InternationalString,
+  Manifest,
+  MetadataItem,
+} from "@iiif/presentation-3";
+import {
+  PrimitivesExternalWebResource,
+  PrimitivesIIIFResource,
+} from "./types/primitives";
+import React, { useEffect, useState } from "react";
+
+import ReactDOM from "react-dom/client";
+import Slider from "src/components/Slider";
+import Viewer from "src/components/Viewer";
+
+const App = () => {
+  const [manifest, setManifest] = useState<Manifest>();
+
+  const manifestId =
+    "https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif";
+  const collectionId =
+    "https://api.dc.library.northwestern.edu/api/v2/collections/c373ecd2-2c45-45f2-9f9e-52dc244870bd?as=iiif";
+
+  useEffect(() => {
+    (async () => {
+      const data = await fetch(manifestId).then((response) => response.json());
+      setManifest(data);
+    })();
+  }, [manifest]);
+
+  if (!manifest) return null;
+
+  return (
+    <div style={{ padding: "1rem" }}>
+      <Viewer iiifContent={manifestId} />
+      <Slider iiifContent={collectionId} />
+      <article>
+        <Label label={manifest.label} as="h1" />
+        <Summary summary={manifest.summary as InternationalString} />
+        <Metadata metadata={manifest.metadata as MetadataItem[]} />
+        <RequiredStatement
+          requiredStatement={manifest.requiredStatement as MetadataItem}
+        />
+        <Homepage
+          homepage={manifest.homepage as PrimitivesExternalWebResource[]}
+        />
+        <PartOf partOf={manifest.partOf as PrimitivesIIIFResource[]} />
+        <SeeAlso
+          seeAlso={manifest.seeAlso as PrimitivesExternalWebResource[]}
+        />
+        <Thumbnail
+          thumbnail={manifest.thumbnail as IIIFExternalWebResource[]}
+          altAsLabel={manifest.label as InternationalString}
+        />
+      </article>
+    </div>
+  );
+};
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/src/styles/stitches.config.tsx b/src/styles/stitches.config.tsx
@@ -16,9 +16,9 @@ export const theme = {
      * Key brand color(s).
      * Must contrast to 4.5 or greater with `secondary`.
      */
-    accent: `hsl(${hue} 100% 45%)`,
+    accent: `hsl(${hue} 100% 38.2%)`,
     accentMuted: `hsl(${hue} 80% 61.8%)`,
-    accentAlt: `hsl(${hue} 80% 38.2%)`,
+    accentAlt: `hsl(${hue} 80% 30%)`,
 
     /*
      * White and light grays in a light theme.