Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
itsnode opened this issue Nov 16, 2023 · 5 comments
Labels
accessibility use this label for any issue or enhancement related to screenreader/keyboard/etc support

Comments

@itsnode
Copy link
Contributor

itsnode commented Nov 16, 2023

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.

Screenshot 2023-11-15 at 5 38 22 PM Screenshot 2023-11-15 at 5 37 32 PM

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 skaquib123 self-assigned this Nov 28, 2023
@skaquib123
Copy link
Contributor

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

@itsnode
Copy link
Contributor Author

itsnode commented Nov 28, 2023

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

Screen.Recording.2023-11-28.at.9.02.54.AM.mov

@itsnode
Copy link
Contributor Author

itsnode commented Nov 28, 2023

@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 droshev added the accessibility use this label for any issue or enhancement related to screenreader/keyboard/etc support label Mar 2, 2024
@droshev
Copy link
Contributor

droshev commented Aug 2, 2024

@itsnode is this still valid?

@droshev
Copy link
Contributor

droshev commented Sep 19, 2024

no activities => closing the issue

@droshev droshev closed this as completed Sep 19, 2024
@droshev droshev added this to the Sprint 138 - September 2024 milestone Sep 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility use this label for any issue or enhancement related to screenreader/keyboard/etc support
Projects
None yet
Development

No branches or pull requests

3 participants