From b052ef5f1e4f6e4e8f2ca5330e4c421572028425 Mon Sep 17 00:00:00 2001
From: Georgios Kalpakas <kalpakas.g@gmail.com>
Date: Wed, 28 Jun 2017 15:04:57 +0300
Subject: [PATCH] fix(aio): do not include hidden content in window title

The window title is derived based on the current document's `<h1>` heading. Such
headings may contain hidden/non-visible content (e.g. textual name of font
ligatures: `<i class="material-icons">link</i>`) that should not be included in
the title.

This commit fixes this by using `innerText` (instead of `textContent`) to
extract the visible text from the `<h1>` heading. It will still fall back to
`textContent` on browsers that do not support `innerText` (e.g. Firefox 44).

Fixes #17732
---
 .../doc-viewer/doc-viewer.component.spec.ts   | 22 +++++++++++++++++++
 .../layout/doc-viewer/doc-viewer.component.ts |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
index 4eebd55059..8ffcbda681 100644
--- a/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.spec.ts
@@ -342,6 +342,28 @@ describe('DocViewerComponent', () => {
       fixture.detectChanges();
       expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
     });
+
+    it('should not include hidden content of the <h1> in the title', () => {
+      setCurrentDoc('<h1><i style="visibility: hidden">link</i>Features</h1>Some content');
+      fixture.detectChanges();
+      expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Features');
+    });
+
+    it('should fall back to `textContent` if `innerText` is not available', () => {
+      const querySelector_ = docViewerEl.querySelector;
+      spyOn(docViewerEl, 'querySelector').and.callFake((selector: string) => {
+        const elem = querySelector_.call(docViewerEl, selector);
+        Object.defineProperties(elem, {
+          innerText: { value: undefined },
+          textContent: { value: 'Text Content' }
+        });
+        return elem;
+      });
+
+      setCurrentDoc('<h1><i style="visibility: hidden">link</i>Features</h1>Some content');
+      fixture.detectChanges();
+      expect(titleService.setTitle).toHaveBeenCalledWith('Angular - Text Content');
+    });
   });
 
   describe('TOC', () => {
diff --git a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
index 39678cbd0f..50687406a4 100644
--- a/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
+++ b/aio/src/app/layout/doc-viewer/doc-viewer.component.ts
@@ -97,7 +97,7 @@ export class DocViewerComponent implements DoCheck, OnDestroy {
     // Only create TOC for docs with an <h1> title
     // If you don't want a TOC, add "no-toc" class to <h1>
     if (titleEl) {
-      title = titleEl.textContent.trim();
+      title = (titleEl.innerText || titleEl.textContent).trim();
       if (!/(no-toc|notoc)/i.test(titleEl.className)) {
         this.tocService.genToc(this.hostElement, docId);
         titleEl.insertAdjacentHTML('afterend', '<aio-toc class="embedded"></aio-toc>');