fix: add dialog semantics and accessible close button to update source modal (#58)
Addresses PR #18 review feedback (issue #22): - Add role="dialog", aria-modal="true", aria-labelledby to modal container - Add tabindex="-1" to make modal keyboard-focusable - Add unique id to <h2> heading for aria-labelledby reference - Replace <span class="wpst-modal-close"> with <button type="button"> and aria-label Fixes #22
This commit is contained in:
@@ -12,11 +12,22 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||||||
?>
|
?>
|
||||||
|
|
||||||
<!-- Update Source Modal -->
|
<!-- Update Source Modal -->
|
||||||
<div id="wpst-update-source-modal" class="wpst-modal" role="dialog" aria-modal="true" aria-labelledby="wpst-modal-title">
|
<div
|
||||||
|
id="wpst-update-source-modal"
|
||||||
|
class="wpst-modal"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="wpst-update-source-modal-title"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
<div class="wpst-modal-content">
|
<div class="wpst-modal-content">
|
||||||
<div class="wpst-modal-header">
|
<div class="wpst-modal-header">
|
||||||
<h2 id="wpst-modal-title" class="wpst-modal-title"><?php esc_html_e( 'Select Update Source', 'wp-plugin-starter-template' ); ?></h2>
|
<h2 id="wpst-update-source-modal-title" class="wpst-modal-title"><?php esc_html_e( 'Select Update Source', 'wp-plugin-starter-template' ); ?></h2>
|
||||||
<button type="button" class="wpst-modal-close" aria-label="<?php esc_attr_e( 'Close', 'wp-plugin-starter-template' ); ?>">×</button>
|
<button
|
||||||
|
type="button"
|
||||||
|
class="wpst-modal-close"
|
||||||
|
aria-label="<?php esc_attr_e( 'Close dialog', 'wp-plugin-starter-template' ); ?>"
|
||||||
|
>×</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="wpst-modal-body">
|
<div class="wpst-modal-body">
|
||||||
|
|||||||
Reference in New Issue
Block a user