"Unable to save settings – please check your input" error lacks ARIA live region in cPanel Preferences panel

Recommended approach

To make the inline validation message announced by screen readers and ensure the Accessibility Settings toggle receives keyboard focus, follow the steps below. First, determine whether the error message is rendered server‑side (in a template) or injected via JavaScript; this decides where to add the ARIA attributes.

If the message is server‑side

1. Locate the template file for the Preferences panel (typically under /usr/local/cpanel/base/frontend/paper_lantern/templates/ or the equivalent path for your theme).
2. Find the element that outputs the text Unable to save settings – please check your input (often a <div> or <span> with a class like alert-message).
3. Add the ARIA live region directly in the markup: <div role="alert" aria-live="assertive">Unable to save settings – please check your input</div>.
4. Save the file, clear any template caches, and redeploy to a staging environment.

If the message is injected via JavaScript

1. Identify the function that creates the error (commonly a call to cPanel.notifications.showError or a custom helper that builds a DOM node).
2. When the element is created, set the attributes before inserting it into the document, e.g.:

   var msg = document.createElement('div');
   msg.textContent = 'Unable to save settings – please check your input';
   msg.setAttribute('role', 'alert');
   msg.setAttribute('aria-live', 'assertive');
   container.appendChild(msg);
   

3. If you cannot modify the source directly, use a mutation observer to add the attributes after the node appears:
• const observer = new MutationObserver(mutations => {
• mutations.forEach(m => {
• m.addedNodes.forEach(node => {
• if (node.nodeType === 1 && node.textContent.includes('Unable to save settings')) {
• node.setAttribute('role', 'alert');
• node.setAttribute('aria-live', 'assertive');
• }
• });
• });
• });
• observer.observe(document.body, { childList: true, subtree: true });
4. Deploy the observer script in a custom theme or via a plugin that loads after the Preferences panel.

Correcting keyboard focus

1. Inspect the Accessibility Settings toggle in the DOM. Ensure it is a native focusable element (<button>, <input type="checkbox">, or <a>) or has tabindex="0" if it is a custom <div>.
2. Remove any inline styles or classes that set pointer-events:none or display:none on the toggle or its ancestors.
3. Check that no ancestor element has a negative tabindex that skips the toggle; if found, adjust to tabindex="0" or remove it.
4. If the toggle is inside a hidden panel that becomes visible via JavaScript, ensure the panel receives focus before the toggle, or programmatically move focus to the toggle when the panel opens (toggleEl.focus()).
5. Test by pressing Tab repeatedly through the Preferences panel; the toggle should receive focus and be announced by a screen reader.

Documented cPanel patterns for retrofitting ARIA

The cPanel codebase already provides a notification API that creates accessible alerts:

• cPanel.notifications.showError(message) – internally creates a <div role="alert"> element.
• UI widget library components such as cPanel.ui.Button and cPanel.ui.Checkbox automatically set appropriate tabindex and ARIA attributes.
• When adding custom feedback, prefer calling the notification API instead of manually crafting the message; this guarantees the live region is present.

Verification steps

1. Open the Preferences panel in a browser, trigger the error, and inspect the error element in DevTools to confirm role="alert" and/or aria-live="assertive".
2. Run a screen reader (NVDA, VoiceOver, or TalkBack) and activate the toggle; the error message should be announced automatically without moving focus.
3. Navigate the panel with Tab and verify that the Accessibility Settings toggle receives focus and is announced.
4. In a staging environment, enable any third‑party plugins that interact with the Preferences panel and confirm they still load and function correctly.

Missing diagnostic detail

To finalize the recommendation, please confirm whether the Unable to save settings – please check your input message is generated server‑side (in a template) or injected via JavaScript. This determines whether you should edit the template file or modify the JavaScript notification path.