Skip to content

Improved accessibility: added ARIA, keyboard support, better contrast #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 23, 2025
Merged

Improved accessibility: added ARIA, keyboard support, better contrast #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e096c0a
Improved accessibility: added ARIA, keyboard support, better contrast
Ishuuu1213 Jul 23, 2025
f5890cc
Merge branch 'main' into accessibility-enhancements
Ishuuu1213 Jul 23, 2025
3b36c28
Merge branch 'main' into accessibility-enhancements
Ishuuu1213 Jul 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 225 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,141 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CodeClip</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="styles/main.css">
<!-- <link rel="stylesheet" href="styles/themes.css"> -->
<!-- <link rel="stylesheet" href="styles/challenges.css"> -->
<script
src="https://js.sentry-cdn.com/8994bf86fecf7733832520db1565ab1f.min.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="body-wrapper">
<!-- header code starts -->
<header class="header">
<div class="container header__container">
<div class="header__logo">
<span class="logo-text">CodeClip</span>


<title>Challenges - CodeClip</title>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Merge both font options for flexibility -->
<link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bitcount:[email protected]&family=Oooh+Baby&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Styles -->
<!-- If you want to keep all challenge styles in one file, use: -->
<link rel="stylesheet" href="../styles.css">
<!-- Or, if you want to scope styles to just challenges, use: -->
<!-- <link rel="stylesheet" href="../styles/challenges.css" /> -->
</head>
<body>
<!-- Header Component -->
<header class="header" role="banner">
<div class="container header__container">
<div class="header__logo">
<span class="logo-text">CodeClip</span>
</div>
<nav class="header__nav" id="navMenu">
<ul class="nav__list">
<li><a href="/" data-route="/" class="nav__link">Home</a></li>
<li><a href="/challenges" data-route="/challenges" class="nav__link active">Challenges</a></li>
<!-- Added a editor page in the website -->
<li><a href="editor.html" data-route="/editor" class="nav__link">Editor</a></li>
<li><a href="/profile" data-route="/profile" class="nav__link">Profile</a></li>
</ul>
</nav>
<button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>
</button>
</div>
</header>

<!-- Main Content -->
<main role="main">
<!-- Challenges Hero Section -->
<section class="challenges-hero">
<div class="container">
<div class="challenges-hero__content">
<h1 class="challenges-hero__title">
Coding <span class="highlight">Challenges</span>
</h1>
<p class="challenges-hero__description">
Test your skills with our curated collection of coding challenges. From beginner-friendly problems to advanced algorithms, there's something for every developer.
</p>
</div>
</div>
</section>

<!-- Controls (merged from both versions) -->
<section class="challenges-filter">
<div class="container">
<h2 id="filters-heading">Filter Challenges</h2>
<section class="challenges-filter" aria-labelledby="filters-heading">
<div class="filter-controls">
<div class="filter-group">
<label for="difficulty-filter">Difficulty:</label>
<select id="difficulty-filter" class="filter-select" aria-label="Filter challenges by difficulty">
<option value="">All Levels</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
</div>
<div class="filter-group">
<label for="category-filter">Category:</label>
<select id="category-filter" class="filter-select" aria-label="Filter challenges by category">
<option value="">All Categories</option>
<option value="arrays">Arrays</option>
<option value="strings">Strings</option>
<option value="algorithms">Algorithms</option>
<option value="data-structures">Data Structures</option>
<option value="frontend">Frontend</option>
<option value="backend">Backend</option>
<option value="fullstack">Fullstack</option>
</select>
</div>
<div class="search-group">
<!-- <input type="text" id="search-challenges" placeholder="Search challenges..." class="search-input"> -->
<input type="text" id="search-challenges" placeholder="Search challenges..." class="search-input" aria-label="Search coding challenges by title or tag">

</div>

</div>
<nav class="header__nav" id="navMenu">
<ul class="nav__list">
<li><a href="/" data-route="/" class="nav__link">Home</a></li>
<li><a href="pages/challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li>
<li><a href="pages/editor.html" data-route="/editor" class="nav__link">Editor</a></li>
<li><a href="pages/profile.html" data-route="/profile" class="nav__link">Profile</a></li>
<li><a href="/about" data-route="/about" class="nav__link">About</a></li>
</ul>
</nav>
<button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
<span class="hamburger"></span>
<span class="hamburger"></span>
<span class="hamburger"></span>
</button>
</div>
</header>
<!-- header code ends -->

<!-- Challenges Grid -->
<h2 id="challenge-heading">Available Coding Challenges</h2>
<section class="challenges-grid" aria-labelledby="challenge-heading">
<section class="challenges-grid">
<div class="container">
<div class="challenges-list" id="challengesList">
<!-- Challenge cards can be rendered here dynamically via JS -->
<div class="challenge-card" data-difficulty="easy" data-category="arrays">
<div class="challenge-card__header">
<h3 class="challenge-card__title">Two Sum</h3>
<span class="difficulty-badge difficulty-easy">Easy</span>
</div>
<p class="challenge-card__description">
Given an array of integers and a target sum, return indices of two numbers that add up to the target.
</p>
<div class="challenge-card__meta">
<span class="category-tag">Arrays</span>
<span class="category-tag">Hash Table</span>
</div>
<div class="challenge-card__actions">
<!-- <a href="/editor" data-route="/editor" class="btn btn-primary btn-sm">Solve Challenge</a> -->
<a href="/editor" data-route="/editor" class="btn btn-primary btn-sm" aria-label="Solve challenge Two Sum">Solve Challenge</a>


