Added aria-labels

src/AgreementHtml.tsx

@@ -19,6 +19,7 @@ function AgreementHtml({ loading }: { loading: any }) {
         display: "flex",
         flexDirection: "column",
       }}
+      aria-label="Agreement preview container" // Added aria-label for the main container
     >
       <div style={{ textAlign: "center", color: textColor }}>
         <h2>Preview Output</h2>
@@ -41,6 +42,7 @@ function AgreementHtml({ loading }: { loading: any }) {
               <LoadingOutlined
                 style={{ fontSize: 42, color: "#19c6c7" }}
                 spin
+                aria-label="Loading agreement content" // Added aria-label for the spinner
               />
             }
           />
@@ -50,6 +52,7 @@ function AgreementHtml({ loading }: { loading: any }) {
           className="agreement"
           dangerouslySetInnerHTML={{ __html: agreementHtml }}
           style={{ flex: 1, color: textColor, backgroundColor: backgroundColor }}
+          aria-label="Agreement content preview" // Added aria-label for the agreement content
         />
       )}
     </div>

src/App.tsx

@@ -36,7 +36,6 @@ const App = () => {
     }
   };
 
-
   const onChange = (key: string | string[]) => {
     setActivePanel(key);
   };
@@ -104,7 +103,7 @@ const App = () => {
   return (
     <AntdApp>
       <Layout style={{ minHeight: "100vh" }}>
-        <Navbar scrollToExplore={scrollToExplore} />
+        <Navbar scrollToExplore={scrollToExplore} aria-label="Main navigation" />
         <Content>
           <Routes>
             <Route
@@ -128,12 +127,12 @@ const App = () => {
                           gap: "10px",
                         }}
                       >
-                        <SampleDropdown setLoading={setLoading} />
-                        <UseShare />
+                        <SampleDropdown setLoading={setLoading} aria-label="Sample Dropdown" />
+                        <UseShare aria-label="Share options" />
                       </Row>
                     </Col>
                     <Col span={18}>
-                      <Errors />
+                      <Errors aria-live="assertive" />
                     </Col>
                   </Row>
                   <div
@@ -149,6 +148,7 @@ const App = () => {
                           defaultActiveKey={activePanel}
                           onChange={onChange}
                           items={panels}
+                          aria-label="Collapse panels for templates and model"
                         />
                       </Col>
                       <Col xs={24} sm={8}>
@@ -158,11 +158,11 @@ const App = () => {
                           }}
                         >
                           <div style={{ display: "flex" }}>
-                            <ToggleDarkMode />
-                            <FullScreenModal />
+                            <ToggleDarkMode aria-label="Toggle dark mode" />
+                            <FullScreenModal aria-label="Fullscreen modal" />
                           </div>
                         </div>
-                        <AgreementHtml loading={loading} />
+                        <AgreementHtml loading={loading} aria-label="Agreement preview" />
                       </Col>
                     </Row>
                   </div>
@@ -181,15 +181,14 @@ const App = () => {
                 path="module2"
                 element={<LearnContent file="module2.md" />}
               />
-
               <Route
                 path="module3"
                 element={<LearnContent file="module3.md" />}
               />
             </Route>
           </Routes>
         </Content>
-        <Footer />
+        <Footer aria-label="Footer content" />
         {!screens.md && (
           <div
             style={{
@@ -199,6 +198,7 @@ const App = () => {
               color: "white",
               fontSize: "12px",
             }}
+            aria-label="Mobile view message"
           >
             Best viewed on desktop
           </div>

src/components/Content.tsx

@@ -75,19 +75,27 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
       >
         <Spin
           indicator={
-            <LoadingOutlined style={{ fontSize: 42, color: "#19c6c7" }} spin />
+            <LoadingOutlined
+              style={{ fontSize: 42, color: "#19c6c7" }}
+              spin
+              aria-label="Content is loading"
+            />
           }
         />
       </div>
     );
   }
 
   if (error) {
-    return <div>Error: {error}</div>;
+    return (
+      <div role="alert" aria-label="Error loading content">
+        Error: {error}
+      </div>
+    );
   }
 
   return (
-    <ContentContainer>
+    <ContentContainer aria-live="polite">
       {content && (
         <ReactMarkdown
           rehypePlugins={[rehypeRaw, rehypeHighlight]}
@@ -106,12 +114,14 @@ const LearnContent: React.FC<LearnContentProps> = ({ file }) => {
         <NavigationButton
           onClick={handlePrevious}
           disabled={currentIndex === 0}
+          aria-label="Go to the previous step"
         >
           <LeftOutlined /> Previous
         </NavigationButton>
         <NavigationButton
           onClick={handleNext}
           disabled={currentIndex === steps.length - 1}
+          aria-label="Go to the next step"
         >
           Next <RightOutlined />
         </NavigationButton>

src/components/Footer.tsx

@@ -31,23 +31,34 @@ const CustomFooter: React.FC = () => {
       <Row justify="space-between" align="top">
         <Col span={7}>
           <Space direction="vertical" size="middle">
-            <Link href="https://www.accordproject.org" target="_blank">
+            <Link
+              href="https://www.accordproject.org"
+              target="_blank"
+              aria-label="Visit Accord Project homepage" // Added for screen readers
+            >
               <Image
                 src="/logo.png"
-                alt="Template Playground"
+                alt="Template Playground logo" // Updated alt for meaningful description
                 preview={false}
                 style={{ paddingRight: "1.5em", height: "36px" }}
               />
             </Link>
             <Text style={{ color: "rgba(255, 255, 255, 0.65)" }}>
               The open source smart legal contract stack
             </Text>
-            <Link href="mailto:[email protected]">
+            <Link
+              href="mailto:[email protected]"
+              aria-label="Send an email to [email protected]" // Added for better navigation
+            >
               <Text strong style={{ color: "rgba(255, 255, 255, 0.65)" }}>
                 [email protected]
               </Text>
             </Link>
-            <Link href="https://discord.com/invite/Zm99SKhhtA" target="_blank">
+            <Link
+              href="https://discord.com/invite/Zm99SKhhtA"
+              target="_blank"
+              aria-label="Join Accord Project Discord community" // Added for screen readers
+            >
               <Button
                 size="large"
                 style={{
@@ -74,6 +85,7 @@ const CustomFooter: React.FC = () => {
                   fontSize: "11px",
                   letterSpacing: "0.1em",
                 }}
+                aria-label={`Section: ${section.title}`} // Added for section identification
               >
                 {section.title}
               </Text>
@@ -82,6 +94,7 @@ const CustomFooter: React.FC = () => {
                   href={link.href}
                   key={link.title}
                   style={{ color: "white", fontSize: "15px" }}
+                  aria-label={`Link to ${link.title}`} // Added for link identification
                 >
                   {link.title}
                 </Link>
@@ -99,6 +112,7 @@ const CustomFooter: React.FC = () => {
               href="https://accordproject.org/privacy"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Read Accord Project's trademark policy" // Added for screen readers
             >
               trademark policy
             </Link>{" "}
@@ -108,6 +122,7 @@ const CustomFooter: React.FC = () => {
               href="https://accordproject.org/brand-assets"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Access Accord Project's brand assets" // Added for screen readers
             >
               brand assets
             </Link>
@@ -120,27 +135,31 @@ const CustomFooter: React.FC = () => {
               href="https://github.com/accordproject"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Visit Accord Project GitHub profile" // Added for clarity
             >
               <GithubOutlined style={{ fontSize: "17px" }} />
             </Link>
             <Link
               href="https://twitter.com/AccordHQ"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Visit Accord Project Twitter profile" // Added for clarity
             >
               <XOutlined style={{ fontSize: "17px" }} />
             </Link>
             <Link
               href="https://discord.com/invite/Zm99SKhhtA"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Join Accord Project on Discord" // Added for clarity
             >
               <DiscordFilled style={{ fontSize: "17px" }} />
             </Link>
             <Link
               href="https://www.linkedin.com/company/accordproject/"
               target="_blank"
               style={{ color: "rgba(255, 255, 255, 0.65)" }}
+              aria-label="Visit Accord Project LinkedIn profile" // Added for clarity
             >
               <LinkedinFilled style={{ fontSize: "17px" }} />
             </Link>

src/components/FullScreenModal.tsx

@@ -31,10 +31,22 @@ const FullScreenModal: React.FC = () => {
   }, [textColor, backgroundColor]);
 
   return (
-    <div style={{ textAlign: "right", display: "flex", alignItems: "center", justifyContent: "flex-end", width: "100%", color: textColor, }} className="preview-element">
+    <div
+      style={{
+        textAlign: "right",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        width: "100%",
+        color: textColor,
+      }}
+      className="preview-element"
+    >
+      {/* Add aria-label to the fullscreen icon for screen readers */}
       <FullscreenOutlined
         style={{ fontSize: "24px", cursor: "pointer", marginRight: "10px" }}
         onClick={() => setOpen(true)}
+        aria-label="Open full screen modal" // Describes the action of the icon
       />
       <Modal
         title="Output"
@@ -43,8 +55,15 @@ const FullScreenModal: React.FC = () => {
         onOk={() => setOpen(false)}
         onCancel={() => setOpen(false)}
         width={1000}
+        aria-labelledby="modal-title" // Links the modal to its title for accessibility
+        aria-describedby="modal-content" // Provides a reference for the content description
       >
-        <AgreementHtml loading={false} />
+        {/* Add ID to associate with aria-labelledby */}
+        <h2 id="modal-title">Output</h2>
+        {/* Add ID for aria-describedby */}
+        <div id="modal-content">
+          <AgreementHtml loading={false} />
+        </div>
       </Modal>
     </div>
   );