[86byh36gp][docs] fixed input examples a11y (#1508)

## Motivation and Context

This PR includes important fixes in Input examples a11y. No changes were
made in the component itself.

## How has this been tested?

Manually.

## Types of changes

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

- [x] 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.
- [ ] 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>

website/docs/components/input/examples/input_with_a_submit_icon.tsx

@@ -3,6 +3,7 @@ import Input from 'intergalactic/input';
 import CheckM from 'intergalactic/icon/Check/m';
 import { Text } from 'intergalactic/typography';
 import { Box } from 'intergalactic/flex-box';
+import { Hint } from 'intergalactic/tooltip';
 
 const Demo = () => {
   const [focus, setFocus] = React.useState(false);
@@ -20,7 +21,11 @@ const Demo = () => {
             onFocus={() => setFocus(true)}
             id='submit-example'
           />
-          {focus && <Input.Addon interactive tag={CheckM} aria-label='Submit' />}
+          {focus && (
+            <Input.Addon>
+              <Hint interactive title='Submit' tag={CheckM} color='icon-secondary-success' />
+            </Input.Addon>
+          )}
         </Input>
       </Box>
     </>

website/docs/components/input/examples/input_with_a_text_addon.tsx

@@ -6,34 +6,26 @@ import { Box } from 'intergalactic/flex-box';
 const Demo = () => {
   return (
     <>
-      <Text tag='label' htmlFor='permanent-placeholder-l-example' size={300}>
-        Input with permanent text
-      </Text>
+      <Text size={300}>Input with permanent text</Text>
       <Box mt={2} mb={4}>
         <Input size='l' w={300}>
-          <Input.Addon pr='3px' id='permanent-placeholder-l-addon'>
-            <Text color='text-secondary'>Permanent text:</Text>
+          <Input.Addon pr='3px'>
+            <Text color='text-secondary' tag='label' htmlFor='permanent-placeholder-l-example'>
+              Permanent text:
+            </Text>
           </Input.Addon>
-          <Input.Value
-            placeholder='Placeholder'
-            id='permanent-placeholder-l-example'
-            aria-labelledby='permanent-placeholder-l-addon'
-          />
+          <Input.Value placeholder='Placeholder' id='permanent-placeholder-l-example' />
         </Input>
       </Box>
-      <Text tag='label' htmlFor='permanent-placeholder-m-example' size={200}>
-        Input with permanent text
-      </Text>
+      <Text size={200}>Input with permanent text</Text>
       <Box mt={2}>
         <Input size='m' w={300}>
-          <Input.Addon pr='2px' id='permanent-placeholder-m-addon'>
-            <Text color='text-secondary'>Permanent text:</Text>
+          <Input.Addon pr='2px'>
+            <Text color='text-secondary' tag='label' htmlFor='permanent-placeholder-m-example'>
+              Permanent text:
+            </Text>
           </Input.Addon>
-          <Input.Value
-            placeholder='Placeholder'
-            id='permanent-placeholder-m-example'
-            aria-labelledby='permanent-placeholder-m-addon'
-          />
+          <Input.Value placeholder='Placeholder' id='permanent-placeholder-m-example' />
         </Input>
       </Box>
     </>

website/docs/components/input/examples/input_with_multiple_addons.tsx

@@ -7,6 +7,7 @@ import ShowNoM from 'intergalactic/icon/ShowNo/m';
 import { Text } from 'intergalactic/typography';
 import { Box } from 'intergalactic/flex-box';
 import Button from 'intergalactic/button';
+import { Hint } from 'intergalactic/tooltip';
 
 const Demo = () => {
   const [value, setValue] = React.useState('');
@@ -27,26 +28,26 @@ const Demo = () => {
             id='2addon-example'
           />
           {value && (
-            <Input.Addon
-              tag={CloseM}
-              pl={2}
-              pr={1}
-              interactive
-              aria-label='Clear'
-              onClick={() => setValue('')}
-            />
+            <Input.Addon pl={2} pr={1}>
+              <Hint tag={CloseM} interactive title='Clear' onClick={() => setValue('')} />
+            </Input.Addon>
           )}
           <Input.Addon px={2}>
             <Link>Forgot?</Link>
           </Input.Addon>
-          <Input.Addon
-            aria-label={type === 'password' ? 'View password' : 'Hide password'}
-            tag={Button}
-            tabIndex={0}
-            onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
+          <Hint
+            title={type === 'password' ? 'Show password' : 'Hide password'}
+            aria-label={undefined}
           >
-            {type === 'password' ? <ShowYesM /> : <ShowNoM />}
-          </Input.Addon>
+            <Input.Addon
+              aria-label={type === 'password' ? 'Show password' : 'Hide password'}
+              mr='-1px'
+              tag={Button}
+              onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
+            >
+              {type === 'password' ? <ShowYesM /> : <ShowNoM />}
+            </Input.Addon>
+          </Hint>
         </Input>
       </Box>
     </>

website/docs/components/input/examples/input_with_other_component_inside.tsx

@@ -21,9 +21,12 @@ const Demo = () => {
             onChange={(v) => setValue(v)}
             maxLength={10}
             id='count-example'
+            aria-describedby='chars-counter'
           />
           <Input.Addon>
-            <Tag size='m'>{value.length}/10</Tag>
+            <Tag size='m' id='chars-counter'>
+              {value.length}/10
+            </Tag>
           </Input.Addon>
         </Input>
       </Box>

website/docs/components/input/examples/input_with_the_clearing_ability.tsx

@@ -3,6 +3,7 @@ import Input from 'intergalactic/input';
 import CloseM from 'intergalactic/icon/Close/m';
 import { Text } from 'intergalactic/typography';
 import { Box } from 'intergalactic/flex-box';
+import { Hint } from 'intergalactic/tooltip';
 
 const Demo = () => {
   const [value, setValue] = React.useState('');
@@ -21,7 +22,15 @@ const Demo = () => {
             id='clear-example'
           />
           {value && (
-            <Input.Addon tag={CloseM} interactive aria-label='Clear' onClick={() => setValue('')} />
+            <Input.Addon>
+              <Hint
+                interactive
+                title='Clear'
+                tag={CloseM}
+                onClick={() => setValue('')}
+                color='icon-secondary-neutral'
+              />
+            </Input.Addon>
           )}
         </Input>
       </Box>

website/docs/components/input/examples/password_input.tsx

@@ -5,6 +5,7 @@ import ShowNoM from 'intergalactic/icon/ShowNo/m';
 import Button from 'intergalactic/button';
 import { Text } from 'intergalactic/typography';
 import { Box } from 'intergalactic/flex-box';
+import { Hint } from 'intergalactic/tooltip';
 
 const Demo = () => {
   const [type, setType] = React.useState('password');
@@ -22,14 +23,19 @@ const Demo = () => {
             type={type}
             id='password-example'
           />
-          <Input.Addon
-            aria-label={type === 'password' ? 'View password' : 'Hide password'}
-            tag={Button}
-            tabIndex={0}
-            onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
+          <Hint
+            title={type === 'password' ? 'Show password' : 'Hide password'}
+            aria-label={undefined}
           >
-            {type === 'password' ? <ShowYesM /> : <ShowNoM />}
-          </Input.Addon>
+            <Input.Addon
+              aria-label={type === 'password' ? 'Show password' : 'Hide password'}
+              mr='-1px'
+              tag={Button}
+              onClick={() => setType((type) => (type === 'password' ? 'text' : 'password'))}
+            >
+              {type === 'password' ? <ShowYesM /> : <ShowNoM />}
+            </Input.Addon>
+          </Hint>
         </Input>
       </Box>
     </>