diff --git a/assets/js/components/dialog.js b/assets/js/components/dialog.js index be7345453ce..eb6a616e333 100644 --- a/assets/js/components/dialog.js +++ b/assets/js/components/dialog.js @@ -28,6 +28,7 @@ import FocusTrap from 'focus-trap-react'; /** * WordPress dependencies */ +import { withInstanceId } from '@wordpress/compose'; import { Component, createRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -61,16 +62,20 @@ class Dialog extends Component { subtitle, confirmButton, dependentModules, + instanceId, } = this.props; + const labelledByID = `googlesitekit-dialog-label-${ instanceId }`; + const describedByID = `googlesitekit-dialog-description-${ instanceId }`; + return (
@@ -80,7 +85,7 @@ class Dialog extends Component {
{ title && -

+

{ title }

} @@ -89,15 +94,17 @@ class Dialog extends Component { { subtitle }

} -
-
    - { provides && provides.map( ( attribute ) => ( -
  • - { attribute } -
  • - ) ) } -
-
+ { ( provides && provides.length ) && +
+
    + { provides.map( ( attribute ) => ( +
  • + { attribute } +
  • + ) ) } +
+
+ } { dependentModules &&

{ __( 'Note: ', 'google-site-kit' ) }{ dependentModules } @@ -140,4 +147,4 @@ Dialog.defaultProps = { confirmButton: null, }; -export default Dialog; +export default withInstanceId( Dialog );