[86bydfb2m] Update input phone a11y (#1502)

<!--- Provide a general summary of your changes in the Title above -->

## Motivation and Context
I've updated examples with input phone 
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?
Manually
<!--- Please describe in detail how you tested your changes. -->
<!--- For example: -->
<!--- I have added unit tests -->
<!--- I have added Voice Over tests -->
<!--- Code cannot be tested automatically so I have tested it only
manually -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [ ] Bug fix (non-breaking change which fixes an issue).
- [ ] New feature (non-breaking change which adds functionality).
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected).
- [X] Nice improve.

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [X] My code follows the code style of this project.
- [X] I have updated the documentation accordingly or it's not required.
- [X] Unit tests are not broken.
- [X] I have added changelog note to corresponding `CHANGELOG.md` file
with planned publish date.
- [ ] I have added new unit tests on added of fixed functionality.

---------

Co-authored-by: Julia Mnizhek <j.mnizhek@semrush.com>
Co-authored-by: Julia Mnizhek <77798437+j-mnizhek@users.noreply.github.com>

website/docs/components/input-phone/examples/known_country_and_number_format.tsx

@@ -18,7 +18,13 @@ const Demo = () => {
 
   return (
     <Flex direction='column'>
-      <Text tag='label' htmlFor='phone-number-with-country-select' size={200} mr={2}>
+      <Text
+        tag='label'
+        htmlFor='phone-number-with-country-select'
+        id='phone-number-label'
+        size={200}
+        mr={2}
+      >
         Phone number
       </Text>
       <Box mt={2}>
@@ -35,28 +41,33 @@ const Demo = () => {
               }, 1);
             }}
           >
-            <Select.Trigger>
+            <Select.Trigger
+              aria-haspopup='dialog'
+              __excludeProps={['value', 'placeholder', 'role']}
+              aria-describedby='phone-number-label'
+              aria-label={`Select country. Current country is ${countries[country].name}`}
+            >
               <Select.Trigger.Addon mr={0}>
                 <Flag iso2={country} />
               </Select.Trigger.Addon>
             </Select.Trigger>
 
-            <Select.Popper>
+            <Select.Popper tabIndex={-1}>
               <>
                 <InputSearch
                   placeholder='Search'
                   value={countryFilter}
                   onChange={setCountryFilterValue}
                 />
 
