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

👁️‍🗨️ 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

22
modules/ppcp-settings/resources/js/Components/ReusableComponents/SpinnerOverlay.js
View file

@ -2,20 +2,24 @@ import { __ } from '@wordpress/i18n';
import { Spinner } from '@wordpress/components';
import classnames from 'classnames';
const SpinnerOverlay = ( { asModal = false, message = null } ) => {
/**
* Renders a loading spinner.
*
* @param {Object} props Component properties.
* @param {boolean} [props.asModal=false] Whether to display the spinner as a modal overlay.
* @param {string} [props.ariaLabel] Accessible label for screen readers.
* @return {JSX.Element} The spinner overlay component.
*/
const SpinnerOverlay = ( {
asModal = false,
ariaLabel = __( 'Loading…', 'woocommerce-paypal-payments' ),
} ) => {
const className = classnames( 'ppcp-r-spinner-overlay', {
'ppcp--is-modal': asModal,
} );
if ( null === message ) {
message = __( 'Loading…', 'woocommerce-paypal-payments' );
}
return (
<div className={ className }>
{ message && (
<span className="ppcp--spinner-message">{ message }</span>
) }
<div className={ className } role="status" aria-label={ ariaLabel }>
<Spinner />
</div>
);