woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

👁️‍🗨️ Enhance the accessibility of the new Settings UI

Browse source
This commit is contained in:
Daniel Dudzic 2025-04-01 16:10:32 +02:00
parent 244de6050b
commit bf2346d33d
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
14 changed files with 268 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

21
modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
View file

@ -70,6 +70,15 @@ button.components-button, a.components-button {
--button-disabled-color: #{$color-gray-100};
--button-disabled-background: #{$color-gray-500};
&:hover:not(:disabled) {
background: #{$color-blue};
}
&:not(.components-tab-panel__tabs-item):focus-visible:not(:disabled) {
outline: 2px solid #{$color-gray-500};
}
}
&.is-secondary {
@ -86,7 +95,7 @@ button.components-button, a.components-button {
--button-color: #{$color-blueberry};
--button-hover-color: #{$color-gradient-dark};
&:focus:not(:disabled) {
&:focus-visible:not(:disabled) {
border: none;
box-shadow: none;
}
@ -95,6 +104,16 @@ button.components-button, a.components-button {
&.small-button {
@include small-button;
}
&:focus:not(:disabled) {
outline: none;
}
&:focus-visible:not(:disabled),
&:not(.components-tab-panel__tabs-item):focus-visible:not(:disabled)
&[data-focus-visible="true"] {
outline: 2px solid #{$color-blueberry};
}
}
.ppcp--is-loading {

76
modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss
View file

@ -111,12 +111,7 @@
margin: 0;
}
}
// Custom styles.
.components-form-toggle.is-checked > .components-form-toggle__track {
background-color: $color-blueberry;
}
.ppcp-r-vertical-text-control {
.components-base-control__field {
display: flex;
@ -126,3 +121,74 @@
}
}
}
.ppcp-r-app, .ppcp-r-modal__container {
// Form toggle styling.
.components-form-toggle {
&.is-checked {
> .components-form-toggle__track {
background-color: $color-blueberry;
}
.components-form-toggle__track {
border-color: $color-blueberry;
}
}
.components-form-toggle__input {
&:focus {
+ .components-form-toggle__track {
box-shadow: none;
}
}
&:focus-visible + .components-form-toggle__track {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff,
0 0 0 calc(var(--wp-admin-border-width-focus)*2) $color-blueberry;
}
}
}
// Form inputs.
.components-text-control__input {
&:focus,
&[type="color"]:focus,
&[type="date"]:focus,
&[type="datetime-local"]:focus,
&[type="datetime"]:focus,
&[type="email"]:focus,
&[type="month"]:focus,
&[type="number"]:focus,
&[type="password"]:focus,
&[type="tel"]:focus,
&[type="text"]:focus,
&[type="time"]:focus,
&[type="url"]:focus,
&[type="week"]:focus {
border-color: $color-blueberry;
}
}
// Radio inputs.
.components-radio-control__input[type="radio"] {
&:checked {
background-color: $color-blueberry;
border-color: $color-blueberry;
}
&:focus {
box-shadow: none;
}
&:focus-visible {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff,
0 0 0 calc(var(--wp-admin-border-width-focus)*2) $color-blueberry;
}
}
// Checkbox inputs.
.components-checkbox-control__input[type="checkbox"] {
&:focus {
box-shadow: none;
}
&:focus-visible {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff,
0 0 0 calc(var(--wp-admin-border-width-focus)*2) $color-blueberry;
}
}
}

5
modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
View file

@ -103,6 +103,11 @@ $margin_bottom: 48px;
.components-tab-panel__tabs-item {
height: var(--subnavigation-height);
&:focus-visible:not(:disabled),
&[data-focus-visible="true"]:focus:not(:disabled) {
outline: none;
}
}
}