search

microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
944 stars 303 forks source link

[MGTP-mgt agenda-Templating-Event other-Click me]: 'Click me' button is not functional using keyboard and mouse. #2249

Closed vagpt closed 1 year ago

vagpt commented 1 year ago

Test Environment: OS Build: Windows 11 Version: 22H2 (OS Build 25300.1000) Browser: Edge dev Browser Version 114.0.1807.5 (Official build) dev (64-bit) URL: Components / mgt-agenda / Properties - Preferred Timezone ⋅ Storybook User ID: V-id

Pre-requisites:

  1. Navigate using keyboard only.

Repro Steps:

  1. Open the above URL and login with valid credentials.
  2. 'Microsoft Graph Toolkit Playground' Overview page will get displayed.
  3. Navigate to 'Components' button using tab key and expand it.
  4. Navigate to 'mgt agenda' button using tab key and expand it.
  5. Navigate to 'Templating' button using arrow key and expand it.
  6. Navigate to 'Event other' link using arrow key and activate it.
  7. Navigate to 'Click me' button using tab key and activate it using enter key/spacebar key.
  8. Observe the issue.

Actual Result: The 'Click me' button is not actionable by pressing the 'Enter/Space' key using keyboard or Mouse.

Expected Results: The Click me' button should be actionable by pressing the 'Enter/Space' key using keyboard and Mouse.

User Impact: If the button is not operable via Keyboard/Mouse, the user is not able to perform action on that interactive control, hence it is blocking the user from using the functionality to change languages selections.

Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com)".

https://user-images.githubusercontent.com/95913748/236850239-bee5794a-5e6a-4354-b8cc-90420fc8df45.mp4

Functional - No action is getting perfromed
ghost commented 1 year ago

Hello vagpt, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

gavinbarron commented 1 year ago

@sebastienlevert this button does nothing even with a mouse. we should probably re-work this story to do something else perhaps just this for story:

<mgt-agenda show-max="7" days="10">
    <template data-type="event-other">
        <div class="root">
            <button onclick='alert("{{ event.subject }}");'>Click me</button>
        </div>
    </template>
</mgt-agenda>
vagpt commented 1 year ago

This issue is working fine on the environment below, hence closing this issue.

Test Environment: URL: https://mgt.dev/next/pr/2432/?path=/story/components-mgt-agenda-templating--event-other OS Build: Windows 11 Version: 23H2 (OS Build 25381.1) Browser: Edge dev Browser Version: Version 115.0.1880.3 (Official build) dev (64-bit)

Attachment:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/80975922-da93-41bc-9451-8f73cc73a94f