About modal

An about modal displays information about an application like product version number(s), as well as any appropriate legal text.

Accessibility

To implement an accessible PatternFly about modal:

Provide an aria-label to the about modal if there is no product name heading.
Ensure any brand image has a valid alt attribute, either a string or an empty string ''.
Ensure the first focusable element or the about modal itself receives focus when it is opened.
Ensure content behind the about modal cannot be interacted with or navigated to via mouse, keybaord, or other assistive technologies such as screen readers.
Ensure the element that previously had focus before the about modal was opened receives focus upon closing the about modal.

Testing

At a minimum, an about modal should meet the following criteria:

An aria-label is passed if the about modal does not have a product name heading.This gives the about modal an accessible name, providing context of its purpose or content to users.
If there is a brand image, it has a valid alt attribute.If the image is purely decorative then an empty string should be passed as a value so that the image is not exposed to assistive technologies.
The first focusable element, or the about modal itself, receives focus when the about modal is opened.
Any content behind the about modal cannot be interacted with or navigated to.
The last element to have focus before the about modal was opened should receive focus after it is closed.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Prop	Applied to	Reason
`brandImageAlt="[alt text of the brand image]"`	`AboutModal`	Adds alternative text for the brand image passed to `brandImageSrc`. Typically this should either be an empty string `''` if the brand image is purely decorative, or the product name.
`aria-label="[text that labels the about modal]"`	`AboutModal`	Adds an accessible name to the about modal. Required when the `productName` prop is not passed in, and typically will be the same as the product name.
`closeButtonAriaLabel="[text that labels the close button]"`	`AboutModal`	Adds an accessible name to the close button of the about modal. By default the value is "Close Dialog".
`disableFocusTrap`	`AboutModal`	Disables the focus trap of the about modal. Read our additional considerations before passing this prop in.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class	Applied to	Reason
`aria-label="[text that labels the about modal]"`	`.pf-v5-c-modal-box`	Adds an accessible name to the about modal. Required when there is not visible product name heading. Typically the value passed in will be the product name itself.
`aria-labelledby="[id of the element that labels the about modal]"`	`.pf-v5-c-modal-box`	Adds an accessible name to the about modal. Required when there is a visible product name heading.
`role="dialog"`	`.pf-v5-c-modal-box`	Adds an accessibile role to the about modal. Required.
`aria-modal="true"`	`.pf-v5-c-modal-box`	Marks the dialog as a modal. Required.
`alt="[alt text of the brand image]"`	`.pf-v5-c-about-modal-box__brand-image`	Adds alternative text for the brand image. Typically this should either be an empty string `''` if the brand image is purely decorative, or the product name.
`aria-label="[text that labels the close button]"`	`.pf-v5-c-about-modal-box__close > .pf-v5-c-button`	Adds an accessible name to the close button of the about modal.

Additional considerations

Consumers must ensure they take any additional considerations when customizing an about modal, using it in a way not described or recommended by PatternFly, or in various other specific use-cases not outlined elsewhere on this page.

Focus trap and focus management

When using the HTML implementation of the about modal, or when passing the disableFocusTrap prop in the React implementation, it is up to the consumer to ensure proper focus trapping and focus management is implemented, as outlined in the accessibility section.

Without taking these considerations, it may make it more difficult for users to navigate or interact with the about modal, especially if it is appended towards the end of the document body. Issues can include, but aren't limited to:

Needing to navigate through large sections of the rest of the page before focus is finally placed within the about modal
Being able to navigate outside of the about modal once reaching the end of its contents, which may be confusing for users
Not having any visual indication what element is focused when the about modal is closed
Needing to repeatedly navigate through the same content after closing the about modal just to get back to where focus was before it was opened