Как правильно установить метки aria на компоненте Select с выпадающими опциями - PullRequest
Новая
       35

Как правильно установить метки aria на компоненте Select с выпадающими опциями

0 голосов
/ 21 июня 2019

Я пытаюсь установить метки арии и настройки специальных возможностей в раскрывающемся списке «Выбор»

У меня есть компонент «Выбор», который отображает параметры.В некотором роде запутались, как устанавливать метки арии и правильно их соединять.Они должны указывать друг на друга?Например, сам выпадающий список с альтернативами? 

<StyledSelect
        key={JSON.stringify(eventTypes)}
        data-attr="eventType"
        error={item.errors && item.errors.noEvent && item.errors.noEvent[0]}
        onChange={e => onChange(e, item)}
        placeholder={intl.formatMessage(generalMessages.incident)}
        value={`${item.updates.eventType || ''}`}
        formatValue={val => eventTypes.find(type => type.id === val)
        && i18nFormat.membersEventTypes
          .getNameForType(intl, eventTypes.find(type => type.id === val))}
        variant="round"
      >
        {eventTypes
          .map(type => (
            <Option key={`${type.name}_${type.id}`} value={`${type.id}`}>{i18nFormat.membersEventTypes.getNameForType(intl, type)}</Option>
            // <Divider key=sch{`${key}_divider`} />
          ))}
      </StyledSelect>

Итак, мне нужны метки арии внутри компонента, но нужно ли указывать / ссылаться на родителя?

1 Ответ

0 голосов
/ 26 июня 2019

Чтобы немного прояснить ситуацию, вспомогательная технология требует, чтобы ваш select был помечен. Но если для этого есть несколько способов, вам следует использовать только один из них .

Использование more не делает вашу DOM недействительной в том смысле, что она не сломает ваше приложение, но это все равно, что пытаться управлять колесом в обоих направлениях одновременно, и я не уверен, как справляются программы чтения с экрана что.

Первый способ добиться этого - просто использовать элемент label.
Мне лично он нравится, потому что он имеет преимущество, заключающееся в упрощении идентификации цели select для зрячих пользователей, и позволяет вам использовать комбинацию значка и текста, если хотите. 

<label htmlFor="my-select">Colors</label>
<SelectComponent id="my-select" value="red">
  <option key="color_red">Red</option>
  <option key="color_green">Green</option>
  <option key="color_blue">Blue</option>
  <option key="color_yellow">Yellow</option>
</SelectComponent>

Вариант с select внутри label: 

<label>
  Colors
  <SelectComponent value="red">
    <option key="color_red">Red</option>
    <option key="color_green">Green</option>
    <option key="color_blue">Blue</option>
    <option key="color_yellow">Yellow</option>
  </SelectComponent>
</label>

VoiceOver в Safari будет читать это так:

VoiceOver reading the above code:

Если вы не хотите использовать посторонний элемент, вы можете просто использовать атрибут aria-label. Обратите внимание, что может быть трудно узнать, что означает select, если поблизости нет контекста. 

<SelectComponent aria-label="Basic colors" value="red">
  <option key="color_red">Red</option>
  <option key="color_green">Green</option>
  <option key="color_blue">Blue</option>
  <option key="color_yellow">Yellow</option>
</SelectComponent>

VoiceOver reading the above code:

Наконец, вы можете ссылаться на элемент как на метку. 

<span id="my-element">Colors</span>
<SelectComponent aria-labelledby="my-element">
  <option key="color_red">Red</option>
  <option key="color_green">Green</option>
  <option key="color_blue">Blue</option>
  <option key="color_yellow">Yellow</option>
</SelectComponent>

Хотя это удобно, если у вас уже есть соответствующий элемент где-то в вашей DOM, и вы не хотите создавать посторонний элемент, я бы не использовал его для элементов формы.

Метки форм имеют ожидаемое поведение (например, элемент, связанный с фокусом, при щелчке), которое вам потребуется переопределить для элемента, что является утомительной задачей.

Я склонен использовать это в основном, когда у меня есть div role="region", в котором есть содержательный заголовок.

...