search

microsoftgraph / microsoft-graph-toolkit

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

[MGTP-file-list-Docs-file page]: "Show more item" button visually appeared as normal text. #3096

Closed Raisul123 closed 6 months ago

Raisul123 commented 7 months ago

Test Environment: OS Build: Windows 11  Version: 24H2 (OS Build 26058.1400)  Browser: Edge dev  Browser Version 123.0.2400.1 (Official build) dev (64-bit) URL: Overview - Docs ⋅ Storybook (mgt.dev)

Repro Steps:

  1. Open the above URL
  2. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
  3. Navigate to the ‘MGTP-file-list’ and activate it.
  4. Navigate to the ‘Docs’ and activate it.
  5. Navigate to the ‘"Show more item" button.
  6. Verify the issue.

Actual Result: "Show more item" button visually appeared as normal text.

Expected Result: Button should have outline boundary. It should not appear as normal text.

User Impact: Users with low vision will get confused, if the element like "link" is not visually appeared as link.

“ Have feedback on bugs logged, please tag bug as “A11yRCA“ and add your feedback in the comment section. “

Attachments:

Show more items button visually apeared as normal text
gavinbarron commented 7 months ago

@Raisul123 is the guidance here that we must not use a fluent-button with the appearance of stealth? See here for the playground showing the fluent button: https://fluent-components.azurewebsites.net/?path=/docs/components-button--button

Is this general guidance for all cases or is there something specific about this case?

gavinbarron commented 7 months ago

proposed fix, move the button to use appearance="neutral" a neutral button

Raisul123 commented 7 months ago

Hi @gavinbarron ,

The reference that you have shared fluent UI clearly indicate the control to be as button in its visual appearance like with the four side boundary with blue color.

however, the issue which we reported ,the ‘Show more items’ control does not look like a buttons/interactive control visually. therefor we request you to style the control with four side boundaries with blue color so that it appears to be and interactive control to the users.

gavinbarron commented 7 months ago

@Raisul123 did you not change the appearance of the button on the linked site to use the "stealth" setting? That is the configuration I was specifically asking about. Here's a screenshot for reference:

image

Raisul123 commented 7 months ago

Hi @gavinbarron ,

Can you change this appearance setting as 'Accent' at your end because the current appearance is impacting person with disability

gavinbarron commented 7 months ago

@Raisul123 Accent is intended as a primary action, load more is not really a primary action. We'll use appearance neutral.

vagpt commented 6 months ago

We have checked this issue using appearance as Neutral on Fluent URL, hence closing this issue.