如何使用 vanilla JavaScript 获取 HTMLElement 的 aria 属性

Question

My team uses carbon-components-react which has a TextInput component. It renders the <input /> with aria-describedBy="<some_id>" and, if the field is invalid, adds a <div id="<some_id>" /> .

I'm trying to write some React tests using @testing-library/react to check the value of the div under different conditions. I could hardcode the ID in my tests, but I hate to hardcode anything that might change in the future, especially by a 3rd party. I can't for the life of me figure out how to get the aria-describedBy attribute of my input.

test('has the right error message', () => {
  const wrapper = render(<MyComponent />);
  const input = wrapper.findByLabelText('My required field');
  fireEvent.click(input);
  fireEvent.blur(input);

  const error = document.getElementById(input['aria-describedBy']); // input['aria-describedBy'] is undefined
  expect(error.innerText).toBe('This field is required, scrub.');
});

Answer 1

As Stack Overflow often does, it provided a fantastic rubber duck, so I figured I'd finish the question and write up the answer.

Use input.getAttribute('aria-describedBy') .