(shouldOpen: boolean, role?: string)
| 656 | } |
| 657 | |
| 658 | private beforeAnimation(shouldOpen: boolean, role?: string) { |
| 659 | assert(!this.isAnimating, '_before() should not be called while animating'); |
| 660 | |
| 661 | /** |
| 662 | * When the menu is presented on an Android device, TalkBack's focus rings |
| 663 | * may appear in the wrong position due to the transition (specifically |
| 664 | * `transform` styles). This occurs because the focus rings are initially |
| 665 | * displayed at the starting position of the elements before the transition |
| 666 | * begins. This workaround ensures the focus rings do not appear in the |
| 667 | * incorrect location. |
| 668 | * |
| 669 | * If this solution is applied to iOS devices, then it leads to a bug where |
| 670 | * the overlays cannot be accessed by screen readers. This is due to |
| 671 | * VoiceOver not being able to update the accessibility tree when the |
| 672 | * `aria-hidden` is removed. |
| 673 | */ |
| 674 | if (isPlatform('android')) { |
| 675 | this.el.setAttribute('aria-hidden', 'true'); |
| 676 | } |
| 677 | |
| 678 | // this places the menu into the correct location before it animates in |
| 679 | // this css class doesn't actually kick off any animations |
| 680 | this.el.classList.add(SHOW_MENU); |
| 681 | |
| 682 | /** |
| 683 | * We add a tabindex here so that focus trapping |
| 684 | * still works even if the menu does not have |
| 685 | * any focusable elements slotted inside. The |
| 686 | * focus trapping utility will fallback to focusing |
| 687 | * the menu so focus does not leave when the menu |
| 688 | * is open. |
| 689 | */ |
| 690 | this.el.setAttribute('tabindex', '0'); |
| 691 | if (this.backdropEl) { |
| 692 | this.backdropEl.classList.add(SHOW_BACKDROP); |
| 693 | } |
| 694 | |
| 695 | // add css class and hide content behind menu from screen readers |
| 696 | if (this.contentEl) { |
| 697 | this.contentEl.classList.add(MENU_CONTENT_OPEN); |
| 698 | |
| 699 | /** |
| 700 | * When the menu is open and overlaying the main |
| 701 | * content, the main content should not be announced |
| 702 | * by the screenreader as the menu is the main |
| 703 | * focus. This is useful with screenreaders that have |
| 704 | * "read from top" gestures that read the entire |
| 705 | * page from top to bottom when activated. |
| 706 | * This should be done before the animation starts |
| 707 | * so that users cannot accidentally scroll |
| 708 | * the content while dragging a menu open. |
| 709 | */ |
| 710 | this.contentEl.setAttribute('aria-hidden', 'true'); |
| 711 | } |
| 712 | |
| 713 | this.blocker.block(); |
| 714 | this.isAnimating = true; |
| 715 | if (shouldOpen) { |
no test coverage detected