Code editor

A code editor is a versatile Monaco-based text editor that supports various programming languages.

Accessibility

To implement an accessible PatternFly code editor:

  • Ensure any code editor controls can be navigated to and interacted with via keyboard and other assistive technologies such as screen readers.
  • Provide descriptive aria-label and tooltips to code editor controls that only display an icon. Refer to our tooltip accessibility documentation for more information on accessible tooltips.
  • Update a tooltip's content if the code editor control triggers an action that isn't immediately obvious to users, such as clicking a "copy to clipboard" control.
  • Provide a shortcuts menu that can be accessed via mouse, keyboard, or other assistive technologies such as screen readers, especially when using custom, unfamiliar shortcuts.
  • Include keyboard shortcuts for both PC and Mac keyboards

Testing

At a minimum, a chip and chip group should meet the following criteria:

  • Tab navigates to the next control or to the code editor, Down Arrow while the code editor wrapper is focused navigates into the code editor, and Shift + Tab navigates to the previous control or out of the code editor.
  • Enter or Space should activate or trigger a button control.
  • An aria-label will provide an accessible name to the control itself for assistive technologies such as screen readers, while a tooltip will convey the same information visually to users navigating via keyboard only.
  • For example, clicking a control that copies content to the clipboard does not on its own convey that the action successfully triggered. Updating the tooltip content to "Copied to clipboard" will notify users that the action was successful.
  • A shortcuts menu must be provided especially when the code editor has custom, unfamiliar controls.

React customization

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

Prop
Applied to
Reason
copyButtonAriaLabel="[text that labels the copy button]"
CodeEditor
Adds an accessible name to the code editor's copy button.
copyButtonSuccessTooltipText="[tooltip text to display upon successful copy]"
CodeEditor
Provides text to the code editor's copy button after being clicked. This should typically be a succinct success message, such as "Copied to clipboard".
copyButtonToolTipText="[tooltip text to display for the copy button]"
CodeEditor
Text to display inside the code editor's copy button tooltip. This should typically be the same as the copyButtonAriaLabel.
downloadButtonAriaLabel="[text that labels the download button]"
CodeEditor
Adds an accessible name to the code editor's download button.
downloadButtonToolTipText="[tooltip text to display for the download button]"
CodeEditor
Text to display inside the code editor's download button tooltip. This should typically be the same as the downloadButtonAriaLabel.
toolTipCopyExitDelay={[number in millseconds]}
CodeEditor
The delay in milliseconds before the code editor's copy button tooltip transitions out. Typically it is best to avoid making this delay 0 or too low in general, as it may make it difficult for users with motor control issues to hover the tooltip and keep it displayed long enough to read its content.
toolTipDelay={[number in millseconds]}
CodeEditor
The delay in milliseconds before any of the code editor's tooltips transition out. Typically it is best to avoid making this delay 0 or too low in general, as it may make it difficult for users with motor control issues to hover the tooltip and keep it displayed long enough to read its content.
uploadButtonAriaLabel="[text that labels the upload button]"
CodeEditor
Adds an accessible name to the code editor's upload button.
uploadButtonToolTipText="[tooltip text to display for the upload button]"
CodeEditor
Text to display inside the code editor's upload button tooltip. This should typically be the same as the uploadButtonAriaLabel.
aria-label="[text that labels the code editor control button]"
CodeEditorControl
Adds an accessible name to the code editor control button.
tooltipProps={{props object for the code editor control tooltip}}
CodeEditorControl
An object of tooltip props for the code editor control button. Refer to our tooltip props documentation for more information. Typically the content of a code editor control tooltip should be the same as its aria-label.

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 code editor control]"
.pf-v6-c-code-editor__controls > button
Adds an accessible name to a code editor control button. Required when the control button content is only an icon.
aria-hidden="true"
.pf-v6-c-code-editor__controls > button > i
Removes the control button icon from the accessibility tree, preventing assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it. Required if the control button contains an icon.