Skip to content

Conversation

@tleperou
Copy link
Contributor

@tleperou tleperou commented Mar 18, 2023

What is it?

  • Feature / enhancement
  • Bug
  • Docs / tests

Description

Input Phone aims at formatting and validating with ease international phone number.

In details

  1. automatic detection of country code from phone number input
  2. manual country code from select
  3. validate: 'INVALID_COUNTRY' | 'NOT_A_NUMBER' | 'TOO_SHORT' | 'TOO_LONG' | 'INVALID_LENGTH' | 'MAYBE_VALID' | 'NOT_VALID' | 'VALID'

Accessibility

  • Native HTML element
  • Fully keyboard control
  • Switch countries list and input number using CSS only
  • Axe tested

Note: Shall integrate the headless Select, maybe when the autocompletion is implemented + Axe tested.

Use cases and why

Any where a phone number is required

Screenshots/Demo

image
image

Checklist:

  • My code follows the developer guidelines of this project
  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation
  • Added new tests to cover the fix / functionality

@github-actions
Copy link
Contributor

github-actions bot commented Mar 18, 2023

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

@tleperou
Copy link
Contributor Author

Accessibility test with Axe

image

image

@gioboa
Copy link
Contributor

gioboa commented Mar 18, 2023

That's great. Can you describe how to test the component with axe please?
You can add the steps here CODING_STANDARDS.md

@tleperou
Copy link
Contributor Author

I have read the CLA Document and I hereby sign the CLA

github-actions bot added a commit that referenced this pull request Mar 18, 2023
@tleperou
Copy link
Contributor Author

tleperou commented Mar 18, 2023

@gioboa, I proceed with the code standard updates in a separate MR, #244.

Shall tests results be associated within the component, somehow ?

@gioboa
Copy link
Contributor

gioboa commented Mar 19, 2023

a11y need to be documented so I think we can create a markdown with our components + axe screenshots

@tleperou
Copy link
Contributor Author

tleperou commented Mar 19, 2023

!245 for the coding standard.

I mentioned the way to store test reports: in Github or discord (temporarily).

I better dig further within the extension to see how to extract the report and collocate it nicely with the component

@tleperou
Copy link
Contributor Author

a11y need to be documented so I think we can create a markdown with our components + axe screenshots

Added in a .json format.

The structure result refers to the language. It seemed to me be not enough relevant to the component's scope to fix the issues of the structure.

@gioboa gioboa merged commit 8c8b1aa into qwikifiers:main Mar 19, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Mar 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants