{Linked:Bug18712; LinkedBug} [MGTP-Components-Samples-General-Localization-Add me-Add the task date]: ‘Validation’ is not set for ‘Year’ section under ‘Add a task date’ spin button.

[Raisul123]

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 Screen reader: Narrator

Repro Steps:

1. Open the above URL and login with valid credentials.
2. Turn on Narrator using ‘Ctrl+win+enter’ keys.
3. The ‘Microsoft Graph Toolkit Playground' Overview page will get displayed.
4. Navigate to 'Components' button using tab key and expand it.
5. Navigate to 'Samples' button using tab key and expand it.
6. Navigate to 'General' button using arrow key and expand it.
7. Navigate to 'Localization' link using arrow key and activate it.
8. Navigate to ‘Add me’ button using tab key and activate it.
9. Navigate to ‘Add the task date’ field using tab key.
10. Navigate to ‘Year(YYYY)’ section using arrow key.
11. Type numbers to set year and observe the screen reader announcement.

Actual result: Validation is not set for ‘Year(YYYY)’ field under ‘Add the task date’ field. Screen reader announces as ‘Year , Add the Task date, spin button, value, Minimum 1 and maximum 275760.

Observation: Issue doesn’t reproduce for ‘Date’,’Month’ sections.

Expected result: Validation should be set for ‘Year(YYYY)’ field, It should be set in between 2019-2040. Screen reader should announce something like ‘Year , Add the Task date, spin button, value, Minimum 2019 and maximum 2040.

Note: Same issue reproduces for all ‘Year’ sections throughout application.

User impact: Users are impacted to give valid year input inside the field if validation is not set for the same. Hence users are blocked to add new task successfully.

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

Attachment:

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/23114460/006f9cd0-8d95-4600-9a87-ff0235a05e5a

[ghost]

Hello Raisul123, 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]

Currently the fluent-text-box does not support adding max and min validation parameters to an input.

This makes adding the requested validation infeasible.

@sebastienlevert assuming that these options are added at some point in the future, do you have any suggestions for the "valid" date range? now - 5 years => now + 25 years?

[gavinbarron]

Blocked as the fluent-text-field doesn't support date time specific options for the input

[sebastienlevert]

@gavinbarron should we explore using the fluent-calendar? https://fluent-components.azurewebsites.net/?path=/docs/components-calendar--calendar

[gavinbarron]

@sebastienlevert No. we tried that it was bad. very, very bad. For Martin and Nickii the calendar managed to render February 31st https://github.com/microsoft/fluentui/issues/27020

[vagpt]

Issue is still repro on below test environment. Test Environment:

OS Build: Windows 11

Version: 22H2 (OS Build 23612.1000)

Browser: Edge dev.

URL: Samples / General - Localization ⋅ Storybook (mgt.dev)

Browser Version 122.0.2325.0 (Official build) dev (64-bit) screen reader: Narrator

https://github.com/microsoftgraph/microsoft-graph-toolkit/assets/95913748/78699c8e-5a2c-4d79-8a59-f8eca428e53e

[gavinbarron]

This is an issue with the fact that the fluent web component does not provide any of the range limiters that native browser input with type="date" provides.

As such we cannot address this issue.

Furthermore we would need to place arbitrary limits on the inputs, which a controls library producer makes little sense in my mind

[Bhaskar301101]

@gavinbarron Could you please provide the exact control name.

[Bhaskar301101]

@gavinbarron Gentle reminder on below ask.

[gavinbarron]

Not sure what you're asking here, the fluent web component that we use is the fluent-text-field.

If we were to place limits on the date range accepted for date inputs what is suggested here? Please bear in mind that this is a control for developers to use in their custom applications, so I'm very cautious about placing limits that might not align with the needs of the developer using this control in their applications.

[vagpt]

Hi @gavinbarron,

As this bug is external to Fluent Team so for processing this bug to Fluent team, we need Code Pen and control name so that Fluent team easily check this issue at their end.

So could you please provide us Code Pen for the same?

[gavinbarron]

@Raisul123 here's the codepen https://codepen.io/gavinbarron/pen/wvZqaBK

[vagpt]

Thanks @gavinbarron for providing the codepen. We have routed this bug to Fluent team and we will update external bug id here once we received external bug id.

[Mnickii]

@vagpt any update on this?

[vagpt]

Hi @Mnickii

Sorry for the delay response.

Please find the below external bug id -

https://dev.azure.com/microsoftdesign/fluent-ui/_workitems/edit/18712

[Raisul123]

Adding Usable tag as per internal discussion