Add a11y section into DateInput doc

Author: andrey-medvedev-vk

packages/vkui/src/components/DateInput/Readme.md

@@ -3,6 +3,24 @@
 - Если нужен календарь без поля ввода, используйте [Calendar](#!/Calendar).
 - Если нужен выбор диапазона дат, используйте [DateRangeInput](#!/DateRangeInput).
 
+## Цифровая доступность (a11y)
+
+> ⚠️ Настоятельно рекомендуем включить режим `accessible`, чтобы сделать DateInput доступным уже сейчас. В v8 режим `accessible` будет включен по умолчанию
+
+По умолчанию (в v7) `DateInput` сложно использовать пользователям ассистивных технологий.
+Мы доработали компонент так, чтобы сделать его доступным. К сожалению, это потребовало изменений в визуальном поведении компонента. Мы можем включить это поведение по умолчанию только в мажорном релизе VKUI (v8), так как это влияет в том числе и на текущих пользователей VKUI v7.
+Тем не менее новое, доступное поведение можно включить с помощью нового свойства `accessible`. Настоятельно рекомендуем это сделать.
+Вот список изменений которые отличают поведение со свойством `accessible` от поведения `DateInput` по умолчанию:
+
+- иконка календаря видна постоянно. Раньше она была видна только если в `DateInput` нет значения;
+- календарь открывается:
+  - по клику по иконке календаря,
+  - по нажатию `<Space>`, если `DateInput` в фокусе.
+
+Раньше он открывался по клику на `DateInput`, или сразу при фокусе на `DateInput`;
+
+- при открытии календарь получает фокус. При закрытии календаря фокус возвращается на `DateInput`.
+
 > ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
 
 ```jsx { "props": { "layout": false } }
@@ -15,6 +33,7 @@ const Example = () => {
   const [closeOnChange, setCloseOnChange] = useState(true);
   const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
   const [disableCalendar, setDisableCalendar] = useState(false);
+  const [accessible, setAccessible] = useState(false);
   const [locale, setLocale] = useState('ru');
 
   return (
@@ -65,6 +84,11 @@ const Example = () => {
               Включено
             </Checkbox>
           </FormItem>
+          <FormItem top="Включить режим, в котором DateInput доступен для ассистивных технологий">
+            <Checkbox checked={accessible} onChange={(e) => setAccessible(e.target.checked)}>
+              Включено
+            </Checkbox>
+          </FormItem>
           <FormItem top="Локаль">
             <Select
               style={{ width: 100 }}
@@ -104,6 +128,7 @@ const Example = () => {
                   disablePickers={disablePickers}
                   showNeighboringMonth={showNeighboringMonth}
                   disableCalendar={disableCalendar}
+                  accessible={accessible}
                 />
               </LocaleProvider>
             </Flex>