fipamo/resources/views/includes/options.blade.php
ro 6c44f58448
accessbility improvements for issue #109
the bold, italic and strikethrough options now function as toggles for
formatting options and removes them rather than just replacing text

the options buttons under the meta ui now communicate their status
through use of the 'aria pressed' attribute so they can be properly read
by assitive technologies like screen readers
2025-05-13 10:58:21 -06:00

51 lines
No EOL
1.9 KiB
PHP

<?php
if(isset($page['menu']) && $page['menu'])
{
$menu = 'true';
}else{
$menu = 'false';
}
if(isset($page['featured']) && $page['featured'])
{
$featured = 'true';
}else{
$featured = 'false';
}
if(isset($page['published']) && $page['published'])
{
$published = 'true';
}else{
$published = 'false';
}
if(isset($page['uuid']))
{
$uuid = $page['uuid'];
}else{
$uuid = 1;
}
?>
<div role="toolbar" aria-label="page options" aria-orientation="horizontal">
<button id="option-menu-pin" class="option-inactive post-option-btn" aria-pressed="{{$menu}}" data-active="{{$menu}}" title='Pin to Menu' aria-label="pin to menu">
<svg id="option-menu-pin" class="icon">
<use id="option-menu-pin" xlink:href="/assets/images/global/sprite.svg#entypo-pin" />
</svg>
</button><button id="option-feature" class="option-inactive post-option-btn" aria-pressed="{{$featured}}" data-active="{{$featured}}" title='Feature' aria-label="feature post toggle">
<svg id="option-feature-icon" class="icon">
<use id="option-feature-icon" xlink:href="/assets/images/global/sprite.svg#entypo-star" />
</svg>
</button><button id="option-published" class="option-inactive post-option-btn" aria-pressed="{{$published}}" data-active="{{$published}}" title='Published' aria-label="publish post toggle">
<svg id="option-published-icon" class="icon">
<use id="option-published-icon" xlink:href="/assets/images/global/sprite.svg#entypo-globe" />
</svg>
</button><a href="/theme/view/page/{{$uuid}}" target="_blank"><button id="option-preview" class="option-inactive post-option-btn" data-active="false" title='preview page' aria-label="preview post">
<svg id="option-preview-icon" class="icon">
<use id="option-preview-icon" xlink:href="/assets/images/global/sprite.svg#entypo-eye" />
</svg>
</button>
</a>
</div>