Как сделать ввод с меткой в ​​React Native Web (Expo)

Question

Я использую React Native Web в Экспо. Я читал, что это делает доступность должным образом, однако я не вижу, как иметь метку для ввода:

  <TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />

https://reactnative.dev/docs/0.53/textinput

Для уточнения и потому что это странное имя, я использую React Native Web, а не React DOM:

https://github.com/necolas/react-native-web

Answer 1

Вам не нужно делать ничего особенного, вы можете просто обернуть <textInput> в метку, как если бы это было с любым вводом.

Ваш код по-прежнему выводит HTML в конце дня .

Что-то вроде (я не знаю, React, так что просто используйте этот пример)

import React, { Component } from 'react';
import { AppRegistry, TextInput } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
    <label>Text Label
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      /></label>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

Поскольку вы используете React, я предполагаю, что вам не нужно поддерживать Inte rnet Explorer 8 и ниже, поэтому обтекание ввода в метке будет корректно работать со всеми комбинациями программ чтения с экрана и браузера.

Если по какой-либо причине вам необходимо поддерживать древние элементы, то вам нужно создать id на входе, чтобы вы могли использовать for="itemID" на этикетке. (for на этикетке должен содержать id ввода). Обратите внимание, что вам нужно обернуть их в <div>, если вы делаете это из-за того, как работает React.

import React, { Component } from 'react';
import { AppRegistry, TextInput } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
    <div>
    <label for='itemID'>Text Label</label>
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
        id="itemID"
      /></div>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

Наконец, вы можете добавить aria, как и любое другое свойство

render() {
    return (
    <label>Text Label
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
        aria-labelledby="id(s)OfElement(s)ToLabelThisInput"
      /></label>
    );
  }