-
Notifications
You must be signed in to change notification settings - Fork 37
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ADA compliance #320
base: main
Are you sure you want to change the base?
ADA compliance #320
Conversation
add hidden span elements to nav buttons for ADA compliance
change TH tags surrounding nav buttons to TD tags and add hidden span elements for ADA compliance
@syntax53 would you be open to check if it works with the latest WP and PHP since this is a very old PR? |
<th class="simcal-nav simcal-prev-wrapper" colspan="<?php echo apply_filters( 'simcal_prev_cols', '1' ); ?>"> | ||
<button class="simcal-nav-button simcal-month-nav simcal-prev" title="<?php _e( 'Previous Month', 'google-calendar-events' ); ?>"><i class="simcal-icon-left"></i></button> | ||
</th> | ||
<td class="simcal-nav simcal-prev-wrapper" colspan="<?php echo apply_filters( 'simcal_prev_cols', '1' ); ?>"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interested to know why this changed from th
to td
?
<button class="simcal-nav-button simcal-month-nav simcal-prev" title="<?php _e( 'Previous Month', 'google-calendar-events' ); ?>"><i class="simcal-icon-left"></i></button> | ||
</th> | ||
<td class="simcal-nav simcal-prev-wrapper" colspan="<?php echo apply_filters( 'simcal_prev_cols', '1' ); ?>"> | ||
<button class="simcal-nav-button simcal-month-nav simcal-prev" title="<?php _e( 'Previous Month', 'google-calendar-events' ); ?>"><i class="simcal-icon-left"></i><span style="display:none;"><?php _e( 'Previous Month', 'google-calendar-events' ); ?></span></button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we use ARIA
instead of adding a hidden text?
@@ -204,6 +204,7 @@ public function html() { | |||
echo "\t" . '<div class="simcal-nav">' . "\n"; | |||
echo "\t\t" . '<button class="simcal-nav-button simcal-prev" title="' . __('Previous', 'google-calendar-events') . '"' . $disabled . '>' . "\n"; | |||
echo "\t\t\t" . '<i class="simcal-icon-left"></i>' . "\n"; | |||
echo "\t\t\t" . '<span style="display:none;">' . __('Previous', 'google-calendar-events') . '</span>' . "\n"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here, can we can use ARIA
in the above line?
There are issues with the NAV buttons and satisfying ADA compliance for web sites -- http://wave.webaim.org . These changes satisfy the checker.