Skip to content
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

Fix #999 Add skip to content link on Home, Slide and Info Pages for accessibility #1055

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Fix #999 Add skip to content link on Home, Slide and Info Pages for accessibility #1055

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
68fa66e
Create stale_issues.yml
birm Nov 21, 2024
d68f4d2
Merge pull request #1048 from camicroscope/stale-issues
birm Nov 21, 2024
a86232d
Add 'Skip to Content' link for accessibility in Info, Landing, and Ta…
chandrikarj Dec 29, 2024
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
17 changes: 17 additions & 0 deletions .github/workflows/stale_issues.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
name: 'Stale Issues and PRs'
on:
schedule:
- cron: '30 1 * * *'

jobs:
stale:
runs-on: ubuntu-latest
steps:
- uses: actions/stale@v9
with:
stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
stale-pr-message: 'This PR is stale because it has been open 45 days with no activity.'
close-issue-message: 'This issue was closed because it has been stalled for 5 days with no activity.'
days-before-stale: 30
days-before-close: 5
days-before-pr-close: -1
30 changes: 30 additions & 0 deletions apps/Info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,39 @@
<link rel="stylesheet" href="./table.css" />
<link rel="stylesheet" href="./info.css" />
<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">

<style>
.skip-to-content {
position: absolute;
top: 100px;
left: 10px;
background-color: #007bff; /* Bright blue for visibility */
color: #fff; /* White text for contrast */
padding: 8px 12px; /* Smaller padding for a compact feel */
z-index: 1000;
text-decoration: none;
font-size: 0.9rem; /* Slightly smaller text */
font-weight: bold; /* Keep text bold for clarity */
border-radius: 4px; /* Subtle rounded corners */
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
opacity: 0; /* Hidden by default */
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for appearance */
}

.skip-to-content:focus {
opacity: 1; /* Visible when focused */
transform: translateY(0); /* Bring into view */
outline: 2px dashed #fff; /* Accessible outline for focus */
box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.4); /* Stronger shadow for focus state */
}
.main-content {
padding-top: 70px; /* Adjust if the navbar height changes */
}
</style>
</head>

<body>
<a href="#search-table" class="skip-to-content">Skip to main content</a>
<div class="page-container">
<div>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
Expand Down
209 changes: 110 additions & 99 deletions apps/landing/landing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>

<title>caMicroscope</title>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link rel="stylesheet" href="./main.css" />
<!-- common styling -->
<link rel='stylesheet' type='text/css' media='all' href='../common.css'/>
<link rel='stylesheet' type='text/css' media='all' href='../common.css' />
<link rel="shortcut icon" type="image/x-icon" href="favicon.png">

<style>
.skip-to-content {
position: absolute;
top: 100px;
left: 10px;
background-color: #007bff; /* Bright blue for visibility */
color: #fff; /* White text for contrast */
padding: 8px 12px; /* Smaller padding for a compact feel */
z-index: 1000;
text-decoration: none;
font-size: 0.9rem; /* Slightly smaller text */
font-weight: bold; /* Keep text bold for clarity */
border-radius: 4px; /* Subtle rounded corners */
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
opacity: 0; /* Hidden by default */
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for appearance */
}

.skip-to-content:focus {
opacity: 1; /* Visible when focused */
transform: translateY(0); /* Bring into view */
outline: 2px dashed #fff; /* Accessible outline for focus */
box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.4); /* Stronger shadow for focus state */
}
.main-content {
padding-top: 70px; /* Adjust if the navbar height changes */
}
</style>
</head>
<body>

<!-- loading animation -->
<div class="main-site">
<!-- adding css -->
<div class="main-content" role="timer" id="mainContent">
<div class="loader loader-black loader-5"></div>
<!-- Skip to Content Link -->
<a href="#main" class="skip-to-content">Skip to main content</a>

<!-- Loading Animation -->
<div class="main-site">
<div class="main-content" role="main" id="mainContent" tabindex="-1">
<div class="loader loader-black loader-5"></div>
</div>
</div>
</div>

