Add CSS outline for keyboard accessibility (#50794)

* Add CSS outline for keyboard accessibility

* Changelog
This commit is contained in:
Ilyas Foo 2024-08-21 18:47:33 +08:00 committed by GitHub
parent e45b59b71f
commit 20a6327637
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 12 additions and 2 deletions

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Add CSS outline for site visibility badge keyboard accessibility

View File

@ -72,16 +72,22 @@ class ComingSoonAdminBarBadge {
border-radius: 2px;
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item:hover {
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item:hover,
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item:focus {
background-color: #DCDCDE;
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge a.ab-item:focus {
outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color-darker-20);
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item {
background-color: #E6F2E8;
color: #00450C;
}
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item:hover {
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item:hover,
#wpadminbar .quicklinks #wp-admin-bar-woocommerce-site-visibility-badge.woocommerce-site-status-badge-live a.ab-item:focus {
background-color: #B8E6BF;
}
</style>';