[Accessibility] fd-shellbar with fdPopoverTrigger add not-allowed aria-expanded attribute

[itsnode]

Is this a bug, enhancement, or feature request?

Bug

Describe your proposal.

Can you handle that on the application side

Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)

If this is a bug, please provide steps for reproducing it; the exact components you are using;

A simple shellbar component which

Please provide relevant source code (if applicable).

code sniipets

<fd-shellbar-actions [closePopoverOnSelect]="true">
    <fd-shellbar-user-menu
      #shellbarUserMenu  
      [fdPopoverTrigger]="userMenuPopover">
    </fd-shellbar-user-menu>
  </fd-shellbar-actions>
  <fd-popover
    #userMenuPopover >
    <fd-popover-body> </fd-popover-body>
</fd-popover>

Please provide stackblitz example(s).

https://stackblitz.com/edit/angular-usdxnt-bkrewm?file=src%2Fapp%2Flist-example.component.html Please analyze the fd-shellbar-actions using https://chromewebstore.google.com/detail/access-assistant/ojiighldhdmahfdnhfdebnpmlbiemdfm

you will see the error messages below.

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Got the Accessibility ticket from Sap Central Accessibility team. https://product-jira.ariba.com/browse/SA-44427

Did you check the documentation and the API?

Did you search for similar issues?

Is there anything else we should know?

[skaquib123]

Hey @itsnode, Is it possible for you to share a video as the issue is not clear to me.

[itsnode]

@skaquib123 see record that I show how to use Access Assistant Tool to analyze the HTML page that fd-shellbar-actions

https://github.com/SAP/fundamental-ngx/assets/48496287/11ff158d-9280-4bc2-92cd-f801ef608d24

[itsnode]

@skaquib123 Noted that I notice fdMenuTrigger has '[attr.aria-expanded]': 'isMenuOpen || null', but fdPopoverTrigger(which in our use case) does not have any such logic to null out if popover is not open, maybe that could be a cause. Basically the issue is that aria-expanded tag should not be there when Popover is not open(false case). Currently we have aria-expanded=false added(before popover triggered). ` import { AfterContentInit, Directive, ElementRef, HostListener, Input, OnDestroy, Optional, Self, ViewContainerRef } from '@angular/core'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { TemplatePortal } from '@angular/cdk/portal'; import { ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE } from '@angular/cdk/keycodes'; import { fromEvent, Subscription } from 'rxjs'; import { filter, take } from 'rxjs/operators';

import { KeyUtil } from '@fundamental-ngx/cdk/utils'; import { MenuCloseMethod, MenuComponent } from './menu.component'; import { MenuItemComponent } from './menu-item.component';

@Directive({ selector: [fdpMenuTriggerFor], host: { 'aria-haspopup': 'menu', '[attr.aria-expanded]': 'isMenuOpen || null', '[attr.aria-controls]': 'isMenuOpen ? menu.menuId : null' } })`

[droshev]

@itsnode is this still valid?