search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.56k stars 267 forks source link

ui5-date-picker: Error handling #2376

Closed GongRichard closed 4 years ago

GongRichard commented 4 years ago

Describe the bug A clear and concise description of what the bug is.

To reproduce Steps to reproduce the behavior:

  1. Go to https://github.wdf.sap.corp/pages/xweb/goalmanagementx/app.html?mock#/goal-list
  2. click 'Skip Tour' button
  3. click more actions button on the top right of Goal Card
  4. click 'Create Activity' button
  5. select a new satus 'low'
  6. open date picker for 'Achieved On'
  7. input invalid value and verify the error messages 

Actual Results For 'Achieved On' input field when invalid data is entered, inline error message 'Invalid entry' with red outline on input field and highlighted error message is shown. 

  1. Suggestion - The error message does not contain the word "Error or Alert" or an alert icon in addition, to indicate the presence of errors for color blind users who will not be able to perceive the red color in the error messages.
  2. Error message does not contain adequate information to correct the error.

Expected behavior

  1. Suggestion - Use icons to convey meaning through color and shape and comply with two-senses concept wherever applicable. The error icon can be used in addition to error message. For reference: https://confluence.successfactors.com/pages/viewpage.action?spaceKey=UX&title=SF+Fiori+and+Accessibility+Design+Updates
  2. Error suggestion should indicate the acceptable date format. For example - 'Enter valid date in a format MMM,d,yyyy'. Please provide customizing error message function

Screenshots Achieved On error Example of Error suggestion

Context

ilhan007 commented 4 years ago

Hello @GongRichard

you can use the valueStateMessage "slot" to set whatever message needed, this exactly why we have this slot. The built-in message is very generic, but this is what we have in the spec and the message is the same across all input type of components.

<ui5-date-picker id='ui5-datepicker-value-state-message'
        placeholder='Delivery Date...'
        value-state="Error"
        title='Delivery Date!'>
            <div slot="valueStateMessage">Expected format is a long text used as an information message. </div>
        </ui5-date-picker>

Best Regards, ilhan