feat: allow multiple opaque identifiers in HTML attributes

react version: #17322 Original: https://github.com/facebook/react/pull/17322#issuecomment-613104823

Currently only a single value from useOpaqueIdentifier (unreleased) can be passed to HTML attributes. However, there are HTML attributes which support multiple ids (IDREFS) like aria-labelledby. This can be used to implement various patterns such as:

export default function App() {
  const taxpayerId = React.unstable_useOpaqueIdentifier();
  const spouseId = React.unstable_useOpaqueIdentifier();
  const w2GrossId = React.unstable_useOpaqueIdentifier();
  const dividendsId = React.unstable_useOpaqueIdentifier();
  return (
    <table>
      <tbody>
        <tr>
          <td />
          <th id={taxpayerId}>Taxpayer</th>
          <th id={spouseId}>Spouse</th>
        </tr>

        <tr>
          <th id={w2GrossId}>W2 Gross</th>
          <td>
            <input type="text" aria-labelledby={[taxpayerId, w2GrossId]} />
          </td>
          <td>
            <input type="text" aria-labelledby={[spouseId, w2GrossId]} />
          </td>
        </tr>

        <tr>
          <th id={dividendsId}>Dividends</th>
          <td>
            <input type="text" aria-labelledby={[taxpayerId, dividendsId]} />
          </td>
          <td>
            <input type="text" aria-labelledby={[spouseId, dividendsId]} />
          </td>
        </tr>
      </tbody>
    </table>
  );
}

– https://codesandbox.io/s/useopaqueidentifier-for-idrefs-ocnm4

This example is from https://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_concatenate_a_label_from_several_text_nodes

This currently almost works but it concatenates the ids with "," (default toString of arrays) instead of " ".

<button aria-labelledby={[opaqueIdentifier1, opaqueIdentifier1]} /> is to me the most intuitive one since we’re passing a list of ids.

Edit: Removed the collapsible listbox example since that pattern has some a11y issue.

[gaearon]

I’ve added a label to revisit so that stale bot stops trying to close this.

[aweary]

@eps1lon I believe you can safely get around this for now by using a custom class that extends Array and overrides toString.