<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
<div class="container-fluid">
<button class="navbar-toggler m-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="width: 100%;">
<span class="navbar-toggler-icon"></span>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<button class="navbar-toggler m-1" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" >
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto gap-1">
<li class="nav-item active link" style="font-family: sans-serif;">
<a class="nav-link" href="landing.html"> <i class="fas fa-home"></i> Home</a>
<a class="nav-link" href="landing.html"> <i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item link" style="font-family: sans-serif;">
<a class="nav-link" href="../table.html"> <i class="fas fa-list-ul"></i> Slides</a>
<li class="nav-item link" style="font-family: sans-serif;">
<a class="nav-link" href="../table.html"> <i class="fas fa-list-ul"></i> Slides</a>
</li>
<li class="nav-item link">
<a class="nav-link" href="../Info.html"> <i class="fas fa-info-circle"></i> Info</a>
Expand All @@ -47,88 +77,69 @@
<a class="nav-link" href="../signup/signup.html"> <i class="fas fa-user-plus"></i> Signup</a>
</li>
<li class="nav-item link" style="font-family: sans-serif;">
<a class="nav-link" target="_blank" href="https://github.com/camicroscope/caMicroscope/issues"> <i class="fas fa-comment"></i> Feedback</a>
<a class="nav-link" target="_blank" href="https://github.com/camicroscope/caMicroscope/issues"> <i
class="fas fa-comment"></i> Feedback</a>
</li>
</ul>
</div>
</div>
</nav>



<!-- Main -->

<section id="main" class="wrapper">

<div class="inner">

<div role="heading">
<header class="major">
<h1>caMicroscope</h1>
</header>
</div>

<!-- Content -->


<div role="contentinfo" class="content">
<p>caMicroscope is a tool to view, annotate, and analyze biomedical images.</p>
<a href="#" class="image fit" aria-label="Reload Home Page"><img src="./banner1.jpg" alt="" /></a>

</div>

<div class="posts" role="main" style="margin-top: 5em;">
<section class="post">
<a href="../table.html" class="image" aria-label="Visit Slides Page"><img src="./camic.jpg" alt=""/></a>
<div class="content">
<h3>caMicroscope</h3>
<p>Use camicroscope to explore and mark slides uploaded. If this is a restricted access deployment, you will be prompted to log in here.</p>
<a href="../table.html" class="button">More</a>
</div>
</section>
<section class="post">
<a target="_blank" href="https://camicroscope.github.io/docs/" class="image" aria-label="Visit Documentation Page"><img src="./code.jpg" alt=""/></a>
<div class="content">
<h3>Documentation</h3>
<p>Read documentation for using and developing caMicroscope.</p>
<a target="_blank" href="https://camicroscope.github.io/docs/" class="button">More</a>
</div>
</section>
</nav>

<!-- Main Content -->
<section id="main" class="wrapper">
<div class="inner">
<div role="heading">
<header class="major">
<h1>caMicroscope</h1>
</header>
</div>
<div role="contentinfo" class="content">
<p>caMicroscope is a tool to view, annotate, and analyze biomedical images.</p>
<a href="#" class="image fit" aria-label="Reload Home Page"><img src="./banner1.jpg" alt="" /></a>
</div>
<div class="posts" role="main" style="margin-top: 5em;">
<section class="post">
<a href="../table.html" class="image" aria-label="Visit Slides Page"><img src="./camic.jpg"
alt="" /></a>
<div class="content">
<h3>caMicroscope</h3>
<p>Use camicroscope to explore and mark slides uploaded. If this is a restricted access
deployment, you will be prompted to log in here.</p>
<a href="../table.html" class="button">More</a>
</div>
</section>
<section class="post">
<a target="_blank" href="https://camicroscope.github.io/docs/" class="image"
aria-label="Visit Documentation Page"><img src="./code.jpg" alt="" /></a>
<div class="content">
<h3>Documentation</h3>
<p>Read documentation for using and developing caMicroscope.</p>
<a target="_blank" href="https://camicroscope.github.io/docs/" class="button">More</a>
</div>
</section>
</div>
</div>
</section>



