Action Dialogs - Mega Ticket

[simonsinclair]

This ticket refers to the audit of https://bbc.github.io/gef-docs/components/action-dialogs/ - using React to build an Action Dialog.

The 'Recommended markup' section

1. The first <h3> is closed by an </h2>.
2. It's not immediately obvious why there's a trailing </body> in this example. Can we use a <!-- comment --> to explain or omit it entirely?
3. <h3 id="gef-action-dialog-label__1" should be <h3 id="gef-action-dialog__label-1"
4. <div id="gef-action-dialog-desc__1" should be <div id="gef-action-dialog__desc-1"

The 'Recommended layout' section

1. If we're in-keeping with BEM syntax, .gef-action-dialog__center should be .gef-action-dialog--center as it's a modifying rule.
2. .gef-action-dialog__desc should actually be .gef-action-dialog__content.

On 'content'

1. Everything within the .gef-action-dialog__content container should be content - this includes .gef-action-dialog__buttons. This is because in a reusable Action Dialog component, you have one area where you can wrap your content and these buttons relate to content. The only button that should be outside of this area is the Close Action Dialog button. It would be good if we could reflect this in our documentation, especially for those building components.

On the 'inert' attribute

1. We mention using and styling for the inert attribute, but I'm not sure it's particularly well-known, so a preliminary description might be helpful. The only real information I could find about it was here (https://wicg.github.io/inert/explainer.html).

Action Dialog Properties (to add)

• title
• isCentered
• content