Evaluating dialog / modals using a11y

[THJoe]

Summary

I have a html component, where btn-good will pass the contrast checks, but btn-bad fails them (I am testing them independently in another story):

<button class="btn-good" onclick="modal1.showModal()">Open Modal</button>

<dialog id="modal1" class="modal-no-backdrop">
  <div class="modal-box">
    <h3 class="modal-title">Modal with No Backdrop, No Click Away</h3>
    <div class="modal-body">
      <p>This is a simple modal that can only be closed using the button below</p>
    </div>
    <div class="modal-action">
      <form method="dialog">
        <button class="btn-bad">Close Modal</button>
      </form>
    </div>
  </div>
</dialog>

Visually, the modal looks like this when opened:

I have created a story to test it with, and configured it to successfully open the modal when the story loads.

import MyModal "../components/modals/MyModal.html"

export default {
  title: 'Modals',
  parameters: {
    a11y: {
      config: {
      },
    },
  },
  decorators: [
    (story) => {
      // Open modal after story renders
      setTimeout(() => {
        const modalId = story().getAttribute('data-modal-id');
        const dialog = document.getElementById(modalId);
        if (dialog) dialog.showModal();
      }, 0);
      return story();
    }
  ]
};

export const MyModalTest = () => {
  const wrapper = document.createElement('div');
  wrapper.setAttribute('data-modal-id', 'modal1');
  wrapper.innerHTML = MyModal;
  setTimeout(() => {
    const dialog = document.getElementById('modal1');
    if (dialog) dialog.showModal();
  }, 100);
  return wrapper;
};
MyModalTest.storyName = 'Modal Test';

However, even with it loading and showing the inaccessible button, the tests are still passing. How can I make sure that the a11y test will evaluate the content of my modal.

If anyone is aware of a way to do this, then I would love to hear it!

Additional information

No response

Create a reproduction

No response