refactor(material-experimental/mdc-progress-bar): remove wrapper element for progress bar (#22441)

* refactor(material-experimental/mdc-progress-bar): remove wrapper element for progress bar

* fixup! refactor(material-experimental/mdc-progress-bar): remove wrapper element for progress bar

* fix(material-experimental/mdc-progress-bar): add more specific selectors to disable animations in noop animation mode

Author: annieyw

src/material-experimental/mdc-progress-bar/progress-bar.html

@@ -2,15 +2,13 @@
   All children need to be hidden for screen readers in order to support ChromeVox.
   More context in the issue: https://github.com/angular/components/issues/22165.
 -->
-<div class="mdc-linear-progress" aria-hidden="true">
-  <div class="mdc-linear-progress__buffer">
-    <div class="mdc-linear-progress__buffer-bar"></div>
-    <div class="mdc-linear-progress__buffer-dots"></div>
-  </div>
-  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
-    <span class="mdc-linear-progress__bar-inner"></span>
-  </div>
-  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
-    <span class="mdc-linear-progress__bar-inner"></span>
-  </div>
+<div class="mdc-linear-progress__buffer" aria-hidden="true">
+  <div class="mdc-linear-progress__buffer-bar"></div>
+  <div class="mdc-linear-progress__buffer-dots"></div>
+</div>
+<div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar" aria-hidden="true">
+  <span class="mdc-linear-progress__bar-inner"></span>
+</div>
+<div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar" aria-hidden="true">
+  <span class="mdc-linear-progress__bar-inner"></span>
 </div>

src/material-experimental/mdc-progress-bar/progress-bar.scss

@@ -1,22 +1,25 @@
 @use '@material/linear-progress' as mdc-linear-progress;
 @use '../mdc-helpers/mdc-helpers';
 
-@include mdc-linear-progress.core-styles($query:
-  mdc-helpers.$mat-base-styles-without-animation-query);
+@include mdc-linear-progress.core-styles($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-progress-bar {
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.
   display: block;
 
   &._mat-animation-noopable {
+    .mdc-linear-progress__buffer-dots,
+    .mdc-linear-progress__primary-bar,
+    .mdc-linear-progress__secondary-bar,
+    .mdc-linear-progress__bar-inner.mdc-linear-progress__bar-inner {
+      // Disable the loading animations.
+      animation: none;
+    }
+
     .mdc-linear-progress__primary-bar {
       // There's a `transitionend` event that depends on this element. Add a very short
       // transition when animations are disabled so that the event can still fire.
       transition: transform 1ms;
     }
   }
-
-  &:not(._mat-animation-noopable) {
-    @include mdc-linear-progress.core-styles($query: animation);
-  }
 }

src/material-experimental/mdc-progress-bar/progress-bar.spec.ts

@@ -23,11 +23,11 @@ describe('MDC-based MatProgressBar', () => {
     const fixture = createComponent(BasicProgressBar);
     const host = fixture.nativeElement as Element;
     const element = host.children[0];
-    expect(element.children.length).toBe(1);
+    const children = element.children;
+    expect(children.length).toBe(3);
 
-    const div = element.querySelector('div')!;
-    expect(div).toBeTruthy();
-    expect(div.getAttribute('aria-hidden')).toBe('true');
+    const ariaHidden = Array.from(children).map(child => child.getAttribute('aria-hidden'));
+    expect(ariaHidden).toEqual(['true', 'true', 'true']);
   });
 
   describe('with animation', () => {

src/material-experimental/mdc-progress-bar/progress-bar.ts

@@ -55,7 +55,7 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
     'tabindex': '-1',
     '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
     '[attr.mode]': 'mode',
-    'class': 'mat-mdc-progress-bar',
+    'class': 'mat-mdc-progress-bar mdc-linear-progress',
     '[class._mat-animation-noopable]': '_isNoopAnimation',
   },
   inputs: ['color'],
@@ -83,22 +83,26 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
 
   /** Adapter used by MDC to interact with the DOM. */
   private _adapter: MDCLinearProgressAdapter = {
-    addClass: (className: string) => this._rootElement.classList.add(className),
-    forceLayout: () => this._rootElement.offsetWidth,
-    removeAttribute: (name: string) => this._rootElement.removeAttribute(name),
-    setAttribute: (name: string, value: string) => this._rootElement.setAttribute(name, value),
-    hasClass: (className: string) => this._rootElement.classList.contains(className),
-    removeClass: (className: string) => this._rootElement.classList.remove(className),
+    addClass: (className: string) => this._elementRef.nativeElement.classList.add(className),
+    forceLayout: () => this._elementRef.nativeElement.offsetWidth,
+    removeAttribute: (name: string) => this._elementRef.nativeElement.removeAttribute(name),
+    setAttribute: (name: string, value: string) => {
+      if (name !== 'aria-valuenow') {
+        this._elementRef.nativeElement.setAttribute(name, value);
+      }
+    },
+    hasClass: (className: string) => this._elementRef.nativeElement.classList.contains(className),
+    removeClass: (className: string) => this._elementRef.nativeElement.classList.remove(className),
     setPrimaryBarStyle: (styleProperty: string, value: string) => {
       (this._primaryBar.style as any)[styleProperty] = value;
     },
     setBufferBarStyle: (styleProperty: string, value: string) => {
       (this._bufferBar.style as any)[styleProperty] = value;
     },
     setStyle: (styleProperty: string, value: string) => {
-      (this._rootElement.style as any)[styleProperty] = value;
+      (this._elementRef.nativeElement.style as any)[styleProperty] = value;
     },
-    getWidth: () => this._rootElement.offsetWidth,
+    getWidth: () => this._elementRef.nativeElement.offsetWidth,
     attachResizeObserver: (callback) => {
       const resizeObserverConstructor = (typeof window !== 'undefined') &&
                                         (window as unknown as WithMDCResizeObserver).ResizeObserver;
@@ -111,7 +115,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
           // on the constructed `observer`. This should not happen, but adding this check for this
           // edge case.
           if (typeof observer.observe === 'function') {
-            observer.observe(this._rootElement);
+            observer.observe(this._elementRef.nativeElement);
             return observer;
           }
 
@@ -144,7 +148,6 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
   }
   private _bufferValue = 0;
 
-  private _rootElement: HTMLElement;
   private _primaryBar: HTMLElement;
   private _bufferBar: HTMLElement;
 
@@ -181,7 +184,6 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
   ngAfterViewInit() {
     const element = this._elementRef.nativeElement;
 
-    this._rootElement = element.querySelector('.mdc-linear-progress') as HTMLElement;
     this._primaryBar = element.querySelector('.mdc-linear-progress__primary-bar') as HTMLElement;
     this._bufferBar = element.querySelector('.mdc-linear-progress__buffer-bar') as HTMLElement;
 
@@ -221,9 +223,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
 
       const reverse = direction === 'rtl' ? mode !== 'query' : mode === 'query';
       const progressDirection = reverse ? 'rtl' : 'ltr';
-      const currentDirection = this._rootElement.getAttribute('dir');
+      const currentDirection = this._elementRef.nativeElement.getAttribute('dir');
       if (currentDirection !== progressDirection) {
-        this._rootElement.setAttribute('dir', progressDirection);
+        this._elementRef.nativeElement.setAttribute('dir', progressDirection);
         foundation.restartAnimation();
       }