Skip to content
GitLab
Commit 0145dcc4 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

created first attempt for good accessability

parent 0bc2036a
Hide whitespace changes
Inline Side-by-side
resources/js/resultpage-barriere.js 0 → 100644
View file @ 0145dcc4
var tablist = [];
var mainIndex = -1;
var index = -1;
$(document).ready(function () {
$("[data-tabtargets]").each(function (index, el) {
$(el).focusin(function () {
console.log("bind");
$(el).on('keydown.enter', function (e) {
if (e.which == 13) {
e.preventDefault();
tablist = $($(el).attr("data-tabtargets"));
index = -1;
console.log("test");
// Simulate Tab Keypress
var tmp = jQuery.Event("keydown");
tmp.which = 9;
$(el).trigger(tmp);
}
})
});
$(el).focusout(function () {
$(el).blur();
console.log("unbind");
$(el).unbind("keydown.enter");
});
});
/* Capture tab keypress and add actions */
$("html").on('keydown', function (e) {
if (e.which == 9 && tablist.length > (index + 1)) {
e.preventDefault();
$(tablist[index]).blur();
index++;
$(tablist[index]).focus();
$(tablist[index]).blur();
} else if (e.which == 9) {
e.preventDefault();
var el = $("#tab-navigator > a")[mainIndex];
var itemCount = $("#tab-navigator > a").length;
if (typeof el != "undefined") {
$(el).blur();
$(el).css("display", "none");
}
mainIndex++;
if (mainIndex >= itemCount) {
mainIndex = 0;
}
el = $("#tab-navigator > a")[mainIndex];
$(el).css("display", "block");
$(el).focus();
}
});
});
resources/js/scriptResultPage.js
View file @ 0145dcc4
$(document).ready(function () { $(document).ready(function () {
getDocumentReadyForUse(focus, custom); getDocumentReadyForUse(focus);
botProtection(); botProtection();
var search = getMetaTag('q') || ''; var search = getMetaTag('q') || '';
...@@ -29,18 +29,8 @@ function getMetaTag(name) { ...@@ -29,18 +29,8 @@ function getMetaTag(name) {
function getDocumentReadyForUse(fokus, custom) { function getDocumentReadyForUse(fokus, ) {
if (typeof custom == 'undefined') custom = false;
activateJSOnlyContent();
popovers(); popovers();
if (fokus === 'bilder') imageLoader();
if (custom) initialLoadContent(fokus);
// pagination()
tabs();
fokiChanger();
//pluginInfo();
$('iframe:not(.resized)').iFrameResize();
$('iframe').addClass('resized');
addListeners(); addListeners();
} }
......
resources/less/metager/pages/resultpage/result-page.less
View file @ 0145dcc4
...@@ -22,7 +22,21 @@ ...@@ -22,7 +22,21 @@
// Color of the Spruch author // Color of the Spruch author
@spruch-author-color: @color-strong-grey; @spruch-author-color: @color-strong-grey;
/* Styles */ /* Styles */
#tab-navigator > a {
display: none;
position: fixed;
bottom: 0;
z-index: 999;
right: 0;
padding: 16px;
background-color: white;
border: 1px solid #ccc;
border-right: 0;
border-bottom: 0;
&:focus {
display: block;
}
}
#header-logo { #header-logo {
z-index: 0; z-index: 0;
padding-right: 8px; padding-right: 8px;
......
resources/views/layouts/ad.blade.php
View file @ 0145dcc4
@if(isset($ad) && !$apiAuthorized) @if(isset($ad) && !$apiAuthorized)
<div class="result ad"> <div class="result ad" tabindex="0">
</span> </span>
<div class="result-header"> <div class="result-header">
<div class="result-headline"> <div class="result-headline">
......
resources/views/layouts/result.blade.php
View file @ 0145dcc4
<div class="result" data-count="{{ $result->number }}"> <div class="result" data-count="{{ $result->number }}" tabindex="0">
<div class="result-header"> <div class="result-header">
<div class="result-headline"> <div class="result-headline">
<h2 class="result-title" title="{{ $result->titel }}"> <h2 class="result-title" title="{{ $result->titel }}">
......
resources/views/layouts/resultPage.blade.php
View file @ 0145dcc4
...@@ -21,6 +21,10 @@ ...@@ -21,6 +21,10 @@
@include('parts.utility') @include('parts.utility')
</head> </head>
<body id="resultpage-body"> <body id="resultpage-body">
<div id="tab-navigator">
<a href="#" class="tab-navigator" data-tabtargets=".result">Zu den Suchergebnissen</a>
<a href="#" class="tab-navigator" data-tabtargets="input[name=eingabe], #research-bar button[type=submit], #key-label">Neue Suche durchführen</a>
</div>
@if(Request::getHttpHost() === "metager3.de") @if(Request::getHttpHost() === "metager3.de")
<div class="alert alert-info metager3-unstable-warning-resultpage"> <div class="alert alert-info metager3-unstable-warning-resultpage">
{!! @trans('resultPage.metager3') !!} {!! @trans('resultPage.metager3') !!}
......
resources/views/parts/foki.blade.php
View file @ 0145dcc4
@foreach($metager->getSumaFile()->foki as $name => $fokus) @foreach($metager->getSumaFile()->foki as $name => $fokus)
<div id="{{$name}}" @if($metager->getFokus() === $name)class="active"@endif> <div id="{{$name}}" @if($metager->getFokus() === $name)class="active"@endif>
<a href="@if($metager->getFokus() === $name)#@else{!!$metager->generateSearchLink($name)!!}@endif" target="_self" tabindex="0">@lang($fokus->{"display-name"})</a> <a href="@if($metager->getFokus() === $name)#@else{!!$metager->generateSearchLink($name)!!}@endif" target="_self">@lang($fokus->{"display-name"})</a>
</div> </div>
@endforeach @endforeach
@if (LaravelLocalization::getCurrentLocale() == "de") @if (LaravelLocalization::getCurrentLocale() == "de")
......
resources/views/parts/searchbar.blade.php
View file @ 0145dcc4
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
<div class="searchbar {{$class ?? ''}}"> <div class="searchbar {{$class ?? ''}}">
<div class="search-input-submit"> <div class="search-input-submit">
<div id="search-key"> <div id="search-key">
<input id="input-key" type="text" name="key" placeholder="{{ trans ('index.key.placeholder') }}" tabindex="1"> <input id="input-key" type="text" name="key" placeholder="{{ trans ('index.key.placeholder') }}">
<label id="key-label" for="input-key" data-tooltip="{{ trans ('index.key.tooltip') }}"> <label id="key-label" for="input-key" data-tooltip="{{ trans ('index.key.tooltip') }}">
<i class="fa fa-key" aria-hidden="true"></i> <i class="fa fa-key" aria-hidden="true"></i>
</label> </label>
</div> </div>
<div class="search-input"> <div class="search-input">
<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" @if(\Request::is('/')) autofocus @endif autocomplete="{{$autocomplete ?? 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="2"> <input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" @if(\Request::is('/')) autofocus @endif autocomplete="{{$autocomplete ?? 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
<button class="hidden" id="search-delete-btn" type="button"> <button class="hidden" id="search-delete-btn" type="button">
&#xd7; &#xd7;
</button> </button>
......
webpack.mix.js
View file @ 0145dcc4
...@@ -46,7 +46,6 @@ mix ...@@ -46,7 +46,6 @@ mix
"resources/js/lib/jquery.js", "resources/js/lib/jquery.js",
"resources/js/lib/jquery-ui.min.js", "resources/js/lib/jquery-ui.min.js",
"resources/js/lib/bootstrap.js", "resources/js/lib/bootstrap.js",
"resources/js/lib/iframeResizer.min.js",
"resources/js/lib/md5.js" "resources/js/lib/md5.js"
], ],
"public/js/lib.js" "public/js/lib.js"
...@@ -62,7 +61,8 @@ mix ...@@ -62,7 +61,8 @@ mix
[ [
"resources/js/scriptResultPage.js", "resources/js/scriptResultPage.js",
"resources/js/result-saver.js", "resources/js/result-saver.js",
"resources/js/translations.js" "resources/js/translations.js",
"resources/js/resultpage-barriere.js"
], ],
"public/js/scriptResultPage.js" "public/js/scriptResultPage.js"
) )
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment