Accessibility issue in popover when fd-popover-body contains fd-list and using isOpen property.

[shawchandankumar]

Is this a bug, enhancement, or feature request?

bug

Describe your proposal.

When there is a fd-list inside the fd-popover-body, then on accessing the popover from the keyboard the popover doesn't open, it opens and in a fraction of a second, it gets closed and it keeps happening the same if we subsequently try to open the popover using enter button.

Can you handle that on the application side

No

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.)

Angular version : 16.2.8 Fundamental-NGX version : 0.47.4

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

• Click on this Link
• Access the All Projects dropdown on the top of a project list using the tab button and hit enter.

Did you check the documentation and the API?

Yes

Did you search for similar issues?

Yes, found the same issue in the stackblizt as well.

Is there anything else we should know?

This issue only happens when we use isOpen property in the fd-popover to control the popover.

[N1XUS]

Hello @shawchandankumar. Could you please provide an stackblitz example rather than url to the app, so we could see the source code you have to identify where the issue is coming from?

[shawchandankumar]

Hello @N1XUS I actually verified in the stackblizt by modifying the boilerplate code of this section https://sap.github.io/fundamental-ngx/#/core/popover#programmatic-control

Here if we control the isOpen property with the first focusable element inside the popover body, then the popover doesn't open.

[droshev]

@shawchandankumar Can you provide a stackblitz example or maybe the exact steps from our doc?

[shawchandankumar]

@droshev Yes you can go in this URL and run the project. Try to access the 'Fixed position' button using keyboard.

[droshev]

@shawchandankumar the link doesn't work for us.

[shawchandankumar]

Here is the HTML layout

<div class="fd-docs-flex-display-helper">
    <fd-popover
    placement="bottom"
    [noArrow]="false"
    [(isOpen)]="isPopoverOpen"
    [triggers]="[]"
    [focusTrapped]="true"
    [focusAutoCapture]="true"
  >
    <fd-popover-control>
      <button fd-button label="Fixed Position" (click)="openPopover()"></button>
    </fd-popover-control>
    <fd-popover-body>

      <ul fd-list aria-labelledby="popover-bar-header-1">
          <li
              fd-list-item
              class="view-list onTabListItem"
              (click)="closePopover()"
          >
              <a fd-list-link>
                  <span fd-list-title> one </span>
              </a>
          </li>
          <li
              fd-list-item
              class="view-list onTabListItem"
              (click)="closePopover()"
          >
              <a fd-list-link>
                  <span fd-list-title> three </span>
              </a>
          </li>
          <li
              fd-list-item
              class="view-list onTabListItem"
              (click)="closePopover()"
          >
              <a fd-list-link>
                  <span fd-list-title> two </span>
              </a>
          </li>
      </ul>
      
    </fd-popover-body>
  </fd-popover>
</div>

Here is the typescript code

import { Component, ViewEncapsulation } from '@angular/core';
import { AvatarComponent } from '@fundamental-ngx/core/avatar';
import {
    BarComponent,
    BarElementDirective,
    BarLeftDirective,
    BarMiddleDirective,
    BarRightDirective,
    ButtonBarComponent
} from '@fundamental-ngx/core/bar';
import { ButtonComponent } from '@fundamental-ngx/core/button';
import { ContentDensityDirective } from '@fundamental-ngx/core/content-density';
import { IconComponent } from '@fundamental-ngx/core/icon';
import {
    PopoverBodyComponent,
    PopoverBodyFooterDirective,
    PopoverBodyHeaderDirective,
    PopoverComponent,
    PopoverControlComponent
} from '@fundamental-ngx/core/popover';
import { TitleComponent } from '@fundamental-ngx/core/title';

@Component({
    selector: 'fd-popover-example',
    templateUrl: './popover-example.component.html',
    styleUrls: ['popover-example.component.scss'],
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [
        PopoverComponent,
        PopoverControlComponent,
        AvatarComponent,
        PopoverBodyComponent,
        IconComponent,
        PopoverBodyHeaderDirective,
        BarComponent,
        ButtonBarComponent,
        BarElementDirective,
        BarLeftDirective,
        BarMiddleDirective,
        BarRightDirective,
        ButtonComponent,
        TitleComponent,
        ContentDensityDirective,
        PopoverBodyFooterDirective
    ]
})
export class PopoverExampleComponent {

    isPopoverOpen = false;

    openPopover() {
        this.isPopoverOpen = true;
    }

    closePopover() {
        this.isPopoverOpen = false;
    }
}

Here is the CSS code

.fd-docs-flex-display-helper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-flow: row wrap;
  width: 100%;
}

.view-list {
  height: 2.5rem;
}

.onTabListItem:active,
.onTabListItem:focus {
  background: yellowgreen;
}

@droshev Ideally the popover should open if we try to open it using the keyboard but it shows a flash of it and closes. It's happening because the list item inside the popover also gets accessed when we access the popover using keyboard. And also the list item when accessed it is expected to close the popover.

[droshev]

@shawchandankumar Can you create a stackblitz example with that? thanks