Licensing alert blocks the CP but has no dialog role, name, inert page, or Escape handler

[bpmore]

Bug description

The licensing alert that opens on first load of a trial or unlicensed site covers the page and swallows every click until dismissed, but it has none of the semantics of a dialog.

Measured on first load of /cp/dashboard:

document.querySelector('[role=dialog],[role=alertdialog]')  ->  null
containing chain    ->  div.portal-targets -> div -> body
                        no role, no aria-modal, no aria-label/labelledby
elements with [inert]  ->  0
Tab cycle           ->  Snooze <-> Manage Licenses only
Escape              ->  does not dismiss

Focus is moved into the alert, so a screen reader user is dropped into an unnamed two-button loop with no announcement of what happened or that the page behind is blocked. The page behind is not marked inert, so the accessibility tree still exposes it as available while every click is being swallowed. Escape does nothing, which breaks the convention every other overlay in the CP follows.

The command palette in the same codebase gets this right: role="dialog", focus moved inside, rest of the page inert, Escape closes. The licensing alert should use the same primitive.

Source: https://github.com/statamic/cms/blob/v6.31.0/resources/js/components/LicensingAlert.vue, mounted from https://github.com/statamic/cms/blob/v6.31.0/resources/js/pages/layout/Layout.vue

WCAG 2.1 SC 4.1.2 Name, Role, Value and SC 1.3.1 Info and Relationships (both Level A).

How to reproduce

1. composer create-project statamic/statamic
2. Set STATAMIC_PRO_ENABLED=true with no license key, so the site is in trial mode
3. Create a super user and log in to /cp
4. With the "Licensing Alert" showing, run in the console:

document.querySelector('[role=dialog],[role=alertdialog]')  // null
document.querySelectorAll('[inert]').length                 // 0

5. Press Escape. The alert stays open.

Suggested fix

Render it through the same dialog primitive the command palette uses:

• role="alertdialog" and aria-modal="true"
• aria-labelledby pointing at the "Licensing Alert" heading
• mark the page behind it inert
• map Escape to Snooze

Additional note, worth flagging separately

Because this overlay is up on first load and is not marked as a dialog, any automated accessibility tooling pointed at a trial Statamic install silently measures the alert instead of the page behind it. The first pass of the audit that found this returned near-identical results for 48 different CP screens before we realised what was being scanned. Anyone benchmarking Statamic's CP accessibility will get wrong numbers until this is fixed or they know to dismiss it first.

Environment

Environment
Laravel Version: 13.30.1
PHP Version: 8.4.23
Composer Version: 2.10.2
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 0
License Key: Not set
Sites: 1
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.31.0 PRO

Installation

Fresh statamic/statamic site via CLI

Additional details

Found during a WCAG 2.1 AA audit of a vanilla composer create-project statamic/statamic install with no addons and no custom code. Tested with axe-core 4.x on Chromium 153 at 1440x1000, plus manual keyboard traversal. Source references point at v6.31.0.

[bpmore]

Follow-up: I found the root cause, and it's broader than the licensing alert.

ui/Modal/Modal.vue renders its content as a plain <div data-ui-modal-content> with no role, no aria-modal and no aria-labelledby:

https://github.com/statamic/cms/blob/v6.31.0/resources/js/components/ui/Modal/Modal.vue#L193

The licensing alert is one consumer of it. So is every confirmation dialog in the CP, including the ones guarding deletion. Measured on the delete-entry confirmation:

{ "role": null, "text": "Delete Are you sure you want to delete this? Cancel Delete",
  "buttons": ["Cancel", "Delete"] }

Filed as #15410 with the full list of affected components. Fixing Modal.vue should close this issue too — the Escape handling reported here is the one part that may still need handling separately, since dismissible: false is passed deliberately in some places.

I'd suggest keeping this open until #15410 lands, then re-checking the alert specifically.

[bpmore]

Status update now that #15414 has merged.

LicensingAlert.vue imports and renders ui/Modal, so it inherits that fix directly:

https://github.com/statamic/cms/blob/v6.31.0/resources/js/components/LicensingAlert.vue#L2

That resolves the two biggest parts of this report — the alert now gets role="dialog", aria-modal="true" and an aria-labelledby pointing at its "Licensing Alert" title. A screen reader user will be told a dialog opened and what it is called, which was the core of the problem.

Two things from the original report are not covered by #15414:

1. The page behind is still not inert. The merged diff adds the role and the name but no inertness, so the content behind the alert stays in the accessibility tree while every click is being swallowed. Reka's DialogContent (which the command palette uses) handles this; ui/Modal does not.

2. Escape still does not dismiss it. That may well be deliberate — Modal takes a dismissible prop and a licensing notice is a reasonable thing to make deliberate — in which case the right answer is "won't fix" rather than a change. Your call.

Happy for this to be closed if you consider (1) and (2) out of scope, or to leave it narrowed to just those two. Either way the headline defect is fixed — thanks to @lazerg for the quick turnaround.