Skip to content

Commit

Permalink
Added aria-labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@isidrohan
isidrohan committed Dec 21, 2024
1 parent 51ee10b commit ad8a83d
Show file tree
Hide file tree
Showing 11 changed files with 117 additions and 42 deletions.
3 changes: 3 additions & 0 deletions src/AgreementHtml.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
/>
}
/>
Expand All @@ -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>
Expand Down
20 changes: 10 additions & 10 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ const App = () => {
}
};


const onChange = (key: string | string[]) => {
setActivePanel(key);
};
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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}>
Expand All @@ -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>
Expand All @@ -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={{
Expand All @@ -199,6 +198,7 @@ const App = () => {
color: "white",
fontSize: "12px",
}}
aria-label="Mobile view message"
>
Best viewed on desktop
</div>
Expand Down
16 changes: 13 additions & 3 deletions src/components/Content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand All @@ -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>
Expand Down
27 changes: 23 additions & 4 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:admin@accordproject.org">
<Link
href="mailto:admin@accordproject.org"
aria-label="Send an email to admin@accordproject.org" // Added for better navigation
>
<Text strong style={{ color: "rgba(255, 255, 255, 0.65)" }}>
admin@accordproject.org
</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={{
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>{" "}
Expand All @@ -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>
Expand All @@ -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>
Expand Down
23 changes: 21 additions & 2 deletions src/components/FullScreenModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
);
Expand Down
Loading

0 comments on commit ad8a83d

Please sign in to comment.