Feat/242 add input phone

[tleperou]

What is it?

• [x] Feature / enhancement
• [ ] Bug
• [x] 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

Checklist:

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

[github-actions[bot]]

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

[tleperou]

Accessibility test with Axe

[gioboa]

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

[tleperou]

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

[tleperou]

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

Shall tests results be associated within the component, somehow ?

[gioboa]

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

[tleperou]

!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]

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.