BookStack/resources/views/tri-layout.blade.php
Dan Brown 9df4dee1b2 Improved header element accessibility when at mobile sizes
Intended to fix issues raised in #2681.
Changes up the tri-layout tabs, and the main header menu toggle,
to be buttons while adding better text and keyboard controls.

Updated the component format of a few elements along the way.
2021-04-19 21:41:13 +01:00

50 lines
1.6 KiB
PHP

@extends('base')
@section('body-class', 'tri-layout')
@section('content-components', 'tri-layout')
@section('content')
<div class="tri-layout-mobile-tabs print-hidden">
<div class="grid half no-break no-gap">
<button type="button"
refs="tri-layout@tab"
data-tab="info"
aria-label="{{ trans('common.tab_info_label') }}"
class="tri-layout-mobile-tab px-m py-m text-primary">
{{ trans('common.tab_info') }}
</button>
<button type="button"
refs="tri-layout@tab"
data-tab="content"
aria-label="{{ trans('common.tab_content_label') }}"
aria-selected="true"
class="tri-layout-mobile-tab px-m py-m text-primary active">
{{ trans('common.tab_content') }}
</button>
</div>
</div>
<div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
<div class="tri-layout-left print-hidden pt-m" id="sidebar">
<aside class="tri-layout-left-contents">
@yield('left')
</aside>
</div>
<div class="@yield('body-wrap-classes') tri-layout-middle">
<div class="tri-layout-middle-contents">
@yield('body')
</div>
</div>
<div class="tri-layout-right print-hidden pt-m">
<aside class="tri-layout-right-contents">
@yield('right')
</aside>
</div>
</div>
@stop