390 lines
14 KiB
PHP
390 lines
14 KiB
PHP
<?php
|
||
|
||
/**
|
||
* ARIAComponents - WCAG 2.1 AA Compliant Component Library
|
||
*
|
||
* Features:
|
||
* - Full ARIA support for all components
|
||
* - Keyboard navigation
|
||
* - Screen reader optimization
|
||
* - Focus management
|
||
* - WCAG 2.1 AA compliance
|
||
*/
|
||
class ARIAComponents {
|
||
|
||
/**
|
||
* Create accessible button with full ARIA support
|
||
*
|
||
* @param string $text Button text
|
||
* @param array $options Button options
|
||
* @return string Accessible button HTML
|
||
*/
|
||
public static function createAccessibleButton($text, $options = []) {
|
||
$id = $options['id'] ?? 'btn-' . uniqid();
|
||
$class = $options['class'] ?? 'btn btn-primary';
|
||
$ariaLabel = $options['aria-label'] ?? $text;
|
||
$ariaPressed = $options['aria-pressed'] ?? 'false';
|
||
$ariaExpanded = $options['aria-expanded'] ?? 'false';
|
||
$ariaControls = $options['aria-controls'] ?? '';
|
||
$disabled = $options['disabled'] ?? false;
|
||
$type = $options['type'] ?? 'button';
|
||
|
||
$attributes = [
|
||
'id="' . $id . '"',
|
||
'type="' . $type . '"',
|
||
'class="' . $class . '"',
|
||
'tabindex="0"',
|
||
'role="button"',
|
||
'aria-label="' . htmlspecialchars($ariaLabel, ENT_QUOTES, 'UTF-8') . '"',
|
||
'aria-pressed="' . $ariaPressed . '"',
|
||
'aria-expanded="' . $ariaExpanded . '"'
|
||
];
|
||
|
||
if ($ariaControls) {
|
||
$attributes[] = 'aria-controls="' . $ariaControls . '"';
|
||
}
|
||
|
||
if ($disabled) {
|
||
$attributes[] = 'disabled';
|
||
$attributes[] = 'aria-disabled="true"';
|
||
}
|
||
|
||
return '<button ' . implode(' ', $attributes) . '>' . htmlspecialchars($text, ENT_QUOTES, 'UTF-8') . '</button>';
|
||
}
|
||
|
||
/**
|
||
* Create accessible navigation with full ARIA support
|
||
*
|
||
* @param array $menu Menu structure
|
||
* @param array $options Navigation options
|
||
* @return string Accessible navigation HTML
|
||
*/
|
||
public static function createAccessibleNavigation($menu, $options = []) {
|
||
$id = $options['id'] ?? 'main-navigation';
|
||
$label = $options['aria-label'] ?? 'Hoofdmenu';
|
||
$orientation = $options['orientation'] ?? 'horizontal';
|
||
|
||
$html = '<nav id="' . $id . '" role="navigation" aria-label="' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8) . '">';
|
||
$html .= '<ul role="menubar" aria-orientation="' . $orientation . '">';
|
||
|
||
foreach ($menu as $index => $item) {
|
||
$html .= self::createNavigationItem($item, $index);
|
||
}
|
||
|
||
$html .= '</ul></nav>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create navigation item with ARIA support
|
||
*
|
||
* @param array $item Menu item
|
||
* @param int $index Item index
|
||
* @return string Navigation item HTML
|
||
*/
|
||
private static function createNavigationItem($item, $index) {
|
||
$hasChildren = isset($item['children']) && !empty($item['children']);
|
||
$itemId = 'nav-item-' . $index;
|
||
|
||
if ($hasChildren) {
|
||
$html = '<li role="none">';
|
||
$html .= '<a href="' . htmlspecialchars($item['url'] ?? '#', ENT_QUOTES, 'UTF-8') . '" ';
|
||
$html .= 'id="' . $itemId . '" ';
|
||
$html .= 'role="menuitem" ';
|
||
$html .= 'aria-haspopup="true" ';
|
||
$html .= 'aria-expanded="false" ';
|
||
$html .= 'tabindex="0" ';
|
||
$html .= 'class="nav-link dropdown-toggle">';
|
||
$html .= htmlspecialchars($item['title'], ENT_QUOTES, 'UTF-8');
|
||
$html .= '<span class="sr-only"> submenu</span>';
|
||
$html .= '</a>';
|
||
|
||
$html .= '<ul role="menu" aria-labelledby="' . $itemId . '" class="dropdown-menu">';
|
||
|
||
foreach ($item['children'] as $childIndex => $child) {
|
||
$html .= self::createNavigationItem($child, $index . '-' . $childIndex);
|
||
}
|
||
|
||
$html .= '</ul></li>';
|
||
} else {
|
||
$html = '<li role="none">';
|
||
$html .= '<a href="' . htmlspecialchars($item['url'] ?? '#', ENT_QUOTES, 'UTF-8') . '" ';
|
||
$html .= 'role="menuitem" ';
|
||
$html .= 'tabindex="0" ';
|
||
$html .= 'class="nav-link">';
|
||
$html .= htmlspecialchars($item['title'], ENT_QUOTES, 'UTF-8');
|
||
$html .= '</a></li>';
|
||
}
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create accessible form with full ARIA support
|
||
*
|
||
* @param array $fields Form fields
|
||
* @param array $options Form options
|
||
* @return string Accessible form HTML
|
||
*/
|
||
public static function createAccessibleForm($fields, $options = []) {
|
||
$id = $options['id'] ?? 'form-' . uniqid();
|
||
$method = $options['method'] ?? 'POST';
|
||
$action = $options['action'] ?? '';
|
||
$label = $options['aria-label'] ?? 'Formulier';
|
||
|
||
$html = '<form id="' . $id . '" method="' . $method . '" action="' . htmlspecialchars($action, ENT_QUOTES, 'UTF-8') . '" ';
|
||
$html .= 'role="form" aria-label="' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8) . '" ';
|
||
$html .= 'novalidate>';
|
||
|
||
foreach ($fields as $index => $field) {
|
||
$html .= self::createFormField($field, $index);
|
||
}
|
||
|
||
$html .= '</form>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create accessible form field with full ARIA support
|
||
*
|
||
* @param array $field Field configuration
|
||
* @param int $index Field index
|
||
* @return string Form field HTML
|
||
*/
|
||
private static function createFormField($field, $index) {
|
||
$id = $field['id'] ?? 'field-' . $index;
|
||
$type = $field['type'] ?? 'text';
|
||
$label = $field['label'] ?? 'Veld ' . ($index + 1);
|
||
$required = $field['required'] ?? false;
|
||
$help = $field['help'] ?? '';
|
||
$error = $field['error'] ?? '';
|
||
|
||
$html = '<div class="form-group">';
|
||
|
||
// Label with required indicator
|
||
$html .= '<label for="' . $id . '" class="form-label">';
|
||
$html .= htmlspecialchars($label, ENT_QUOTES, 'UTF-8');
|
||
if ($required) {
|
||
$html .= '<span class="required" aria-label="verplicht">*</span>';
|
||
}
|
||
$html .= '</label>';
|
||
|
||
// Input with ARIA attributes
|
||
$inputAttributes = [
|
||
'type="' . $type . '"',
|
||
'id="' . $id . '"',
|
||
'name="' . htmlspecialchars($field['name'] ?? $id, ENT_QUOTES, 'UTF-8') . '"',
|
||
'class="form-control"',
|
||
'tabindex="0"',
|
||
'aria-describedby="' . $id . '-help' . ($error ? ' ' . $id . '-error' : '') . '"',
|
||
'aria-required="' . ($required ? 'true' : 'false') . '"'
|
||
];
|
||
|
||
if ($error) {
|
||
$inputAttributes[] = 'aria-invalid="true"';
|
||
$inputAttributes[] = 'aria-errormessage="' . $id . '-error"';
|
||
}
|
||
|
||
if (isset($field['placeholder'])) {
|
||
$inputAttributes[] = 'placeholder="' . htmlspecialchars($field['placeholder'], ENT_QUOTES, 'UTF-8') . '"';
|
||
}
|
||
|
||
$html .= '<input ' . implode(' ', $inputAttributes) . ' />';
|
||
|
||
// Help text
|
||
if ($help) {
|
||
$html .= '<div id="' . $id . '-help" class="form-text" role="note">';
|
||
$html .= htmlspecialchars($help, ENT_QUOTES, 'UTF-8');
|
||
$html .= '</div>';
|
||
}
|
||
|
||
// Error message
|
||
if ($error) {
|
||
$html .= '<div id="' . $id . '-error" class="form-text text-danger" role="alert" aria-live="polite">';
|
||
$html .= htmlspecialchars($error, ENT_QUOTES, 'UTF-8');
|
||
$html .= '</div>';
|
||
}
|
||
|
||
$html .= '</div>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create accessible search form
|
||
*
|
||
* @param array $options Search options
|
||
* @return string Accessible search form HTML
|
||
*/
|
||
public static function createAccessibleSearch($options = []) {
|
||
$id = $options['id'] ?? 'search-form';
|
||
$placeholder = $options['placeholder'] ?? 'Zoeken...';
|
||
$buttonText = $options['button-text'] ?? 'Zoeken';
|
||
$label = $options['aria-label'] ?? 'Zoeken op de website';
|
||
|
||
$html = '<form id="' . $id . '" role="search" aria-label="' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8') . '" method="GET" action="">';
|
||
$html .= '<div class="input-group">';
|
||
|
||
// Search input
|
||
$html .= '<input type="search" name="search" id="search-input" ';
|
||
$html .= 'class="form-control" ';
|
||
$html .= 'placeholder="' . htmlspecialchars($placeholder, ENT_QUOTES, 'UTF-8') . '" ';
|
||
$html .= 'aria-label="' . htmlspecialchars($placeholder, ENT_QUOTES, 'UTF-8') . '" ';
|
||
$html .= 'tabindex="0" ';
|
||
$html .= 'autocomplete="off" ';
|
||
$html .= 'spellcheck="false" />';
|
||
|
||
// Search button
|
||
$html .= self::createAccessibleButton($buttonText, [
|
||
'id' => 'search-button',
|
||
'class' => 'btn btn-outline-secondary',
|
||
'aria-label' => 'Zoekopdracht uitvoeren',
|
||
'type' => 'submit'
|
||
]);
|
||
|
||
$html .= '</div></form>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create accessible breadcrumb navigation
|
||
*
|
||
* @param array $breadcrumbs Breadcrumb items
|
||
* @param array $options Breadcrumb options
|
||
* @return string Accessible breadcrumb HTML
|
||
*/
|
||
public static function createAccessibleBreadcrumb($breadcrumbs, $options = []) {
|
||
$label = $options['aria-label'] ?? 'Broodkruimelnavigatie';
|
||
|
||
$html = '<nav aria-label="' . htmlspecialchars($label, ENT_QUOTES, 'UTF-8) . '">';
|
||
$html .= '<ol class="breadcrumb">';
|
||
|
||
foreach ($breadcrumbs as $index => $crumb) {
|
||
$isLast = $index === count($breadcrumbs) - 1;
|
||
|
||
$html .= '<li class="breadcrumb-item">';
|
||
|
||
if ($isLast) {
|
||
$html .= '<span aria-current="page">' . htmlspecialchars($crumb['title'], ENT_QUOTES, 'UTF-8') . '</span>';
|
||
} else {
|
||
$html .= '<a href="' . htmlspecialchars($crumb['url'] ?? '#', ENT_QUOTES, 'UTF-8') . '" tabindex="0">';
|
||
$html .= htmlspecialchars($crumb['title'], ENT_QUOTES, 'UTF-8');
|
||
$html .= '</a>';
|
||
}
|
||
|
||
$html .= '</li>';
|
||
}
|
||
|
||
$html .= '</ol></nav>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create accessible skip links
|
||
*
|
||
* @param array $targets Skip targets
|
||
* @return string Skip links HTML
|
||
*/
|
||
public static function createSkipLinks($targets = []) {
|
||
$defaultTargets = [
|
||
['id' => 'main-content', 'text' => 'Skip to main content'],
|
||
['id' => 'navigation', 'text' => 'Skip to navigation'],
|
||
['id' => 'search', 'text' => 'Skip to search']
|
||
];
|
||
|
||
$targets = array_merge($defaultTargets, $targets);
|
||
|
||
$html = '<div class="skip-links">';
|
||
|
||
foreach ($targets as $target) {
|
||
$html .= '<a href="#' . htmlspecialchars($target['id'], ENT_QUOTES, 'UTF-8') . '" ';
|
||
$html .= 'class="skip-link" tabindex="0">';
|
||
$html .= htmlspecialchars($target['text'], ENT_QUOTES, 'UTF-8');
|
||
$html .= '</a>';
|
||
}
|
||
|
||
$html .= '</div>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create accessible modal dialog
|
||
*
|
||
* @param string $id Modal ID
|
||
* @param string $title Modal title
|
||
* @param string $content Modal content
|
||
* @param array $options Modal options
|
||
* @return string Accessible modal HTML
|
||
*/
|
||
public static function createAccessibleModal($id, $title, $content, $options = []) {
|
||
$label = $options['aria-label'] ?? $title;
|
||
$closeText = $options['close-text'] ?? 'Sluiten';
|
||
|
||
$html = '<div id="' . $id . '" class="modal" role="dialog" ';
|
||
$html .= 'aria-modal="true" aria-labelledby="' . $id . '-title" aria-hidden="true">';
|
||
$html .= '<div class="modal-dialog" role="document">';
|
||
$html .= '<div class="modal-content">';
|
||
|
||
// Header
|
||
$html .= '<div class="modal-header">';
|
||
$html .= '<h2 id="' . $id . '-title" class="modal-title">' . htmlspecialchars($title, ENT_QUOTES, 'UTF-8') . '</h2>';
|
||
$html .= self::createAccessibleButton($closeText, [
|
||
'class' => 'btn-close',
|
||
'aria-label' => 'Modal sluiten',
|
||
'data-bs-dismiss' => 'modal'
|
||
]);
|
||
$html .= '</div>';
|
||
|
||
// Body
|
||
$html .= '<div class="modal-body" role="document">';
|
||
$html .= $content;
|
||
$html .= '</div>';
|
||
|
||
$html .= '</div></div></div>';
|
||
|
||
return $html;
|
||
}
|
||
|
||
/**
|
||
* Create accessible alert/notice
|
||
*
|
||
* @param string $message Alert message
|
||
* @param string $type Alert type (info, success, warning, error)
|
||
* @param array $options Alert options
|
||
* @return string Accessible alert HTML
|
||
*/
|
||
public static function createAccessibleAlert($message, $type = 'info', $options = []) {
|
||
$id = $options['id'] ?? 'alert-' . uniqid();
|
||
$dismissible = $options['dismissible'] ?? false;
|
||
$role = $options['role'] ?? 'alert';
|
||
|
||
$classMap = [
|
||
'info' => 'alert-info',
|
||
'success' => 'alert-success',
|
||
'warning' => 'alert-warning',
|
||
'error' => 'alert-danger'
|
||
];
|
||
|
||
$html = '<div id="' . $id . '" class="alert ' . ($classMap[$type] ?? 'alert-info') . '" ';
|
||
$html .= 'role="' . $role . '" aria-live="polite" aria-atomic="true">';
|
||
|
||
$html .= htmlspecialchars($message, ENT_QUOTES, 'UTF-8');
|
||
|
||
if ($dismissible) {
|
||
$html .= self::createAccessibleButton('×', [
|
||
'class' => 'btn-close',
|
||
'aria-label' => 'Melding sluiten',
|
||
'data-bs-dismiss' => 'alert'
|
||
]);
|
||
}
|
||
|
||
$html .= '</div>';
|
||
|
||
return $html;
|
||
}
|
||
} |