woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-07 19:54:15 +08:00
Code Issues Projects Packages Wiki Activity Actions

Merge pull request #3294 from woocommerce/PCP-4277-conduct-an-accessibility-audit-and-compile-a-list-of-tasks-to-improve-the-accessibility-of-the-new-ui

Browse source 
Enhance the accessibility of the new Settings UI (4277)
This commit is contained in:
Emili Castells 2025-04-16 09:14:13 +02:00 • committed by GitHub
commit a362780c8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 268 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

13
modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
View file

@ -31,10 +31,15 @@ const PaymentMethodItemBlock = ( {
id={ paymentMethod.id }
className={ methodItemClasses }
separatorAndGap={ false }
aria-disabled={ isDisabled ? 'true' : 'false' }
>
{ isDisabled && (
<div className="ppcp--method-disabled-overlay">
<p className="ppcp--method-disabled-message">
<div
className="ppcp--method-disabled-overlay"
role="alert"
aria-live="polite"
>
<p className="ppcp--method-disabled-message" tabIndex="0">
{ disabledMessage }
</p>
</div>
@ -60,6 +65,8 @@ const PaymentMethodItemBlock = ( {
__nextHasNoMarginBottom
checked={ isSelected }
onChange={ onSelect }
disabled={ isDisabled }
aria-label={ `Enable ${ paymentMethod.itemTitle }` }
/>
{ hasWarning && ! isDisabled && isSelected && (
<WarningMessages
@ -70,7 +77,9 @@ const PaymentMethodItemBlock = ( {
{ paymentMethod?.fields && onTriggerModal && (
<Button
className="ppcp--method-settings"
disabled={ isDisabled }
onClick={ onTriggerModal }
aria-label={ `Configure ${ paymentMethod.itemTitle } settings` }
>
<Icon icon={ cog } />
</Button>