lifeparticle · lifeparticle · Oct 22, 2023 · Oct 19, 2023 · Oct 19, 2023 · Oct 21, 2023
diff --git a/README.md b/README.md
@@ -19,6 +19,10 @@ Your [opinions and feedback](https://binarytree.dev/feedback) about our service
 | CodeQL                | [![CodeQL](https://github.com/lifeparticle/binarytree/actions/workflows/codeql.yml/badge.svg)](https://github.com/lifeparticle/binarytree/actions/workflows/codeql.yml)                                |
 | Sonarcloud            | [![Build](https://github.com/lifeparticle/binarytree/actions/workflows/sonarcloud.yml/badge.svg)](https://github.com/lifeparticle/binarytree/actions/workflows/sonarcloud.yml)                         |
 
+# Contributing
+
+If you'd like to contribute to the project, please check the [How to contribute](CONTRIBUTING.md) file for guidelines and instructions.
+
 ## Licenses
 
 Code: The code in this project is licensed under the Apache-2.0 license. See the [LICENSE](LICENSE) file for details.

diff --git a/ui/README.md b/ui/README.md
@@ -1,23 +1,40 @@
-# Run locally
+# Project Setup
+
+Before running the project, make sure you have the following dependencies installed:
+
+-   Node.js (v18.16.1)
+-   Yarn (v3.6.1)
+
+Check your Node.js and Yarn versions to ensure they meet the project's requirements. Open your terminal and run:
 
 ```shell
 node -v
 # 18.16.1
+
 yarn -v
 # 3.6.1
 ```
 
+## Installation
+
+Install project dependencies using Yarn with the --immutable flag to ensure consistent package versions:
+
 ```shell
 yarn install --immutable
-yarn dev
 ```
 
-## Run Test locally
+# Running the Project
+
+To run the project locally, execute the following command:
 
 ```shell
-yarn test
+yarn dev
 ```
 
-# Contributing
+# Running Tests
+
+You can also run tests to ensure the project's functionality:
 
-[How to contribute](CONTRIBUTING.md)
+```shell
+yarn test
+```
diff --git a/ui/index.html b/ui/index.html
@@ -46,6 +46,9 @@
 
 		<meta charset="UTF-8" />
 		<link rel="icon" type="image/svg+xml" href="/logo.svg" />
+
+		<!-- To establish an early connection to the Google Analytics domain -->
+		<link rel="preconnect" href="https://www.google-analytics.com" />
 	</head>
 	<body>
 		<div id="root"></div>

diff --git a/ui/src/assets/Footer/bt_dark.png b/ui/src/assets/Footer/bt_dark.png
diff --git a/ui/src/assets/Footer/bt_dark.webp b/ui/src/assets/Footer/bt_dark.webp
diff --git a/ui/src/assets/Footer/bt_light.png b/ui/src/assets/Footer/bt_light.png
diff --git a/ui/src/assets/Footer/bt_light.webp b/ui/src/assets/Footer/bt_light.webp
diff --git a/ui/src/assets/Home/hero.png b/ui/src/assets/Home/hero.png
diff --git a/ui/src/assets/Home/hero.webp b/ui/src/assets/Home/hero.webp
diff --git a/ui/src/components/General/ClipboardButton/index.tsx b/ui/src/components/General/ClipboardButton/index.tsx
@@ -15,6 +15,7 @@ const ClipboardButton: React.FC<ClipboardButtonProps> = ({
 			className={style.button}
 			onClick={() => copyToClipboard(text)}
 			icon={copied ? <Icon name="Check" /> : <Icon name="Copy" />}
+			aria-label={`select ${label} `}
 		>
 			{label}
 		</ResponsiveButton>

diff --git a/ui/src/components/General/HelpIcon/index.tsx b/ui/src/components/General/HelpIcon/index.tsx
@@ -28,6 +28,7 @@ const HelpIcon: React.FC<HelpIconProps> = ({ helpObject }) => {
 				shape="circle"
 				icon={<Icon name="Info" size={15} />}
 				onClick={showModal}
+				aria-label="helpicon"
 			/>
 			<Modal
 				title="Help"

diff --git a/ui/src/components/General/Notification/components/NotificationList.tsx b/ui/src/components/General/Notification/components/NotificationList.tsx
@@ -99,7 +99,10 @@ const NotificationList: React.FC<NotificationListProps> = ({
 			)}
 			onOpenChange={handleRedFlagNotification}
 		>
-			<Button className={style.notification__button}>
+			<Button
+				aria-label="notification-icon"
+				className={style.notification__button}
+			>
 				<span
 					className={
 						showRedFlag ? style.notification__button__status : ""

diff --git a/ui/src/components/Layouts/FloatingHeader/index.tsx b/ui/src/components/Layouts/FloatingHeader/index.tsx
@@ -13,7 +13,7 @@ const FloatingHeader: React.FC<FloatingHeaderProps> = ({ styles }) => {
 		<div className={style.fh} style={styles}>
 			<Notification />
 			<Link to="/feedback">
-				<Button className={style.fh__button}>
+				<Button aria-label="feedback-icon" className={style.fh__button}>
 					<Icon name="Megaphone" size={20} />
 				</Button>
 			</Link>

diff --git a/ui/src/components/Layouts/Footer/index.tsx b/ui/src/components/Layouts/Footer/index.tsx
@@ -4,8 +4,8 @@ import Icon from "components/General/Icon";
 import { Space, Typography } from "antd";
 import { ResponsiveButton } from "components/General/FormComponents";
 import { Link } from "react-router-dom";
-import bt_light from "assets/Footer/bt_light.png";
-import bt_dark from "assets/Footer/bt_dark.png";
+import bt_light from "assets/Footer/bt_light.webp";
+import bt_dark from "assets/Footer/bt_dark.webp";
 import { openLink } from "utils/helper-functions/string";
 import useMode from "hooks/useMode";
 
@@ -30,6 +30,7 @@ const Footer: React.FC = () => {
 						<img
 							src={isDarkMode ? bt_dark : bt_light}
 							height={100}
+							alt="footer logo"
 						/>
 					</Link>
 				</Space>
@@ -53,11 +54,9 @@ const Footer: React.FC = () => {
 				<ul className={style.footer__list}>
 					<li>
 						<a
-							onClick={() =>
-								openLink(
-									"https://github.com/users/lifeparticle/projects/2"
-								)
-							}
+							href="https://github.com/users/lifeparticle/projects/2"
+							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Roadmap
 						</a>
@@ -70,22 +69,18 @@ const Footer: React.FC = () => {
 				<ul className={style.footer__list}>
 					<li>
 						<a
-							onClick={() =>
-								openLink(
-									"https://github.com/lifeparticle/binarytree/blob/main/CODE_OF_CONDUCT.md"
-								)
-							}
+							href="https://github.com/lifeparticle/binarytree/blob/main/CODE_OF_CONDUCT.md"
+							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Code of Conduct
 						</a>
 					</li>
 					<li>
 						<a
-							onClick={() =>
-								openLink(
-									"https://github.com/lifeparticle/binarytree#status"
-								)
-							}
+							href="https://github.com/lifeparticle/binarytree#status"
+							target="_blank"
+							rel="noopener noreferrer"
 						>
 							Status
 						</a>

diff --git a/ui/src/components/Layouts/Header/index.tsx b/ui/src/components/Layouts/Header/index.tsx
@@ -26,6 +26,7 @@ const Header: React.FC = () => {
 					src={isDarkMode ? logo_dark : logo_light}
 					height={60}
 					width={60}
+					alt="Logo"
 				/>
 			</Link>
 		</Space>

diff --git a/ui/src/components/Layouts/Sidebar/Footer/index.tsx b/ui/src/components/Layouts/Sidebar/Footer/index.tsx
@@ -37,6 +37,7 @@ const Footer: React.FC<FooterProps> = ({
 			</a>
 
 			<Switch
+				aria-label="toggle theme"
 				checkedChildren={
 					<div className={style.footer__moon}>
 						<Icon size={16} color={colorBgContainer} name="Moon" />
@@ -56,6 +57,7 @@ const Footer: React.FC<FooterProps> = ({
 				onClick={handleMenuCollapse}
 				type="text"
 				className={style.footer__menuCollapse}
+				aria-label="toggle-theme"
 			>
 				{collapsed ? (
 					<Icon name="ChevronsRight" color={colorText} />

diff --git a/ui/src/pages/Colors/ColorPicker/components/ColorFormatTags.tsx b/ui/src/pages/Colors/ColorPicker/components/ColorFormatTags.tsx
@@ -16,6 +16,7 @@ const ColorFormatTags = ({
 			color={currentFormat === option.value ? "success" : "default"}
 			key={option.value}
 			className={style.cf}
+			aria-label={`select ${option.label}`}
 		>
 			{option.label}
 		</Tag>

diff --git a/ui/src/pages/Colors/ColorPicker/index.tsx b/ui/src/pages/Colors/ColorPicker/index.tsx
@@ -81,6 +81,7 @@ const ColorPicker: React.FC = () => {
 								setColorPickerRan(false);
 							}}
 							size="xl"
+							aria-label="select a color"
 						/>
 
 						<ResponsiveButton

diff --git a/ui/src/pages/Home/components/Hero.tsx b/ui/src/pages/Home/components/Hero.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import style from "pages/Home/Home.module.scss";
 import { Typography, Image } from "antd";
-import hero from "assets/Home/hero.png";
+import hero from "assets/Home/hero.webp";
 import { FEATURE_DATA } from "data/featureData";
 
 const { Title } = Typography;
@@ -33,6 +33,8 @@ const Hero: React.FC = () => {
 					src={hero}
 					alt="BinaryTree: Developer Productivity Tools"
 					preview={false}
+					width={"100%"}
+					height={"100%"}
 				/>
 			</div>
 		</section>