mirror_php/formwork
1
0
Fork 0
mirror of https://github.com/getformwork/formwork.git synced 2025-01-17 21:49:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve accessibility

Browse Source
This commit is contained in:
Giuseppe Criscione 2024-01-21 14:12:11 +01:00
parent ee96ab83eb
commit 826168e2e6
26 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
panel/assets/icons/svg/bars.svg Normal file
View File

@ -0,0 +1 @@
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.25 4A.75.75 0 0 1 3 3.25h10a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 4Zm0 4A.75.75 0 0 1 3 7.25h10a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 8Zm0 4a.75.75 0 0 1 .75-.75h10a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

32
panel/assets/js/app.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
panel/src/js/components/inputs/select-input.js
View File

@ -26,6 +26,12 @@ export class SelectInput {
labelInput.classList.add("select");
labelInput.dataset.for = select.id;
const selectLabel = $('label[for="' + select.id + '"]');
if (selectLabel) {
labelInput.setAttribute("aria-label", selectLabel.innerText);
}
if (select.hasAttribute("disabled")) {
labelInput.disabled = true;
}

7
panel/src/js/components/modal.js
View File

@ -45,6 +45,8 @@ export class Modal {
show(action, callback) {
const modal = this.element;
modal.setAttribute("role", "dialog");
modal.setAttribute("aria-modal", "true");
modal.classList.add("show");
if (action) {
$("form", modal).action = action;
@ -63,7 +65,10 @@ export class Modal {
}
hide() {
this.element.classList.remove("show");
const modal = this.element;
modal.classList.remove("show");
modal.removeAttribute("role");
modal.removeAttribute("aria-modal");
this.removeBackdrop();
}

2
panel/src/js/components/tooltips.js
View File

@ -6,7 +6,7 @@ export class Tooltips {
constructor() {
$$("[title]", document.body).forEach((element) => {
element.dataset.tooltip = element.title;
element.title = "";
element.removeAttribute("title");
});
$$("[data-tooltip]").forEach((element) => {

1
panel/translations/en.yaml
View File

@ -48,6 +48,7 @@ panel.modal.action.uploadFile: Upload a File
panel.modal.images.noImages: There are no images here
panel.modal.images.noImages.upload: Please upload some images
panel.modal.images.title: Select an Image
panel.navigation.toggle: Toggle navigation
panel.options.info: Info
panel.options.options: Options
panel.options.site: Site

1
panel/translations/fr.yaml
View File

@ -48,6 +48,7 @@ panel.modal.action.uploadFile: Parcourir…
panel.modal.images.noImages: Aucun fichier média n’a été trouvé.
panel.modal.images.noImages.upload: Sélectionnez vos fichiers à téléverser.
panel.modal.images.title: Bibliothèque de médias
panel.navigation.toggle: Afficher/Masquer la navigation
panel.options.info: Information
panel.options.options: Paramètres
panel.options.site: Site

1
panel/translations/it.yaml
View File

@ -48,6 +48,7 @@ panel.modal.action.uploadFile: Carica file
panel.modal.images.noImages: Qui non ci sono immagini
panel.modal.images.noImages.upload: Carica qualche immagine
panel.modal.images.title: Seleziona immagine
panel.navigation.toggle: Mostra/nascondi menu
panel.options.info: Informazioni
panel.options.options: Impostazioni
panel.options.site: Sito

1
panel/translations/pt.yaml
View File

@ -48,6 +48,7 @@ panel.modal.action.uploadFile: Enviar um ficheiro
panel.modal.images.noImages: Não há imagens aqui
panel.modal.images.noImages.upload: Por favor carregue algumas imagens
panel.modal.images.title: Escolha uma Imagem
panel.navigation.toggle: Alternar Navegação
panel.options.info: Informações
panel.options.options: Opções
panel.options.site: Site

1
panel/translations/ru.yaml
View File

@ -48,6 +48,7 @@ panel.modal.action.uploadFile: Загрузить файл
panel.modal.images.noImages: Там нет изображений здесь
panel.modal.images.noImages.upload: Пожалуйста, загрузите некоторые изображения
panel.modal.images.title: Выберите изображение
panel.navigation.toggle: Переключить навигацию
panel.options.info: Информация
panel.options.options: Параметры
panel.options.site: Сайт

2
panel/views/fields/layout/sections.php
View File

@ -3,7 +3,7 @@
<section <?= $this->attr(['class' => ['section', $section->is('collapsible') ? 'collapsible' : '', $section->is('collapsed') ? 'collapsed' : '']]) ?>>
<div class="section-header">
<?php if ($section->is('collapsible')): ?>
<button type="button" class="section-toggle mr-2" title="<?= $this->translate('panel.sections.toggle') ?>"><?= $this->icon('chevron-up') ?></button>
<button type="button" class="section-toggle mr-2" title="<?= $this->translate('panel.sections.toggle') ?>" aria-label="<?= $this->translate('panel.sections.toggle') ?>"><?= $this->icon('chevron-up') ?></button>
<?php endif ?>
<span class="caption"><?= $section->label() ?></span>
</div>

4
panel/views/modals/changes.php
View File

@ -1,7 +1,7 @@
<div id="changesModal" class="modal">
<div id="changesModal" class="modal" aria-labelledby="changesModalLabel">
<div class="modal-container">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.pages.changes.detected') ?></h3>
<h3 class="caption" id="changesModalLabel"><?= $this->translate('panel.pages.changes.detected') ?></h3>
</div>
<div class="modal-content">
<p class="modal-text"><?= $this->translate('panel.pages.changes.detected.prompt') ?></p>

4
panel/views/modals/deleteFile.php
View File

@ -1,8 +1,8 @@
<div id="deleteFileModal" class="modal">
<div id="deleteFileModal" class="modal" aria-labelledby="deleteFileModalLabel">
<div class="modal-container">
<form action="" method="post">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.pages.deleteFile') ?></h3>
<h3 class="caption" id="deleteFileModalLabel"><?= $this->translate('panel.pages.deleteFile') ?></h3>
</div>
<div class="modal-content">
<p class="modal-text"><?= $this->translate('panel.pages.deleteFile.prompt') ?></p>

4
panel/views/modals/deletePage.php
View File

@ -1,8 +1,8 @@
<div id="deletePageModal" class="modal">
<div id="deletePageModal" class="modal" aria-labelledby="deletePageModalLabel">
<div class="modal-container">
<form action="" method="post">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.pages.deletePage') ?></h3>
<h3 class="caption" id="deletePageModalLabel"><?= $this->translate('panel.pages.deletePage') ?></h3>
</div>
<div class="modal-content">
<p class="modal-text"><?= $this->translate('panel.pages.deletePage.prompt') ?></p>

4
panel/views/modals/deleteUser.php
View File

@ -1,8 +1,8 @@
<div id="deleteUserModal" class="modal">
<div id="deleteUserModal" class="modal" aria-labelledby="deleteUserModalLabel">
<div class="modal-container">
<form action="" method="post">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.users.deleteUser') ?></h3>
<h3 class="caption" id="deleteUserModalLabel"><?= $this->translate('panel.users.deleteUser') ?></h3>
</div>
<div class="modal-content">
<p class="modal-text"><?= $this->translate('panel.users.deleteUser.prompt') ?></p>

4
panel/views/modals/images.php
View File

@ -1,7 +1,7 @@
<div id="imagesModal" class="modal">
<div id="imagesModal" class="modal" aria-labelledby="imagesModalLabel">
<div class="modal-container modal-size-large">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.modal.images.title') ?></h3>
<h3 class="caption" id="imagesModalLabel"><?= $this->translate('panel.modal.images.title') ?></h3>
</div>
<div class="modal-content">
<div class="image-picker-empty-state">

4
panel/views/modals/newPage.php
View File

@ -1,8 +1,8 @@
<div id="newPageModal" class="modal">
<div id="newPageModal" class="modal" aria-labelledby="newPageModalLabel">
<div class="modal-container">
<form action="<?= $panel->uri('/pages/new/') ?>" method="post">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.pages.newPage') ?></h3>
<h3 class="caption" id="newPageModalLabel"><?= $this->translate('panel.pages.newPage') ?></h3>
</div>
<div class="modal-content">
<label class="label-required" for="page-title"><?= $this->translate('panel.pages.newPage.title') ?>:</label>

4
panel/views/modals/newUser.php
View File

@ -1,8 +1,8 @@
<div id="newUserModal" class="modal">
<div id="newUserModal" class="modal" aria-labelledby="newUserModalLabel">
<div class="modal-container">
<form action="<?= $panel->uri('/users/new/') ?>" method="post">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.users.newUser') ?>
<h3 class="caption" id="newUserModalLabel"><?= $this->translate('panel.users.newUser') ?>
</div>
<div class="modal-content">
<label class="label-required" for="fullname"><?= $this->translate('panel.user.fullname') ?>:</label>

4
panel/views/modals/renameFile.php
View File

@ -1,8 +1,8 @@
<div id="renameFileModal" class="modal">
<div id="renameFileModal" class="modal" aria-labelledby="renameFileModalLabel">
<div class="modal-container">
<form action="" method="post">
<div class="modal-header">
<h3 class="caption"><?= $this->translate('panel.pages.renameFile') ?></h3>
<h3 class="caption" id="renameFileModalLabel"><?= $this->translate('panel.pages.renameFile') ?></h3>
</div>
<div class="modal-content">
<label class="label-required" for="filename"><?= $this->translate('panel.pages.renameFile.name') ?>:</label>

4
panel/views/modals/slug.php
View File

@ -1,6 +1,6 @@
<div id="slugModal" class="modal">
<div id="slugModal" class="modal" aria-labelledby="slugModalLabel">
<div class="modal-container">
<div class="modal-header"><h3 class="caption"><?= $this->translate('panel.pages.changeSlug') ?></h3></div>
<div class="modal-header"><h3 class="caption" id="slugModalLabel"><?= $this->translate('panel.pages.changeSlug') ?></h3></div>
<div class="modal-content">
<label for="page-slug"><?= $this->translate('panel.pages.newPage.slug') ?>:</label>
<span class="label-suggestion">(<?= $this->translate('panel.pages.newPage.slugSuggestion') ?>)</span>

2
panel/views/options/info.php
View File

@ -10,7 +10,7 @@
<?php foreach ($info as $section => $data): ?>
<section class="section collapsible">
<div class="section-header">
<span class="section-toggle"><?= $this->icon('chevron-up') ?></span>
<button type="button" class="section-toggle mr-2" title="<?= $this->translate('panel.sections.toggle') ?>" aria-label="<?= $this->translate('panel.sections.toggle') ?>"><?= $this->icon('chevron-up') ?></button>
<span class="caption"><?= $section ?></span>
</div>
<div class="section-content">

2
panel/views/pages/list.php
View File

@ -23,7 +23,7 @@
<?php if ($subpages): ?>
<div style="min-width: 1rem" class="mr-2">
<?php if ($page->hasChildren()): ?>
<button type="button" class="page-children-toggle" title="<?= $this->translate('panel.pages.toggleChildren') ?>"><?= $this->icon('chevron-down') ?></button>
<button type="button" class="page-children-toggle" title="<?= $this->translate('panel.pages.toggleChildren') ?>" aria-label="<?= $this->translate('panel.pages.toggleChildren') ?>"><?= $this->icon('chevron-down') ?></button>
<?php endif ?>
</div>
<?php endif ?>

4
panel/views/partials/sidebar.php
View File

@ -1,10 +1,10 @@
<button type="button" class="toggle-navigation hide-from-s"><?= $this->icon('list') ?></button>
<button type="button" class="toggle-navigation hide-from-s" aria-label="<?= $this->translate('panel.navigation.toggle') ?>"><?= $this->icon('bars') ?></button>
<div class="sidebar show-from-s">
<div class="logo"><a href="<?= $panel->uri('/dashboard/') ?>"><img src="<?= $this->assets()->uri('images/icon.svg') ?>" alt=""> Formwork</a> <span class="show-from-s" style="color: #707e89; font-size: 0.75rem;"><?= $app::VERSION ?></span></div>
<a href="<?= $panel->uri('/users/' . $panel->user()->username() . '/profile/') ?>">
<div class="panel-user-card">
<div class="panel-user-avatar">
<img src="<?= $panel->user()->image()->uri() ?>" alt="">
<img src="<?= $panel->user()->image()->uri() ?>" alt="<? $panel->user()->username() ?>">
</div>
<div class="panel-user-details">
<div class="panel-user-fullname"><?= $this->escape($panel->user()->fullname()) ?></div>

2
panel/views/register/register.php
View File

@ -4,7 +4,7 @@
<div class="separator"></div>
<form action="<?= $panel->uri('/register/') ?>" method="post">
<label class="label-required" for="fullname"><?= $this->translate('panel.user.fullname') ?>:</label>
<input id="fullname" type="text" required name="fullname" autofocus>
<input id="fullname" type="text" required name="fullname">
<label class="label-required" for="username"><?= $this->translate('panel.user.username') ?>:</label>
<span class="label-suggestion">(<?= $this->translate('panel.users.newUser') ?>)</span>
<input id="username" type="text" required name="username" pattern="^[a-zA-Z0-9_-]{3,20}$" title="<?= ucfirst($this->translate('panel.users.newUser')) ?>" maxlength="20" autocomplete="false">

2
panel/views/users/index.php
View File

@ -19,7 +19,7 @@
<?php foreach ($users as $user): ?>
<div class="users-item">
<div class="users-item-cell user-username truncate">
<img class="user-avatar mr-4" src="<?= $user->image()->uri() ?>">
<img class="user-avatar mr-4" src="<?= $user->image()->uri() ?>" alt="<? $panel->user()->username() ?>">
<a href="<?= $panel->uri('/users/' . $user->username() . '/profile/') ?>"><?= $this->escape($user->username()) ?></a>
</div>
<div class="users-item-cell user-fullname truncate show-from-s"><?= $this->escape($user->fullname()) ?></div>

2
panel/views/users/profile.php
View File

@ -12,7 +12,7 @@
<section class="section">
<div class="user-summary">
<div class="user-summary-avatar">
<img src="<?= $user->image()->uri() ?>">
<img src="<?= $user->image()->uri() ?>" alt="<? $panel->user()->username() ?>">
</div>
<div class="user-summary-data">
<h3><?= $this->escape($user->fullname()) ?></h3>