refactor(docs-infra): simplify/improve `CopierService` hidden textarea creation (#38244)

This commit simplifies the creation of the temporary, hidden
`<textarea>` element used by `CopierService` by switching from absolute
to fixed positioning and not requiring page's scroll offset.

It also makes the following minor improvements:
- Make the element invisible (via `opacity: 0`).
- Instruct screen-readers to ignore the element (via
  `aria-hidden: true`).

NOTE: These improvements are based on Angular CDK's [PendingCopy][1]
      class and the changes proposed in PR angular/components#20073.

[1]: https://github.com/angular/components/blob/89b5fa89d1437c3054c5/src/cdk/clipboard/pending-copy.ts

PR Close #38244
This commit is contained in:
George Kalpakas 2020-07-29 17:38:12 +03:00 committed by Misko Hevery
parent d96824acdb
commit b280d54470
1 changed files with 6 additions and 7 deletions

View File

@ -59,14 +59,13 @@ export class CopierService {
style.padding = '0';
style.margin = '0';
// Move element out of screen horizontally.
style.position = 'absolute';
style[ isRTL ? 'right' : 'left' ] = '-9999px';
// Move element to the same position vertically.
const yPosition = window.pageYOffset || docElem.scrollTop;
style.top = yPosition + 'px';
// Make the element invisible and move it out of screen horizontally.
style.opacity = '0';
style.position = 'fixed';
style.top = '0';
style[isRTL ? 'right' : 'left'] = '-999em';
textArea.setAttribute('aria-hidden', 'true');
textArea.setAttribute('readonly', '');
textArea.value = text;