</div>
<nav class="header__nav" id="navMenu">
<ul class="nav__list">
Expand All @@ -50,6 +154,95 @@
<span class="hamburger"></span>
</button>
</div>


<div class="challenge-card" data-difficulty="medium" data-category="strings">
<div class="challenge-card__header">
<h3 class="challenge-card__title">Longest Palindromic Substring</h3>
<span class="difficulty-badge difficulty-medium">Medium</span>
</div>
<p class="challenge-card__description">
Given a string, find the longest palindromic substring within it.
</p>
<div class="challenge-card__meta">
<span class="category-tag">Strings</span>
<span class="category-tag">Dynamic Programming</span>
</div>
<div class="challenge-card__actions">
<a href="/editor" data-route="/editor" class="btn btn-primary btn-sm" aria-label="Solve Challenge Longest Pallindromic Substring">Solve Challenge</a>
</div>
</div>

<div class="challenge-card" data-difficulty="hard" data-category="algorithms">
<div class="challenge-card__header">
<h3 class="challenge-card__title">Merge K Sorted Lists</h3>
<span class="difficulty-badge difficulty-hard">Hard</span>
</div>
<p class="challenge-card__description">
Merge k sorted linked lists and return it as one sorted list.
</p>
<div class="challenge-card__meta">
<span class="category-tag">Linked List</span>
<span class="category-tag">Divide and Conquer</span>
</div>
<div class="challenge-card__actions">
<a href="/editor" data-route="/editor" class="btn btn-primary btn-sm" aria-label="Solve challenge Merge K Sorted Lists">Solve Challenge</a>
</div>
</div>

<div class="challenge-card" data-difficulty="easy" data-category="data-structures">
<div class="challenge-card__header">
<h3 class="challenge-card__title">Valid Parentheses</h3>
<span class="difficulty-badge difficulty-easy">Easy</span>
</div>
<p class="challenge-card__description">
Determine if the input string has valid parentheses.
</p>
<div class="challenge-card__meta">
<span class="category-tag">Stack</span>
<span class="category-tag">Strings</span>
</div>
<div class="challenge-card__actions">
<a href="/editor" data-route="/editor" class="btn btn-primary btn-sm" aria-label="Solve challenge valid Parentheses">Solve Challenge</a>


<div class="content">
<div class="card">
<a href="#" target="_blank">
<div class="icon"><i class="material-icons md-36" alt="Challenge vault icon">security</i></div>
<p class="title">Challenge Vault</p>
<p class="text">All your challenges in one place — track, review, repeat.</p>
</a>
</div>
</div>
</main>
<!-- main code ends -->


<!-- footer code starts -->
<footer class="footer" role="contentinfo">
<div class="container">
<div class="footer__content">
<div class="footer__section">
<h4>CodeClip</h4>
<p>Master coding challenges in your browser</p>
</div>
<div class="footer__section">
<h4>Quick Links</h4>
<ul>
<li><a href="/" data-route="/">Home</a></li>
<li><a href="pages/challenges.html" data-route="/challenges">Challenges</a></li>
<li><a href="pages/editor.html" data-route="/editor">Editor</a></li>
</ul>
</div>
<div class="footer__section">
<h4>Community</h4>
<ul>
<li><a href="https://github.com/opensource-society/CodeClip">GitHub</a></li>
<li><a href="#">Discord</a></li>
<li><a href="#">Twitter</a></li>
</ul>

</header>
<!-- header code ends -->

Expand Down Expand Up @@ -102,6 +295,7 @@ <h1 class="hero__title">
<p class="text">All your challenges in one place — track, review, repeat.</p>
</a>
</div>

</div>
</main>
<!-- main code ends -->
Expand Down
12 changes: 7 additions & 5 deletions pages/challenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,12 @@
</div>
<nav class="header__nav" id="navMenu">
<ul class="nav__list">
<li><a href="/" data-route="/" class="nav__link">Home</a></li>
<li><a href="challenges.html" data-route="/challenges" class="nav__link active">Challenges</a></li>
<li><a href="editor.html" data-route="/editor" class="nav__link">Editor</a></li>
<li><a href="profile.html" data-route="/profile" class="nav__link">Profile</a></li>

<li><a href="/" data-route="/" class="nav__link" aria-label="Main navigation">Home</a></li>
<li><a href="/challenges" data-route="/challenges" class="nav__link active" aria-label="Challenges">Challenges</a></li>
<li><a href="/editor" data-route="/editor" class="nav__link" aria-label="Editor">Editor</a></li>
<li><a href="/profile" data-route="/profile" class="nav__link" aria-label="Profile">Profile</a></li>

</ul>
</nav>
<button class="header__toggle" id="navToggle" aria-label="Open navigation menu">
Expand Down Expand Up @@ -204,7 +206,7 @@ <h4>Community</h4>
</footer>

<!-- Theme Toggle Button (from main branch version) -->
<button id="theme-toggle" title="Toggle theme">
<button id="theme-toggle" title="Toggle theme" aria-label="Toggle light/dark theme">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
</button>

Expand Down
Loading
Loading