class-admin.php
662 lines
| 1 | <?php |
| 2 | |
| 3 | // Exit if accessed directly |
| 4 | if ( ! defined( 'ABSPATH' ) ) exit; |
| 5 | |
| 6 | class ARIAAT_Admin { |
| 7 | |
| 8 | /** |
| 9 | * Constructor to hook the necessary actions. |
| 10 | */ |
| 11 | public function __construct() { |
| 12 | |
| 13 | add_action( 'admin_enqueue_scripts', [ $this, 'admin_scripts_styles' ] ); |
| 14 | |
| 15 | add_action('admin_menu', [$this, 'register_admin_menu']); |
| 16 | add_action('admin_init', [$this, 'register_settings']); |
| 17 | |
| 18 | } |
| 19 | |
| 20 | public function admin_scripts_styles( $hook ) { |
| 21 | $v = ARIAATVERSION; |
| 22 | //$v = time(); |
| 23 | |
| 24 | if ( strpos( $hook, 'ariaat' ) !== false ) { |
| 25 | wp_enqueue_script( |
| 26 | 'ariaat-admin', |
| 27 | ARIAATURL . 'assets/js/ariaat-admin.js', |
| 28 | ['jquery'], |
| 29 | $v, |
| 30 | true |
| 31 | ); |
| 32 | |
| 33 | wp_localize_script('ariaat-admin', 'ARIAAT_Data', [ |
| 34 | 'aria_options' => array_map(function($item) { |
| 35 | return [ |
| 36 | 'label' => $item['label'], |
| 37 | ]; |
| 38 | }, $this->get_aria_attributes()), |
| 39 | 'role_options' => array_map(function($item) { |
| 40 | return [ |
| 41 | 'label' => $item['label'], |
| 42 | ]; |
| 43 | }, $this->get_role_options()), |
| 44 | ]); |
| 45 | |
| 46 | wp_enqueue_style( 'ariaat-style', ARIAATURL .'assets/css/ariaat-admin.css', false, $v ); |
| 47 | } |
| 48 | } |
| 49 | |
| 50 | public function register_admin_menu() { |
| 51 | add_options_page('ARIA Toolkit', 'ARIA Toolkit', 'manage_options', 'ariaat', [$this, 'render_settings_page']); |
| 52 | } |
| 53 | |
| 54 | public function register_settings() { |
| 55 | |
| 56 | register_setting('ariaat_general_group', 'ariaat_general_settings', [$this, 'sanitize_general_settings']); |
| 57 | |
| 58 | register_setting('ariaat_aria_group', 'ariaat_aria_mappings', [$this, 'sanitize_array']); |
| 59 | register_setting('ariaat_aria_group', 'ariaat_aria_menus', [$this, 'sanitize_menu_selection']); |
| 60 | |
| 61 | register_setting('ariaat_role_group', 'ariaat_role_mappings', [$this, 'sanitize_array']); |
| 62 | register_setting('ariaat_role_group', 'ariaat_role_menus', [$this, 'sanitize_menu_selection']); |
| 63 | |
| 64 | register_setting('ariaat_contrast_group', 'ariaat_contrast_mappings', [$this, 'sanitize_array']); |
| 65 | } |
| 66 | |
| 67 | |
| 68 | public function get_all_menus() { |
| 69 | $menus = wp_get_nav_menus(); |
| 70 | $output = []; |
| 71 | foreach ($menus as $menu) { |
| 72 | $output[$menu->term_id] = $menu->name; |
| 73 | } |
| 74 | return $output; |
| 75 | } |
| 76 | |
| 77 | |
| 78 | public function render_settings_page() { |
| 79 | |
| 80 | $active_tab = isset($_GET['tab']) ? sanitize_key($_GET['tab']) : 'aria'; |
| 81 | ?> |
| 82 | <div class="wrap ariaat"> |
| 83 | <h1>ARIA & Accessibility Toolkit <span><?php echo esc_attr( ARIAATVERSION ); ?></span></h1> |
| 84 | |
| 85 | <div class="main_content"> |
| 86 | <h2 class="nav-tab-wrapper"> |
| 87 | <a href="?page=ariaat&tab=general" class="nav-tab <?php echo $active_tab == 'general' ? 'nav-tab-active' : '' ?>">General</a> |
| 88 | <a href="?page=ariaat&tab=aria" class="nav-tab <?php echo $active_tab == 'aria' ? 'nav-tab-active' : '' ?>">ARIA</a> |
| 89 | <a href="?page=ariaat&tab=roles" class="nav-tab <?php echo $active_tab == 'roles' ? 'nav-tab-active' : '' ?>">Roles</a> |
| 90 | <a href="?page=ariaat&tab=contrast" class="nav-tab <?php echo $active_tab == 'contrast' ? 'nav-tab-active' : '' ?>">Contrast</a> |
| 91 | <?php do_action( 'ariaat_after_nav_tab_wrapper', $active_tab ); ?> |
| 92 | </h2> |
| 93 | |
| 94 | |
| 95 | <form method="post" action="options.php"> |
| 96 | <?php |
| 97 | if ($active_tab === 'general') { |
| 98 | settings_fields('ariaat_general_group'); |
| 99 | $settings = get_option('ariaat_general_settings', []); |
| 100 | |
| 101 | ?> |
| 102 | <h3>Frontend Accessibility Checker</h3> |
| 103 | <table class="form-table general-table"> |
| 104 | <tr> |
| 105 | <th scope="row">Frontend Checker</th> |
| 106 | <td> |
| 107 | <label> |
| 108 | <input type="checkbox" name="ariaat_general_settings[enable_frontend_checker]" value="1" <?php checked($settings['enable_frontend_checker'] ?? '', '1'); ?> /> |
| 109 | Display the frontend accessibility checker. |
| 110 | </label> |
| 111 | <p class="description">Toggle visibility of the accessibility checker overlay on the frontend for testing purposes. Enabling this will make it visible to logged-in admins only.</p> |
| 112 | </td> |
| 113 | </tr> |
| 114 | </table> |
| 115 | |
| 116 | <h3>General Accessibility Enhancements</h3> |
| 117 | |
| 118 | <table class="form-table general-table"> |
| 119 | |
| 120 | <tr> |
| 121 | <th scope="row">Language</th> |
| 122 | <td> |
| 123 | <input type="text" name="ariaat_general_settings[language]" value="<?php echo esc_attr($settings['language'] ?? ''); ?>" placeholder="e.g. en, en-AU" class="regular-text" /> |
| 124 | <p class="description">If your site is already setting the Language, this will override it.</p> |
| 125 | </td> |
| 126 | </tr> |
| 127 | |
| 128 | <tr> |
| 129 | <th scope="row">Skip Link Target</th> |
| 130 | <td> |
| 131 | <input type="text" name="ariaat_general_settings[skip_link]" value="<?php echo esc_attr($settings['skip_link'] ?? ''); ?>" class="regular-text" placeholder=".main-content" /> |
| 132 | <p class="description">Enter a CSS selector for the main content area (e.g. <code>.main-content</code>). If provided, a “Skip to content” link will be added at the top of the page but will only be visible to keyboard and screen reader users.</p> |
| 133 | </td> |
| 134 | </tr> |
| 135 | |
| 136 | <tr> |
| 137 | <th scope="row">Show Focus Outline</th> |
| 138 | <td> |
| 139 | <label> |
| 140 | <input type="checkbox" name="ariaat_general_settings[focus_outline]" value="1" <?php checked($settings['focus_outline'] ?? '', '1'); ?> /> |
| 141 | Ensures keyboard focus outlines are visible for better navigation. |
| 142 | </label> |
| 143 | </td> |
| 144 | </tr> |
| 145 | |
| 146 | </table> |
| 147 | |
| 148 | <?php |
| 149 | } else if ($active_tab === 'aria') { |
| 150 | settings_fields('ariaat_aria_group'); |
| 151 | $items = get_option('ariaat_aria_mappings', []); |
| 152 | ?> |
| 153 | |
| 154 | <h3>Menu ARIA Labels</h3> |
| 155 | <p class="desc"> |
| 156 | Select your Nav menus to automatically apply <code>aria-label</code> attributes to the links within that menu. |
| 157 | </p> |
| 158 | |
| 159 | <?php |
| 160 | $all_menus = wp_get_nav_menus(); |
| 161 | $menus = apply_filters('ariaat_allowed_menus', array_slice($all_menus, 0, 2), $all_menus); |
| 162 | $selected = get_option('ariaat_aria_menus', []); |
| 163 | |
| 164 | foreach ($menus as $menu) { |
| 165 | $checked = in_array($menu->term_id, $selected); |
| 166 | ?> |
| 167 | <label style="display:block; margin-bottom:4px;"> |
| 168 | <input type="checkbox" name="ariaat_aria_menus[]" value="<?php echo esc_attr($menu->term_id); ?>" <?php checked($checked); ?> /> |
| 169 | <?php echo esc_html($menu->name); ?> |
| 170 | </label> |
| 171 | <?php |
| 172 | } |
| 173 | ?> |
| 174 | <hr> |
| 175 | <h3>Custom ARIA Attributes</h3> |
| 176 | <p class="desc"> |
| 177 | Add ARIA attributes to specific elements on your site using CSS selectors. |
| 178 | </p> |
| 179 | <table class="form-table" id="aria-table"> |
| 180 | <thead> |
| 181 | <tr> |
| 182 | <th>HTML Selector</th> |
| 183 | <th>ARIA Attribute</th> |
| 184 | <th>Value</th> |
| 185 | <th></th> |
| 186 | </tr> |
| 187 | </thead> |
| 188 | <tbody> |
| 189 | <?php foreach ($items as $index => $item) : ?> |
| 190 | <tr> |
| 191 | <td><input type="text" name="ariaat_aria_mappings[<?php echo esc_attr($index); ?>][selector]" value="<?php echo esc_attr($item['selector']); ?>" class="regular-text" /></td> |
| 192 | <td> |
| 193 | <select name="ariaat_aria_mappings[<?php echo esc_attr($index); ?>][attribute]"> |
| 194 | <?php foreach ($this->get_aria_attributes() as $attr => $attr_item): ?> |
| 195 | <option value="<?php echo esc_attr($attr); ?>" <?php selected($item['attribute'], $attr); ?>> |
| 196 | <?php echo esc_html($attr_item['label']); ?> |
| 197 | </option> |
| 198 | <?php endforeach; ?> |
| 199 | </select> |
| 200 | </td> |
| 201 | <td><input type="text" name="ariaat_aria_mappings[<?php echo esc_attr($index); ?>][value]" value="<?php echo esc_attr($item['value']); ?>" class="regular-text" /></td> |
| 202 | <td><button type="button" class="button remove-row">Remove</button></td> |
| 203 | </tr> |
| 204 | <?php endforeach; ?> |
| 205 | </tbody> |
| 206 | </table> |
| 207 | |
| 208 | <p><button type="button" class="button" id="add-aria-row">Add Another</button></p> |
| 209 | <?php |
| 210 | |
| 211 | |
| 212 | } elseif ($active_tab == 'roles') { |
| 213 | settings_fields('ariaat_role_group'); |
| 214 | $items = get_option('ariaat_role_mappings', []); |
| 215 | ?> |
| 216 | |
| 217 | <h3>Menu Roles</h3> |
| 218 | <p class="desc"> |
| 219 | Add a <code>role="navigation"</code> to selected menus for better screen reader support. |
| 220 | </p> |
| 221 | |
| 222 | <?php |
| 223 | $all_menus = wp_get_nav_menus(); |
| 224 | $menus = apply_filters('ariaat_allowed_menus', array_slice($all_menus, 0, 2), $all_menus); |
| 225 | $selected_roles = get_option('ariaat_role_menus', []); |
| 226 | |
| 227 | foreach ($menus as $menu) { |
| 228 | $checked = in_array($menu->term_id, $selected_roles); |
| 229 | ?> |
| 230 | <label style="display:block; margin-bottom:4px;"> |
| 231 | <input type="checkbox" name="ariaat_role_menus[]" value="<?php echo esc_attr($menu->term_id); ?>" <?php checked($checked); ?> /> |
| 232 | <?php echo esc_html($menu->name); ?> |
| 233 | </label> |
| 234 | <?php |
| 235 | } |
| 236 | ?> |
| 237 | <hr> |
| 238 | <h3>Custom Roles</h3> |
| 239 | <p class="desc"> |
| 240 | Assign ARIA roles to specific elements on your site using CSS selectors. |
| 241 | </p> |
| 242 | |
| 243 | <table class="form-table" id="role-table"> |
| 244 | <thead> |
| 245 | <tr> |
| 246 | <th>HTML Selector</th> |
| 247 | <th>Role</th> |
| 248 | <th></th> |
| 249 | </tr> |
| 250 | </thead> |
| 251 | <tbody> |
| 252 | <?php foreach ($items as $index => $item) : ?> |
| 253 | <tr> |
| 254 | <td><input type="text" name="ariaat_role_mappings[<?php echo esc_attr($index); ?>][selector]" value="<?php echo esc_attr($item['selector']); ?>" class="regular-text" /></td> |
| 255 | <td> |
| 256 | <select name="ariaat_role_mappings[<?php echo esc_attr($index); ?>][role]"> |
| 257 | <?php foreach ($this->get_role_options() as $role => $role_item): ?> |
| 258 | <option value="<?php echo esc_attr($role); ?>" <?php selected($item['role'], $role); ?>> |
| 259 | <?php echo esc_html($role_item['label']); ?> |
| 260 | </option> |
| 261 | <?php endforeach; ?> |
| 262 | </select> |
| 263 | </td> |
| 264 | <td><button type="button" class="button remove-row">Remove</button></td> |
| 265 | </tr> |
| 266 | <?php endforeach; ?> |
| 267 | </tbody> |
| 268 | </table> |
| 269 | |
| 270 | <p><button type="button" class="button" id="add-role-row">Add Another</button></p> |
| 271 | <?php |
| 272 | |
| 273 | |
| 274 | } else if( $active_tab == 'contrast' ) { |
| 275 | settings_fields('ariaat_contrast_group'); |
| 276 | $items = get_option('ariaat_contrast_mappings', []); |
| 277 | ?> |
| 278 | |
| 279 | <h3>High Contrast Adjustments</h3> |
| 280 | <p class="desc"> |
| 281 | Apply custom foreground and background colors to specific elements to improve visual contrast and accessibility. This is especially useful for meeting WCAG contrast ratio requirements and making content easier to read for users with visual impairments. |
| 282 | </p> |
| 283 | |
| 284 | <table class="form-table" id="contrast-table"> |
| 285 | <thead> |
| 286 | <tr> |
| 287 | <th>HTML Selector</th> |
| 288 | <th>Text</th> |
| 289 | <th>Background</th> |
| 290 | <th>Contrast</th> |
| 291 | <th></th> |
| 292 | </tr> |
| 293 | </thead> |
| 294 | <tbody> |
| 295 | <?php foreach ($items as $index => $item) : ?> |
| 296 | <tr> |
| 297 | <td><input type="text" name="ariaat_contrast_mappings[<?php echo esc_attr( $index ) ?>][selector]" value="<?php echo esc_attr($item['selector']) ?>" class="regular-text" /></td> |
| 298 | <td> |
| 299 | <input type="color" |
| 300 | id="text-color-picker-<?php echo esc_attr($index); ?>" |
| 301 | class="text-color" |
| 302 | data-index="<?php echo esc_attr($index); ?>" |
| 303 | value="<?php echo esc_attr($item['color']); ?>" |
| 304 | > |
| 305 | <input type="hidden" |
| 306 | name="ariaat_contrast_mappings[<?php echo esc_attr($index); ?>][color]" |
| 307 | id="real-text-color-<?php echo esc_attr($index); ?>" |
| 308 | value="<?php echo esc_attr($item['color']); ?>" |
| 309 | > |
| 310 | <button type="button" class="button clear-color" data-target="<?php echo esc_attr($index); ?>" data-type="text">Clear</button> |
| 311 | </td> |
| 312 | <td> |
| 313 | <input type="color" |
| 314 | id="bg-color-picker-<?php echo esc_attr($index); ?>" |
| 315 | class="bg-color" |
| 316 | data-index="<?php echo esc_attr($index); ?>" |
| 317 | value="<?php echo esc_attr($item['background']); ?>" |
| 318 | > |
| 319 | <input type="hidden" |
| 320 | name="ariaat_contrast_mappings[<?php echo esc_attr($index); ?>][background]" |
| 321 | id="real-bg-color-<?php echo esc_attr($index); ?>" |
| 322 | value="<?php echo esc_attr($item['background']); ?>" |
| 323 | > |
| 324 | <button type="button" class="button clear-color" data-target="<?php echo esc_attr($index); ?>" data-type="bg">Clear</button> |
| 325 | </td> |
| 326 | <td> |
| 327 | <div class="contrast-result" id="contrast-result-<?php echo esc_attr( $index ); ?>"></div> |
| 328 | </td> |
| 329 | |
| 330 | <td><button type="button" class="button remove-row">Remove</button></td> |
| 331 | </tr> |
| 332 | <?php endforeach; ?> |
| 333 | </tbody> |
| 334 | </table> |
| 335 | <p><button type="button" class="button" id="add-contrast-row">Add Another</button></p> |
| 336 | <?php |
| 337 | |
| 338 | } |
| 339 | |
| 340 | do_action( 'ariaat_before_admin_submit_button', $active_tab ); |
| 341 | |
| 342 | submit_button(); |
| 343 | ?> |
| 344 | |
| 345 | </form> |
| 346 | |
| 347 | </div> |
| 348 | |
| 349 | <div class="sidebar_cell"> |
| 350 | <?php $this->sidebar_help( $active_tab ); ?> |
| 351 | </div> |
| 352 | |
| 353 | </div> |
| 354 | |
| 355 | <?php |
| 356 | } |
| 357 | |
| 358 | |
| 359 | // sidebar |
| 360 | public function sidebar_help( $active_tab ) { |
| 361 | ?> |
| 362 | <div class="box"> |
| 363 | <h3>PRO Plugin</h3> |
| 364 | |
| 365 | <p><strong>More Features</strong></p> |
| 366 | <p> |
| 367 | The PRO plugin provides extra features: |
| 368 | </p> |
| 369 | <ul> |
| 370 | <li><span class="dashicons dashicons-saved"></span> Unlimited Menus in ARIA labels</li> |
| 371 | <li><span class="dashicons dashicons-saved"></span> Unlimited Menus in Roles</li> |
| 372 | <li><span class="dashicons dashicons-saved"></span> All ARIA attributes in dropdown</li> |
| 373 | <li><span class="dashicons dashicons-saved"></span> All Roles in dropdown</li> |
| 374 | </ul> |
| 375 | <a class="button" href="https://wcagforwp.com/downloads/pro">View PRO Plugin</a> |
| 376 | </div> |
| 377 | <?php |
| 378 | $method = 'sidebar_' . str_replace( '-', '_', $active_tab ); |
| 379 | if ( method_exists( $this, $method ) ) { |
| 380 | $this->$method( $active_tab ); |
| 381 | } else { |
| 382 | $this->sidebar_general( $active_tab ); |
| 383 | } |
| 384 | } |
| 385 | |
| 386 | |
| 387 | // sidebar |
| 388 | public function sidebar_general() { |
| 389 | |
| 390 | ?> |
| 391 | <div class="box"> |
| 392 | <h3>Help</h3> |
| 393 | |
| 394 | <p><strong>Language</strong></p> |
| 395 | <p> |
| 396 | This sets the default <code>lang</code> attribute in your site’s HTML. It helps screen readers and search engines understand what language your site is written in. |
| 397 | <br>For example, use <code>en</code> for English, <code>en-AU</code> for Australian English, <code>fr</code> for French, etc. |
| 398 | <br><strong>Tip:</strong> This should match the main language used across your website. |
| 399 | </p> |
| 400 | |
| 401 | <p><strong>Skip Link Target</strong></p> |
| 402 | <p> |
| 403 | Adds a “Skip to content” link at the very top of your site. This improves accessibility for keyboard and screen reader users by letting them jump straight to the main content. |
| 404 | <br>Enter a CSS selector that matches your main content area, like <code>#primary</code> or <code>.site-main</code>. This should point to the container that wraps your main article or page content. |
| 405 | <br><strong>Tip:</strong> You can inspect your site using right-click → “Inspect” to find the correct ID or class. |
| 406 | </p> |
| 407 | |
| 408 | <p><strong>Focus Outline</strong></p> |
| 409 | <p> |
| 410 | Ensures that keyboard users can clearly see which element is currently focused - like buttons, links, or form fields. Some themes hide this outline by default, which can make navigation difficult. |
| 411 | <br>This setting forces the outline to remain visible for better usability and compliance with WCAG. |
| 412 | </p> |
| 413 | </div> |
| 414 | |
| 415 | |
| 416 | |
| 417 | <?php |
| 418 | } |
| 419 | |
| 420 | |
| 421 | // sidebar |
| 422 | public function sidebar_aria() { |
| 423 | |
| 424 | ?> |
| 425 | <div class="box"> |
| 426 | <h3>Menu ARIA Labels</h3> |
| 427 | |
| 428 | <p><strong>What it does</strong><br> |
| 429 | Adds <code>aria-label</code> attributes to links in the menu when the <code>title</code> is different from the visible text.</p> |
| 430 | |
| 431 | <p><strong>Why it matters</strong><br> |
| 432 | This helps screen readers provide more context. <code>title</code> attributes are not reliably announced by screen readers. Using <code>aria-label</code> improves accessibility and clarity.</p> |
| 433 | |
| 434 | <p><strong>When to use</strong><br> |
| 435 | Ideal when your menu link text is short (e.g. “Home”) but you’ve added a longer title like “Go to homepage” in the Menu editor.</p> |
| 436 | |
| 437 | <p><strong>Example</strong><br> |
| 438 | If a link shows “About” and the title is “Learn more about our company”, this becomes:<br> |
| 439 | <code><a href="/about" aria-label="Learn more about our company">About</a></code></p> |
| 440 | |
| 441 | <p><strong>Where to set titles</strong><br> |
| 442 | Add title attributes <a target="_blank" href="<?php echo esc_url( admin_url('/nav-menus.php') );?>">here</a> or go to <strong>Appearance → Menus</strong>. Open any menu item and use the “Title Attribute” field. Enable it via “Screen Options” if it’s hidden. </p> |
| 443 | |
| 444 | <p><strong>Limitations</strong><br> |
| 445 | Only applies when the <code>title</code> and link text differ. If no <code>title</code> exists, nothing will be added.</p> |
| 446 | </div> |
| 447 | |
| 448 | <div class="box"> |
| 449 | <h3>Custom ARIA Attributes</h3> |
| 450 | <p><strong>HTML Selector</strong></p> |
| 451 | <p> |
| 452 | The HTML selector is the item that you wish to target. For example, to add an aria-label attribute to the |
| 453 | <code><?php echo esc_attr( htmlentities('<div class="header"></div>') ); ?></code> on your site, you would set the HTML selector to |
| 454 | <code>.header</code>. |
| 455 | </p> |
| 456 | |
| 457 | <p><strong>ARIA Attribute</strong></p> |
| 458 | <p> |
| 459 | Choose which ARIA attribute you want to apply, such as <code>aria-label</code> or <code>aria-hidden</code>. |
| 460 | These attributes help assistive technologies better understand the purpose of elements on your site. |
| 461 | <br><a href="https://www.w3.org/WAI/ARIA/apg/practices/" target="_blank">View ARIA Authoring Practices</a> |
| 462 | </p> |
| 463 | |
| 464 | <p><strong>Value</strong></p> |
| 465 | <p> |
| 466 | The value is what will be inserted into the ARIA attribute. For example, if you’re using <code>aria-label</code>, |
| 467 | you might enter <code>Main Navigation</code> to describe the element’s purpose. |
| 468 | </p> |
| 469 | |
| 470 | |
| 471 | </div> |
| 472 | |
| 473 | |
| 474 | <?php |
| 475 | } |
| 476 | |
| 477 | // sidebar |
| 478 | public function sidebar_roles() { |
| 479 | ?> |
| 480 | <div class="box"> |
| 481 | <h3>Menu Roles</h3> |
| 482 | |
| 483 | <p><strong>What it does</strong><br> |
| 484 | Adds a <code>role="navigation"</code> to selected menus to help screen readers identify them as navigation areas.</p> |
| 485 | |
| 486 | <p><strong>Why it matters</strong><br> |
| 487 | Not all themes include ARIA roles by default. This role improves accessibility by signaling the purpose of the menu structure.</p> |
| 488 | |
| 489 | <p><strong>When to use</strong><br> |
| 490 | Use this when your theme’s menu is missing a semantic container (like a <code><nav></code> tag) or lacks a <code>role</code> attribute.</p> |
| 491 | |
| 492 | <p><strong>Best practice</strong><br> |
| 493 | ARIA roles should only be added when the HTML is not already semantic. For example, use <code>role="navigation"</code> on a <code><div></code> - but not on a <code><nav></code> unless it’s missing the role.</p> |
| 494 | |
| 495 | <p><strong>Limitations</strong><br> |
| 496 | This only applies to menus created using WordPress’s <code>wp_nav_menu()</code>. It cannot modify HTML added manually by your theme.</p> |
| 497 | </div> |
| 498 | |
| 499 | <div class="box"> |
| 500 | <h3>Custom Roles</h3> |
| 501 | |
| 502 | <p><strong>What it does</strong><br> |
| 503 | Lets you assign ARIA roles (like <code>main</code>, <code>banner</code>, or <code>search</code>) to specific elements using CSS selectors.</p> |
| 504 | |
| 505 | <p><strong>When to use</strong><br> |
| 506 | Useful for marking important sections of your site when semantic elements like <code><main></code>, <code><header></code>, or <code><aside></code> are not being used. Avoid using roles redundantly on elements that are already semantic.</p> |
| 507 | |
| 508 | <p><strong>HTML Selector</strong><br> |
| 509 | Target the element you want to apply a role to - for example: <code>.sidebar</code> or <code>#main-content</code>.</p> |
| 510 | |
| 511 | <p><strong>Role</strong><br> |
| 512 | Choose the appropriate role based on the element’s purpose. For example, use <code>main</code> for primary content, or <code>complementary</code> for sidebars. |
| 513 | <br><a href="https://www.w3.org/WAI/ARIA/apg/roles/" target="_blank">View all landmark roles</a></p> |
| 514 | </div> |
| 515 | <?php |
| 516 | } |
| 517 | |
| 518 | public function sidebar_contrast() { |
| 519 | ?> |
| 520 | <div class="box"> |
| 521 | <h3>High Contrast Adjustments</h3> |
| 522 | |
| 523 | <p><strong>What it does</strong><br> |
| 524 | Allows you to manually set text and background colors on specific elements to improve readability and meet WCAG contrast requirements.</p> |
| 525 | |
| 526 | <p><strong>Why it matters</strong><br> |
| 527 | Insufficient contrast is one of the most common accessibility issues. Low contrast can make text unreadable for users with vision impairments, especially in bright or dim environments.</p> |
| 528 | |
| 529 | <p><strong>When to use</strong><br> |
| 530 | Use this when you have areas on your site with poor contrast (e.g. light gray text on a white background). This feature is ideal for fixing contrast issues without editing your theme's CSS directly.</p> |
| 531 | |
| 532 | <p><strong>HTML Selector</strong><br> |
| 533 | The selector is the element you want to target. For example, to apply contrast to:<br> |
| 534 | <code><?php echo esc_html('<div class="content-box">...</div>'); ?></code><br> |
| 535 | use the selector <code>.content-box</code>.</p> |
| 536 | |
| 537 | <p><strong>Text & Background Colors</strong><br> |
| 538 | Choose a readable foreground (text) and background color. The tool will calculate the contrast ratio and tell you if it passes WCAG AA or AAA standards.</p> |
| 539 | |
| 540 | <p><strong>Limitations</strong><br> |
| 541 | This is best used for specific tweaks - not full theme styling.</p> |
| 542 | |
| 543 | <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" target="_blank">Learn more about color contrast requirements</a></p> |
| 544 | </div> |
| 545 | <?php |
| 546 | } |
| 547 | |
| 548 | |
| 549 | private function get_aria_attributes() { |
| 550 | $attributes = [ |
| 551 | 'aria-describedby' => ['label' => 'aria-describedby'], |
| 552 | 'aria-disabled' => ['label' => 'aria-disabled'], |
| 553 | 'aria-expanded' => ['label' => 'aria-expanded'], |
| 554 | 'aria-hidden' => ['label' => 'aria-hidden'], |
| 555 | 'aria-label' => ['label' => 'aria-label'], |
| 556 | 'aria-labelledby' => ['label' => 'aria-labelledby'], |
| 557 | ]; |
| 558 | |
| 559 | /** |
| 560 | * Filter the list of ARIA attributes available in the plugin. |
| 561 | * |
| 562 | * @param array $attributes The default set of ARIA attributes. |
| 563 | */ |
| 564 | return apply_filters('ariaat_aria_attributes_options', $attributes); |
| 565 | } |
| 566 | |
| 567 | |
| 568 | private function get_role_options() { |
| 569 | $roles = [ |
| 570 | 'banner' => ['label' => 'banner'], |
| 571 | 'button' => ['label' => 'button'], |
| 572 | 'checkbox' => ['label' => 'checkbox'], |
| 573 | 'complementary' => ['label' => 'complementary'], |
| 574 | 'contentinfo' => ['label' => 'contentinfo'], |
| 575 | 'form' => ['label' => 'form'], |
| 576 | 'grid' => ['label' => 'grid'], |
| 577 | 'heading' => ['label' => 'heading'], |
| 578 | 'img' => ['label' => 'img'], |
| 579 | 'link' => ['label' => 'link'], |
| 580 | 'list' => ['label' => 'list'], |
| 581 | 'listitem' => ['label' => 'listitem'], |
| 582 | 'main' => ['label' => 'main'], |
| 583 | 'navigation' => ['label' => 'navigation'], |
| 584 | 'region' => ['label' => 'region'], |
| 585 | 'row' => ['label' => 'row'], |
| 586 | 'rowheader' => ['label' => 'rowheader'], |
| 587 | 'search' => ['label' => 'search'], |
| 588 | 'table' => ['label' => 'table'], |
| 589 | 'textbox' => ['label' => 'textbox'], |
| 590 | ]; |
| 591 | |
| 592 | /** |
| 593 | * Filter the list of available roles. |
| 594 | * |
| 595 | * @param array $roles Array of role definitions. |
| 596 | */ |
| 597 | return apply_filters('ariaat_roles_options', $roles); |
| 598 | } |
| 599 | |
| 600 | |
| 601 | public function sanitize_array($input) { |
| 602 | if (!is_array($input)) { |
| 603 | return sanitize_text_field($input); |
| 604 | } |
| 605 | |
| 606 | foreach ($input as $key => $item) { |
| 607 | if (is_array($item)) { |
| 608 | foreach ($item as $subkey => $value) { |
| 609 | // Sanitize based on known keys |
| 610 | if (in_array($subkey, ['selector'], true)) { |
| 611 | // Allow basic CSS selectors: letters, numbers, dashes, underscores, dots, #, >, space, : |
| 612 | $input[$key][$subkey] = preg_replace('/[^a-zA-Z0-9\s\.\#\>\:\[\]\=\"~\+\-\*(),]/', '', $value); |
| 613 | } elseif (in_array($subkey, ['attribute', 'role'], true)) { |
| 614 | // Whitelist attribute/role names to be alphanumeric with optional dashes |
| 615 | $input[$key][$subkey] = preg_replace('/[^a-zA-Z0-9\-_]/', '', $value); |
| 616 | } else { |
| 617 | $input[$key][$subkey] = sanitize_text_field($value); |
| 618 | } |
| 619 | } |
| 620 | } else { |
| 621 | $input[$key] = sanitize_text_field($item); |
| 622 | } |
| 623 | } |
| 624 | |
| 625 | return $input; |
| 626 | } |
| 627 | |
| 628 | |
| 629 | |
| 630 | public function sanitize_menu_selection($input) { |
| 631 | $allowed_menus = array_keys($this->get_all_menus()); |
| 632 | |
| 633 | if( ! $input || ! array( $allowed_menus ) || ! array( $input ) ) |
| 634 | return; |
| 635 | $selected = array_intersect($input, $allowed_menus); |
| 636 | |
| 637 | return $selected; |
| 638 | } |
| 639 | |
| 640 | public function sanitize_general_settings($input) { |
| 641 | |
| 642 | $output = []; |
| 643 | |
| 644 | // Language setting |
| 645 | $output['language'] = isset($input['language']) ? sanitize_text_field($input['language']) : ''; |
| 646 | |
| 647 | $output['skip_link'] = isset($input['skip_link']) ? sanitize_text_field($input['skip_link']) : ''; |
| 648 | |
| 649 | $output['enable_frontend_checker'] = isset($input['enable_frontend_checker']) ? '1' : ''; |
| 650 | $output['focus_outline'] = isset($input['focus_outline']) ? '1' : ''; |
| 651 | $output['alt_text_inserter'] = isset($input['alt_text_inserter']) ? '1' : ''; |
| 652 | |
| 653 | return $output; |
| 654 | |
| 655 | } |
| 656 | |
| 657 | |
| 658 | } |
| 659 | |
| 660 | // Initialize the class |
| 661 | new ARIAAT_Admin(); |
| 662 |