From 20a6327637455152b4ed562b4e233a3ce24a47f8 Mon Sep 17 00:00:00 2001 From: Ilyas Foo Date: Wed, 21 Aug 2024 18:47:33 +0800 Subject: [PATCH] Add CSS outline for keyboard accessibility (#50794) * Add CSS outline for keyboard accessibility * Changelog --- ...-50787-site-visibility-badge-keyboard-accessibility | 4 ++++ .../Internal/ComingSoon/ComingSoonAdminBarBadge.php | 10 ++++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 plugins/woocommerce/changelog/fix-50787-site-visibility-badge-keyboard-accessibility diff --git a/plugins/woocommerce/changelog/fix-50787-site-visibility-badge-keyboard-accessibility b/plugins/woocommerce/changelog/fix-50787-site-visibility-badge-keyboard-accessibility new file mode 100644 index 00000000000..08a0bda0e3f --- /dev/null +++ b/plugins/woocommerce/changelog/fix-50787-site-visibility-badge-keyboard-accessibility @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Add CSS outline for site visibility badge keyboard accessibility diff --git a/plugins/woocommerce/src/Internal/ComingSoon/ComingSoonAdminBarBadge.php b/plugins/woocommerce/src/Internal/ComingSoon/ComingSoonAdminBarBadge.php index 4ce688775a3..84f86f348d9 100644 --- a/plugins/woocommerce/src/Internal/ComingSoon/ComingSoonAdminBarBadge.php +++ b/plugins/woocommerce/src/Internal/ComingSoon/ComingSoonAdminBarBadge.php @@ -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; } ';