-                <Select.List hMax='240px' w='232px'>
+                <Select.List hMax='240px' w='232px' aria-label={'Countries'}>
                   {Object.keys(countries)
                     .filter((country) =>
                       countries[country].name.toLowerCase().includes(countryFilter),
                     )
                     .map((country) => (
                       <Select.Option key={country} value={country}>
-                        <Text size={200} mr={2} flex='0 0 auto'>
+                        <Text size={200} mr={2} flex='0 0 auto' aria-hidden={'true'}>
                           <Flag iso2={country as keyof typeof countries} />
                         </Text>
                         <Text size={200} mr={2}>
@@ -73,18 +84,16 @@ const Demo = () => {
           </Select>
           <InputMask w={210}>
             <InputMask.Value
-              title={'phone number'}
               id='phone-number-with-country-select'
               ref={inputRef}
               value={phoneNumber}
               onChange={setPhoneNumber}
               mask={phoneMask.replace(/_/g, '9')}
             />
-            {phoneNumber?.includes('(') && (
+            {phoneNumber !== phoneMask && (
               <Input.Addon
                 tag={CloseM}
-                aria-label='Clear value'
-                color='icon-secondary-neutral'
+                aria-label='Clear'
                 interactive
                 onClick={() => setPhoneNumber(prefix)}
               />

website/docs/components/input-phone/examples/known_country_but_the_number_format_is_unknown.tsx

@@ -12,7 +12,7 @@ const Demo = () => {
       <Text tag='label' size={200} htmlFor='phone-number'>
         Phone number
       </Text>
-      <Input w={180} mt={2}>
+      <Input w={180} mt={2} aria-label='country detected USA'>
         <Input.Addon>
           <Flag iso2='US' />
         </Input.Addon>
@@ -21,7 +21,7 @@ const Demo = () => {
           <Input.Addon
             tag={CloseM}
             interactive
-            aria-label='Clear field'
+            aria-label='Clear'
             color='icon-secondary-neutral'
             onClick={() => setValue('+1')}
           />

website/docs/components/input-phone/examples/unknown_country_and_number_format.tsx

@@ -17,7 +17,7 @@ const Demo = () => {
           <Input.Addon
             tag={CloseM}
             interactive
-            aria-label='Clear field'
+            aria-label='Clear'
             color='icon-secondary-neutral'
             onClick={() => setValue('+')}
           />

website/docs/components/input-phone/input-phone-a11y.md

@@ -1,41 +1,14 @@
 ---
 title: InputPhone
 a11y: AA
-tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code')
+tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code'), Changelog('input-phone-changelog')
 ---
 
-## What component has
+This pattern is built with Input, InputMask and Select components. For the detailed documentation regarding accessibility, refer to their documentation:
 
-### Keyboard support
-
-Table: Keyboard support
-
-| Key           | Function                                       |
-| ------------- | ---------------------------------------------- |
-| `Tab`         | Moves focus to the next focusable element.     |
-| `Shift + Tab` | Moves focus to the previous focusable element. |
-| `Enter`       | Submits the entered value.                     |
-
-See detailed information about the keyboard support for the input fields in the [Keyboard control guide](/core-principles/a11y/a11y-keyboard#input_i_textarea).
-
-## Considerations for developers
-
-- Keep it simple – not all browsers correctly expose multiple labels that are linked to the same form element.
-- Use labels for every input and make the `for=""` and `id=""` values match. IDs must be unique on each page, only one label can be associated to each unique form element. Make required fields obvious by using an indicator – asterisk, description text, etc.
-- Help text is crucial in ensuring accessibility of form fields. Fields with constraints should have visible instructions that are programmatically associated, such as through `aria-describedby`. Include help text for all masked fields.
-- Fields with error validation should have `aria-describedby` to insure that the associated field level error message is read by assistive technology. If the error message has an `id="my-error-message"`, then the input should have `aria-describedby="my-error-message"`.
-
-Find live examples in the [A11y style guide](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-text-fields).
-
-## Considerations for designers
-
-- Focus must be visible.
-- Don’t hide the input label on focus.
-
-## Resources
-
-- [A11y style guide](https://a11y-style-guide.com/style-guide/section-forms.html#kssref-forms-text-fields) describes core principles for the accessible inputs and textarea.
-- Find live examples of accessible inputs with different types in [DigitalA11y project](https://www.digitala11y.com/demos/accessibility-of-html-input-types-examples/).
+- [Input](/components/input/input-a11y)
+- [InputMask](/components/input-mask/input-mask-a11y)
+- [Select](/components/select/select-a11y)
 
 ## Other recommendations
 

website/docs/components/input-phone/input-phone-changelog.md

@@ -0,0 +1,10 @@
+---
+title: InputPhone
+tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code'), Changelog('input-phone-changelog')
+---
+
+This pattern is built with Input, InputMask and Select components. For their changelogs, refer to their documentation:
+
+- [Input](/components/input/input-changelog)
+- [InputMask](/components/input-mask/input-mask-changelog)
+- [Select](/components/select/select-changelog)

website/docs/components/input-phone/input-phone-code.md

@@ -1,11 +1,17 @@
 ---
 title: InputPhone
-tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code')
+tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code'), Changelog('input-phone-changelog')
 ---
 
+This pattern is built with Input, InputMask and Select components. For their API, refer to their documentation:
+
+- [Input](/components/input/input-api)
+- [InputMask](/components/input-mask/input-mask-api)
+- [Select](/components/select/select-api)
+
 ## Unknown country and number format
 
-The input field is pre-filled with the value: `+`.
+The input is pre-filled with the value: `+`.
 
 ::: sandbox
 
@@ -17,7 +23,7 @@ The input field is pre-filled with the value: `+`.
 
 ## Known country, but the number format is unknown
 
-The input field has a preset value: "+ {country code}". However, if it is possible to enter phone numbers from multiple countries, a country select option should be provided instead of a static flag.
+The input has a preset value: "+ {country code}". However, if it is possible to enter phone numbers from multiple countries, a country select option should be provided instead of a static flag.
 
 ::: tip
 In certain countries, there may be multiple valid formats for phone numbers. Therefore, it is sometimes safer to remove the format mask to avoid restricting user input.
@@ -33,7 +39,7 @@ In certain countries, there may be multiple valid formats for phone numbers. The
 
 ## Known country and number format
 
-The input field includes the country code as a preset value: "+ {country code}". Additionally, it has the required format mask.
+The input includes the country code as a preset value: "+ {country code}". Additionally, it has the required format mask.
 
 This option is suitable when collecting phone numbers from users in one or a limited number of countries.
 

website/docs/components/input-phone/input-phone.md

@@ -1,11 +1,11 @@
 ---
 title: InputPhone
-tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code')
+tabs: Design('input-phone'), A11y('input-phone-a11y'), Example('input-phone-code'), Changelog('input-phone-changelog')
 ---
 
 ## Description
 
-**Input** is a component designed to facilitate the entry of phone numbers using a [mask](/components/input-mask/input-mask). This input field ensures that users can enter their phone numbers correctly without any uncertainty about the format.
+**InputPhone** is a pattern designed to facilitate the entry of phone numbers using a [mask](/components/input-mask/input-mask). This input ensures that users can enter their phone numbers correctly without any uncertainty about the format.
 
 ### Recommendations for using this input
 
@@ -18,7 +18,7 @@ In a [study conducted by Baymard Research](https://baymard.com/blog/input-maskin
 
 ## Appearance
 
-The appearance of the phone number input can vary based on:
+The appearance of the InputPhone can vary based on:
 
 - User's country and/or number format
 - Whether phone numbers from the same country are required
@@ -31,7 +31,7 @@ Table: InputPhone variants
 | Known country but unknown phone number format | ![](static/input-phone-2.png) |
 | Known country and phone number format | ![](static/input-phone-3.png) |
 
-When the user's country is known, it's important to display the flag of the country in the input field. This helps users navigate through the entered data more easily, as seen in the [Form guide](/patterns/form/form).
+When the user's country is known, it's important to display the flag of the country in the input. This helps users navigate through the entered data more easily, as seen in the [Form guide](/patterns/form/form).
 
 ::: tip
 Be sure to add the label "Phone number" to the input. Especially if there are no visual indications of the mask type, country code, or format,
@@ -52,10 +52,6 @@ Table: Sizes of InputPhone's hint text
 
 ## Interaction
 
-::: tip
-here are characters entered in the input, a "clear all" button will appear.
-:::
-
 ### Important points for cases when the user's country and phone format can be determined
 
 - **Only numeric characters can be entered in this field.** All other characters are removed when entered or pasted from the clipboard.
@@ -99,7 +95,7 @@ Table: States for the case when both country and phone number format are known
 
 ## Usage in UX/UI
 
-To ensure user clarity about how much information they need to enter, it is recommended to keep the width of the phone number input field as clear as possible. Typically, the width doesn't exceed 160px-250px for the input sizes.
+To ensure user clarity about how much information they need to enter, it is recommended to keep the width of the InputPhone as clear as possible. Typically, the width doesn't exceed 160px-250px for the input sizes.
 
 ![](static/size-yes-no.png)