Merge pull request #193 from ASSETS-Conference/dev

src/app/attending/accessibility-faq/page.js

@@ -67,7 +67,7 @@ export default function Registration() {
                 }
                 spacing={"bottom-only"}
             >
-                <h2>{`Wheelchair Accessible Taxis Available. Best to Book Ahead`}</h2>
+                <h2 id="wheelchair-accessible-taxis">{`Wheelchair Accessible Taxis Available. Best to Book Ahead`}</h2>
                 <ul>
                     <li>
                         {`During the day up to 8:00 pm, there are approximately 8 to 10 wheelchair accessible taxis with trained drivers available upon request via the dispatcher at the airport.`}
@@ -76,7 +76,7 @@ export default function Registration() {
                         {`If arriving after 8:00 pm individuals need to call ahead and make special arrangements to have an accessible taxi available at the airport. Though special arrangements can be made for accessible taxis after 8:00 pm, it is advisable to arrive before 8:00 pm. To save time, individuals needing an accessible taxi before 8:00 pm are advised to call ahead to ensure an accessible taxi is dispatched for your arrival. In general, none of the taxis that wait at the airport during busy arrival times are accessible. Book ahead by calling City Wide Taxi +1(709) 722-7777, or see the airport dispatcher just outside the arrivals door if arriving between 8:00 am and 8:00 pm, and they will call for an accessible taxi.`}
                     </li>
                 </ul>
-                <h3>No Automatically Accessible Taxis Upon Arrival</h3>
+                <h3 id="no-automatic-a11y-taxis">No Automatically Accessible Taxis Upon Arrival</h3>
                 <ul>
                     <li>
                         {`Individuals must book ahead to make special arrangements if arriving after 8:00 pm (No extra fee to book ahead).`}
@@ -97,7 +97,7 @@ export default function Registration() {
                         {`City Wide is one of 3 taxi services under one company.  Bugden's and Newfound Cabs, are the other two companies.`}
                     </li>
                 </ul>
-                <h2>{`Public Transit Option`}</h2>
+                <h2 id="public-transit">{`Public Transit Options`}</h2>
                 <p>
                     <Link href={"https://metrobus.com/home/"}>Metrobus</Link>
                     {` is the local public city transit authority. They currently have `}

src/app/attending/registration/page.js

@@ -16,14 +16,15 @@ export default function Registration() {
                 <Alert
                     className={"mb-5"}
                     raw={true}
-                    // heading={"All CFPs are now Live on PCS for Submission"}
+                    type={'changes'}
+                    heading={"Registration Now Open"}
                 >
                     <p>
-                        {`Full details of our in-person and virtual conference experiences will be published as they become available. In the meantime, we have opened registration on the `}
+                        {`We have opened registration on the `}
                         <Link href={`https://cvent.me/45nlmw`}>
                             CVENT Registration Site
                         </Link>
-                        {` to support attendees who may need additional time to make plans (e.g., travel, visa).`}
+                        {` to support attendees who may need additional time to make plans (e.g., travel, visa). Full details of our in-person and virtual conference experiences will be published as they continue to become available.`}
                     </p>
                 </Alert>
             }

src/app/attending/scholarships/page.js

@@ -20,10 +20,10 @@ export default function Scholarships() {
                 spacing={"bottom-only"}
             >
                 <p>{`ASSETS’24 is pleased to offer scholarships to support virtual conference attendance. Awardees will receive a code that will enable them to register for virtual registration for free (all categories).`}</p>
-                <h2>{`Eligibility Criteria`}</h2>
+                <h2 id="eligibility-criteria">{`Eligibility Criteria`}</h2>
                 <p>{`Applicants must be involved in or interested in accessibility research, and they must explain this in their application.`}</p>
                 <p>{`We particularly encourage applications from people who are attending ASSETS for the first time, who are from backgrounds that are underrepresented in the computing field, who are based in countries that are traditionally underrepresented at ASSETS, or who would otherwise find it difficult to participate in the conference (for financial or other reasons).`}</p>
-                <h2>{`Application Requirements`}</h2>
+                <h2 id="application-requirements">{`Application Requirements`}</h2>
                 <p>
                     {`To apply, please complete the `}
                     <Link

src/app/committees/program/page.js

@@ -1,8 +1,9 @@
+import Letter from "@/app/lib/components/lists/Letter";
 import Section from "@/app/lib/components/primitives/Section";
 import Subpage from "@/app/lib/components/templates/Subpage";
 import {
-    EXPERIENCE_REPORTS_PROGRAM_COMMITTEE,
-    PROGRAM_COMMITTEE,
+  EXPERIENCE_REPORTS_PROGRAM_COMMITTEE,
+  PROGRAM_COMMITTEE,
 } from "@/app/lib/config/committees.config";
 import { SortNameAlphabetically } from "@/app/lib/utils/basics";
 import { createMetadata } from "@/app/lib/utils/createMetadata";
@@ -11,42 +12,55 @@ import React from "react";
 export const metadata = createMetadata({ title: "Program Committee" });
 
 export default function ProgramCommittee() {
-    return (
-        <Subpage
-            noTOC={true}
-            title={"Program Committee"}
-            subheading={"Behind the Scenes"}
-        >
-            <Section
-                title={"Program Committee Members"}
-                spacing={"bottom-only"}
-            >
-                {PROGRAM_COMMITTEE.sort((a, b) =>
-                    SortNameAlphabetically(a, b)
-                ).map((e, i) => (
-                    <p className="mb-4 text-lg" key={i}>
-                        <strong>{e.name + ", "}</strong>
-                        <em>
-                            {e.school + (e.location ? ", " + e.location : "")}
-                        </em>
-                    </p>
-                ))}
-            </Section>
-            <Section
-                title={"Experience Reports Program Committee"}
-                spacing={"bottom-only"}
-            >
-                {EXPERIENCE_REPORTS_PROGRAM_COMMITTEE.sort((a, b) =>
-                    SortNameAlphabetically(a, b)
-                ).map((e, i) => (
-                    <p className="mb-4 text-lg" key={i}>
-                        <strong>{e.name + ", "}</strong>
-                        <em>
-                            {e.school + (e.location ? ", " + e.location : "")}
-                        </em>
-                    </p>
-                ))}
-            </Section>
-        </Subpage>
-    );
+  return (
+    <Subpage
+      noTOC={true}
+      title={"Program Committee"}
+      subheading={"Behind the Scenes"}
+    >
+      <Section title={"Program Committee Members"} spacing={"bottom-only"}>
+        {displayNames("pc", PROGRAM_COMMITTEE)}
+      </Section>
+      <Section
+        title={"Experience Reports Program Committee"}
+        spacing={"bottom-only"}
+      >
+        {displayNames("exr-pc", EXPERIENCE_REPORTS_PROGRAM_COMMITTEE)}
+      </Section>
+    </Subpage>
+  );
+}
+
+function displayNames(hashID, names) {
+  let firstLetterOfName;
+  let letterComp;
+  let letterChanged = false;
+
+  return names
+    .sort((a, b) => SortNameAlphabetically(a, b))
+    .map((e, i) => {
+      if (firstLetterOfName !== e.name[0]) {
+        firstLetterOfName = e.name[0];
+        letterComp = (
+          <Letter
+            key={`${hashID}-names-${firstLetterOfName}-top`}
+            letter={firstLetterOfName}
+            hashID={`${hashID}-names`}
+            className={"mb-4 mt-8"}
+          />
+        );
+        letterChanged = true;
+      } else {
+        letterChanged = false;
+      }
+      return (
+        <>
+          {letterComp && letterChanged ? letterComp : null}
+          <p className="mb-4 text-lg" key={i}>
+            <strong>{e.name + ", "}</strong>
+            <em>{e.school + (e.location ? ", " + e.location : "")}</em>
+          </p>
+        </>
+      );
+    });
 }

src/app/globals.css

@@ -25,7 +25,7 @@
     section h2,
     section h3,
     section h4 {
-        @apply my-4;
+        @apply scroll-m-28 my-4;
     }
     section p:not(:first-child) {
         @apply mt-4;

src/app/lib/components/Alert.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { MdInfo, MdNotificationsActive, MdWarning } from "react-icons/md";
+import { makeAttributeSafe } from "../utils/basics";
 
 /**
  * @param {Object} props
@@ -10,11 +11,13 @@ import { MdInfo, MdNotificationsActive, MdWarning } from "react-icons/md";
  * @param {HTMLElement} props.className Standard Class property.
  * @param {Boolean} props.isNotice If set to true, a compact version of the alert is displayed, this alert lacks the icon, the heading or any ability to use `raw` mode.
  * @param {'warning'|'notice'| 'changes'} props.type The type of alert.
+ * @param {'alert'|'region'} props.ariaRole The type of ARIA role the alert is playing. Often you should use type 'alert' sparingly, usually region is best unless there is something that you'd like the screen reader to read immediately on page load
  *
  * @returns {import("react").ReactNode} An Alert element
  */
 export default function Alert({
   heading,
+  airaRole,
   body,
   raw = false,
   children,
@@ -23,6 +26,10 @@ export default function Alert({
   type,
   id,
 }) {
+
+  //Used to label the ARIA region if a heading is not supplied.
+  const ariaIdentifier = heading ? makeAttributeSafe(heading) : 'assets-ds-'+makeAttributeSafe(Math.random().toString(32).slice(2)); 
+
   return isNotice ? (
     <p
       className={`pl-4 flex items-center gap-3 font-bold ${
@@ -37,7 +44,8 @@ export default function Alert({
   ) : (
     <div
       id={id ? id : ""}
-      role="alert"
+      role={airaRole ? airaRole : 'region'}
+      aria-labelledby={heading ? `${ariaIdentifier}-alert-heading` : `${ariaIdentifier}-alert-body`}
       className={`${
         type === "warning"
           ? "bg-theme-red"
@@ -51,9 +59,9 @@ export default function Alert({
       {switchAlertType(type, heading)}
       <div className="max-w-[85%] pb-2 md:pb-0 md:max-w-max">
         {heading ? (
-          <p className="text-lg font-bold mb-1 max-w-max">{heading}</p>
+          <p className="text-lg font-bold mb-1 max-w-max" id={`${ariaIdentifier}-alert-heading`}>{heading}</p>
         ) : null}
-        <div>{raw ? children : <p>{body}</p>}</div>
+        <div>{raw ? <div id={`${ariaIdentifier}-alert-body`}>{children}</div> : <p id={`${ariaIdentifier}-alert-body`}>{body}</p>}</div>
       </div>
     </div>
   );

src/app/lib/components/lists/Letter.js

@@ -4,23 +4,36 @@ import react from "react";
  * @param {object} props The props of the component
  * @param {String} props.letter The letter of the alphabet you would like displayed as the header in the listing
  * @param {HTMLElement?} props.className Standard Class property.
+ * @param {String} props.hashID The words that will appear in the anchor link
  * @returns {import("react").ReactNode}
  */
-export default function Letter({ letter, className }) {
+export default function Letter({ letter, hashID, className }) {
   return (
     <>
       <a
         key={`letter-${letter}`}
         className={`border-2 w-12 border-theme-dark text-theme-dark flex items-center px-2 pt-4 hover:text-white hover:bg-theme-dark transition-colors ${className}`}
-        href={letter ? "#beginning-with-" + letter .toLowerCase(): "#?"}
+        href={
+          letter
+            ? `${
+                hashID ? `#${hashID}-` : "#beginning-with-"
+              }${letter.toLowerCase()}`
+            : "#?"
+        }
       >
         <h2 className={"text-xl font-light m-0"}>{letter ? letter : "?"}</h2>
       </a>
       {/* this is a way to push the scrollbar so it offsets the header */}
       <div
         aria-hidden
         className="h-0 scroll-m-36"
-        id={letter ? "beginning-with-" + letter.toLowerCase() : "#?"}
+        id={
+          letter
+            ? `${
+                hashID ? `${hashID}-` : "beginning-with-"
+              }${letter.toLowerCase()}`
+            : "#?"
+        }
       ></div>
     </>
   );

src/app/lib/components/primitives/Section.js

@@ -42,7 +42,7 @@ export default function Section({ title, children, className, spacing, id, inver
   return (
     <section className={`${evalSpacing()} ${className} ${invertColours ? 'text-white' : 'text-black'}`}>
       <div className={`mt-7 border-b-[2px]  ${invertColours ? 'border-white' : 'border-black'}`}>
-        <h1  id={id ? id : generateID()}  className='flex flex-row justify-flex-start content-center gap-3 mb-6 max-w-[30ch]'><FaArrowRight aria-hidden className='mt-[.1rem] min-w-[1em] aspect-square'/>{title}</h1>
+        <h1  id={id ? id : generateID()}  className='flex flex-row justify-flex-start content-center gap-3 mb-6 max-w-[30ch] scroll-m-36'><FaArrowRight aria-hidden className='mt-[.1rem] min-w-[1em] aspect-square'/>{title}</h1>
       </div>
       <div className='mt-7'>
         {children}

src/app/lib/config/navigation.config.js

@@ -54,6 +54,10 @@ const MENU_DATA = [
                 title: "Creating Accessible ACM Conference Papers",
                 href: "/resources/creating-a11y-papers",
             },
+            {
+                title: "Creating Accessible ACM Conference Video Presentations",
+                href: "/resources/creating-a11y-papers#video-presentation-creation-guidelines",
+            },
             {
                 title: "Submission Templates",
                 href: "/resources/submission-templates",

src/app/lib/utils/basics.js

@@ -7,3 +7,13 @@ export function SortNameAlphabetically(a, b) {
   }
   return 0;
 }
+
+/**
+ * Escapes spaces and turns them into dashes. Useful for generating ids for aria-labelledby attributes.
+ * @param {String} text
+ * @returns {String} text, with the spaces escaped with `-`
+ */
+export function makeAttributeSafe(text) {
+  const escapeExpression = new RegExp(/( )/g);
+  return text.replace(escapeExpression, "-").toLowerCase();
+}

src/app/page.js

@@ -40,12 +40,12 @@ export default function Home() {
               heading={"Registration is Open"}
             >
               <p className="text-md text-white">
-                {`Full details of our in-person and virtual conference experiences will be published as they become available. In the meantime, we have opened registration on the `}
+                {`We have opened registration on the `}
                 <Link className={"text-white"} href={"https://cvent.me/45nlmw"}>
                   CVENT Registration Site
                 </Link>
 
-                {` to support attendees who may need additional time to make plans (e.g., travel, visa).`}
+                {` to support attendees who may need additional time to make plans (e.g., travel, visa). Full details of our in-person and virtual conference experiences will be published as they continue to become available.`}
               </p>
             </Alert>
             <Alert

tailwind.config.js

@@ -11,7 +11,7 @@ module.exports = {
       colors: {
         "theme-dark": "#2B2B2B",
         "theme-off-white": "#D4D4D4",
-        "theme-red": "#592321",
+        "theme-red": "#882925",
         // "theme-blue": "#4597BA",
         "theme-orange": "#A74A07",
         "theme-blue": "#367691",