feat: improve filter form styling and accessibility

Enhanced the filter form for publication status by adding Bootstrap classes for better styling and layout, including a button for clarity. Increased the form's accessibility by adding labels and ARIA attributes, improving the user experience for all visitors.
This commit is contained in:
Kumi 2024-06-20 11:39:54 +02:00
parent 747e313060
commit d9bd687c7a
Signed by: kumi
GPG key ID: ECBCC9082395383F

View file

@ -5,20 +5,24 @@
<h1 class="display-4 text-center">Articles</h1>
<div class="row mb-4">
<div class="col-md-12">
<form method="GET" action="">
<select name="publication_status" onchange="this.form.submit()">
<option value=""><?php _e('All Statuses', 'duck-behavior-journal'); ?></option>
<?php
$terms = get_terms(array(
'taxonomy' => 'publication_status',
'hide_empty' => false,
));
foreach ($terms as $term) {
$selected = (isset($_GET['publication_status']) && $_GET['publication_status'] == $term->slug) ? 'selected' : '';
echo '<option value="' . esc_attr($term->slug) . '" ' . $selected . '>' . esc_html($term->name) . '</option>';
}
?>
</select>
<form method="GET" action="" class="form-inline justify-content-center">
<div class="form-group mx-sm-3 mb-2">
<label for="publication_status" class="sr-only"><?php _e('Publication Status', 'duck-behavior-journal'); ?></label>
<select name="publication_status" id="publication_status" class="form-control" onchange="this.form.submit()">
<option value=""><?php _e('All Statuses', 'duck-behavior-journal'); ?></option>
<?php
$terms = get_terms(array(
'taxonomy' => 'publication_status',
'hide_empty' => false,
));
foreach ($terms as $term) {
$selected = (isset($_GET['publication_status']) && $_GET['publication_status'] == $term->slug) ? 'selected' : '';
echo '<option value="' . esc_attr($term->slug) . '" ' . $selected . '>' . esc_html($term->name) . '</option>';
}
?>
</select>
</div>
<button type="submit" class="btn btn-primary mb-2"><?php _e('Filter', 'duck-behavior-journal'); ?></button>
</form>
</div>
</div>