diff --git a/packages/a11y/src/script/add-container.js b/packages/a11y/src/script/add-container.js index 122adeaf8a15da..c40478e18873d4 100644 --- a/packages/a11y/src/script/add-container.js +++ b/packages/a11y/src/script/add-container.js @@ -10,20 +10,19 @@ export default function addContainer( ariaLive = 'polite' ) { container.id = `a11y-speak-${ ariaLive }`; container.className = 'a11y-speak-region'; - container.setAttribute( - 'style', - 'position: absolute;' + - 'margin: -1px;' + - 'padding: 0;' + - 'height: 1px;' + - 'width: 1px;' + - 'overflow: hidden;' + - 'clip: rect(1px, 1px, 1px, 1px);' + - '-webkit-clip-path: inset(50%);' + - 'clip-path: inset(50%);' + - 'border: 0;' + - 'word-wrap: normal !important;' - ); + Object.assign( container.style, { + position: 'absolute', + margin: '-1px', + padding: '0', + height: '1px', + width: '1px', + overflow: 'hidden', + clip: 'rect(1px, 1px, 1px, 1px)', + webkitClipPath: 'inset(50%)', + clipPath: 'inset(50%)', + border: '0', + wordWrap: 'normal', + } ); container.setAttribute( 'aria-live', ariaLive ); container.setAttribute( 'aria-relevant', 'additions text' ); container.setAttribute( 'aria-atomic', 'true' ); diff --git a/packages/a11y/src/script/add-intro-text.ts b/packages/a11y/src/script/add-intro-text.ts index 2bcf453ec44c8e..648e610e13f4f3 100644 --- a/packages/a11y/src/script/add-intro-text.ts +++ b/packages/a11y/src/script/add-intro-text.ts @@ -18,20 +18,19 @@ export default function addIntroText() { introText.className = 'a11y-speak-intro-text'; introText.textContent = __( 'Notifications' ); - introText.setAttribute( - 'style', - 'position: absolute;' + - 'margin: -1px;' + - 'padding: 0;' + - 'height: 1px;' + - 'width: 1px;' + - 'overflow: hidden;' + - 'clip: rect(1px, 1px, 1px, 1px);' + - '-webkit-clip-path: inset(50%);' + - 'clip-path: inset(50%);' + - 'border: 0;' + - 'word-wrap: normal !important;' - ); + Object.assign( introText.style, { + position: 'absolute', + margin: '-1px', + padding: '0', + height: '1px', + width: '1px', + overflow: 'hidden', + clip: 'rect(1px, 1px, 1px, 1px)', + webkitClipPath: 'inset(50%)', + clipPath: 'inset(50%)', + border: '0', + wordWrap: 'normal', + } ); introText.setAttribute( 'hidden', 'hidden' ); const { body } = document;