<!-- Footer -->
<footer id="footer-layout"></footer>





<!-- Scripts -->
<!-- loading animation script -->
<script>
var loader= document.querySelector('.loader');
window.addEventListener('load', function() {
loader.style.display = 'none';
});
</script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="./jquery.min.js"></script>

<script src="./jquery.dropotron.min.js"></script>

<script src="./jquery.scrollex.min.js"></script>

<script src="./skel.min.js"></script>

<script src="./util.js"></script>
<script src="../../common/util.js"></script>

<!-- script to call a footer(layout footer in the common > utils folder) function -->
<script> insertFooterLayout(); </script>
</section>

<!-- Footer -->
<footer id="footer-layout"></footer>

<!-- Scripts -->
<script>
var loader = document.querySelector('.loader');
window.addEventListener('load', function () {
loader.style.display = 'none';
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
crossorigin="anonymous"></script>
<script src="./jquery.min.js"></script>
<script src="./jquery.dropotron.min.js"></script>
<script src="./jquery.scrollex.min.js"></script>
<script src="./skel.min.js"></script>
<script src="./util.js"></script>
<script src="../../common/util.js"></script>
<script> insertFooterLayout(); </script>
</body>

</html>
18 changes: 18 additions & 0 deletions apps/landing/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,24 @@
/* Reset */

/* addind loader animation */
.skip-to-content {
position: absolute;
top: 10px;
left: 10px;
background-color: #000;
color: #fff;
padding: 10px;
z-index: 1000;
text-decoration: none;
font-size: 1rem;
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;
}

.skip-to-content:focus {
transform: translateY(0);
}

.loader {
width: 50px;
height: 50px;
Expand Down
19 changes: 19 additions & 0 deletions apps/table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,25 @@ nav li:not(.active):hover {
z-index: 1000;
}

.skip-to-content {
position: absolute;
top: 10px;
left: 10px;
background-color: #000;
color: #fff;
padding: 10px;
z-index: 1000;
text-decoration: none;
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;
}

.skip-to-content:focus {
transform: translateY(0);
}



.notification-box {
padding: 10px 0px;
color: black;
Expand Down
32 changes: 31 additions & 1 deletion apps/table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,39 @@
<script src='../common/stacktable.js'></script>
<link rel="stylesheet" href="./table.css" />
<link rel="shortcut icon" type="image/x-icon" href="/apps/landing/favicon.png">

<style>
.skip-to-content {
position: absolute;
top: 100px;
left: 10px;
background-color: #007bff; /* Bright blue for visibility */
color: #fff; /* White text for contrast */
padding: 8px 12px; /* Smaller padding for a compact feel */
z-index: 1000;
text-decoration: none;
font-size: 0.9rem; /* Slightly smaller text */
font-weight: bold; /* Keep text bold for clarity */
border-radius: 4px; /* Subtle rounded corners */
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
opacity: 0; /* Hidden by default */
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for appearance */
}

.skip-to-content:focus {
opacity: 1; /* Visible when focused */
transform: translateY(0); /* Bring into view */
outline: 2px dashed #fff; /* Accessible outline for focus */
box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.4); /* Stronger shadow for focus state */
}
.main-content {
padding-top: 70px; /* Adjust if the navbar height changes */
}
</style>
</head>

<body>
<a href="#collection-list" class="skip-to-content">Skip to main content</a>
<div class="page-container">
<div>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" style="position: sticky; margin-top: -4em;">
Expand Down Expand Up @@ -337,4 +367,4 @@ <h5 class="modal-title" id="slideNameChangeModalLabel">Slide name change confirm
<script> insertFooterLayout();</script>
</body>

</html>
</html>