add aria-label to skip link and raumsuche tabulator links, move skip link to html body, change raumsuche h2 to h1

This commit is contained in:
Harald Bamberger
2025-06-30 17:02:45 +02:00
parent 83ac1abcf6
commit 986d1cfb5f
3 changed files with 14 additions and 7 deletions
+1 -1
View File
@@ -243,6 +243,6 @@ function generateSkipLink($skipID)
{
$toPrint = '<a id="skiplink" href="';
$toPrint.=$skipID;
$toPrint.='" class="fhcSkipLink"></a>';
$toPrint.='" class="fhcSkipLink" aria-label="Skip to main content"></a>';
echo $toPrint;
}
+3 -2
View File
@@ -16,8 +16,7 @@
<!DOCTYPE HTML>
<html>
<head>
<?php if($skipID) generateSkipLink($skipID); ?>
<title><?php printPageTitle($title); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -139,5 +138,7 @@
</head>
<body>
<?php if($skipID) generateSkipLink($skipID); ?>
<!-- Header end -->
@@ -56,7 +56,7 @@ export const Raumsuche = {
{title: Vue.computed(() => this.$p.t('global/bezeichnung')), field: 'bezeichnung', widthGrow: 2},
{title: Vue.computed(() => this.$p.t('global/nummer')), field: 'nummer', widthGrow: 1},
{title: Vue.computed(() => this.$p.t('global/personen')), field: 'personen', widthGrow: 1},
{title: Vue.computed(() => this.$p.t('rauminfo/raumInfo')),
{title: Vue.computed(() => this.$p.t('rauminfo/rauminfo')),
field: 'linkInfo', formatter: this.linkFormatter, widthGrow: 1},
{title: Vue.computed(() => this.$p.t('rauminfo/roomReservations')),
field: 'linkRes', formatter: this.linkFormatter, widthGrow: 1}
@@ -87,10 +87,16 @@ export const Raumsuche = {
this.tableBuiltResolve = resolve
},
linkFormatter(cell) {
const val = cell.getValue()
const val = cell.getValue();
const field = cell.getField();
const arialabel = (field === 'linkInfo')
? this.$p.t('rauminfo/rauminfo')
: this.$p.t('rauminfo/roomReservations');
if(val) {
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%">' +
'<a href="'+val+'"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a></div>'
'<a href="'+val+'" aria-label="' + arialabel + '">' +
'<i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i>' +
'</a></div>'
} else {
return '<div style="display: flex; justify-content: center; align-items: center; height: 100%">' +
'-</div>'
@@ -192,7 +198,7 @@ export const Raumsuche = {
this.setupMounted()
},
template: `
<h2>{{$p.t('lvplan/raumsuche')}}</h2>
<h1 class="h3">{{$p.t('lvplan/raumsuche')}}</h1>
<hr>
<div class="row">
<div class="col-12 col-lg-2">