blackicedbear/FHC-Core
1
0
Fork 0
mirror of https://github.com/FH-Complete/FHC-Core.git synced 2026-07-19 16:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

fhc header skiplink; cis4 skiplink css;

Browse Source
This commit is contained in:
Johann Hoffmann
2025-03-03 17:57:42 +01:00
parent e4317f7a94
commit 2b16d8940f
5 changed files with 54 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/helpers/hlp_header_helper.php
+10
View File
@@ -227,3 +227,13 @@ function generateBackwardCompatibleJSMsIe($js)
echo "<![endif]-->\n";
}
/**
* Constructs an accessibility skipLink https://www.w3schools.com/accessibility/accessibility_skip_links.php
*/
function generateSkipLink($skipID)
{
$toPrint = '<a id="skiplink" href="';
$toPrint.=$skipID;
$toPrint.='" class="fhcSkipLink"></a>';
echo $toPrint;
}
application/views/CisRouterView/CisRouterView.php
+1
View File
@@ -8,6 +8,7 @@ $includesArray = array(
'tabulator5' => true, // TODO: upgrade to 6 when available
'vue3' => true,
'primevue3' => true,
'skipID' => '#fhccontent',
'vuedatepicker11' => true,
'customCSSs' => array(
'public/css/components/verticalsplit.css',
application/views/templates/FHC-Header.php
+3
View File
@@ -9,12 +9,15 @@
$title = isset($title) ? $title : null;
$refresh = isset($refresh) ? $refresh : null;
$customCSSs = isset($customCSSs) ? $customCSSs : null;
$skipID = isset($skipID) ? $skipID : null;
?>
<!-- Header start -->
<!DOCTYPE HTML>
<html>
<head>
<?php if($skipID) generateSkipLink($skipID); ?>
<title><?php printPageTitle($title); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
public/css/Fhc.css
+38
View File
@@ -98,3 +98,41 @@
padding-right: .375rem;
background-image: none;
}
.fhcSkipLink {
position: absolute;
left: -10px;
top: -10px;
width: 1px;
height: 1px;
overflow: hidden;
}
.fhcSkipLink::before {
content: "Skip to main content"
}
.fhcSkipLink:focus {
position: absolute;
z-index: 9999999;
top: var(--fhc-cis-header-height);
left: var(--fhc-cis-menu-width);
height: 100px;
width: 800px;
font-size: 24px;
font-weight: bold;
color: #0044cc;
background-color: #ffeb3b;
text-decoration: none;
padding: 12px 18px;
border-radius: 6px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
}
fhcSkipLink:hover {
background-color: #ffcc00;
color: #002b80;
transform: scale(1.05);
}
public/js/apps/Dashboard/Fhc.js
+2 -1
View File
@@ -227,7 +227,8 @@ const app = Vue.createApp({
},
handleClick(event) {
const target = event.target.closest('a');
if(target?.id == 'skiplink') return
if (target && this.isInternalRoute(target.href)) {
const url = new URL(target.href)