Electronic records (21 CFR Part 11)
E-Signature <smart-esignature>
ESignature provides the electronic signature dialog described in 21 CFR Part 11.
Accessibility Attributes
The ESignature is a form inside a dialog: native inputs with labels, a native select for the meaning, a submit button, and the browser's own password field with its autocomplete attribute, so password managers and screen readers treat it as a login form. Opening the dialog moves focus to the first field the signer has to fill in. A rejection is an alert containing the reason and the remaining attempts; the lockout is announced assertively; and the manifestation, once the application accepts the signature, is a status message with the text the record will carry.
The following ARIA attributes are used inside the ESignature:
- role="dialog" with aria-modal="false" - set on the container, named by its title through aria-labelledby. The panel sits in the page rather than over it, so nothing behind it is hidden from assistive technology.
- <label> - every field is wrapped in its label: Meaning, User ID, Password, Reason. The framework strips template ids in light DOM, so the association is by nesting, which needs none.
- autocomplete="username" and autocomplete="current-password" - set on the user ID and password fields, so a password manager fills the right ones and a screen reader announces the password field as such.
- readonly - set on the user ID during a continuous session, with aria-describedby pointing at the hint that says whose session it is and that only the password is needed.
- role="alert" - set on the message under the form. A missing field, a refusal with its reason and attempts left, and the lock are written there and read at once.
- role="status" - set on the manifestation shown after the application accepts: "Signed: Approved by Alice Smith, 2026-09-18 14:32:00 +03:00, Batch release".
- disabled - set on every field and the Sign button while the application is verifying and while the panel is locked, so the state is exposed rather than merely styled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the ESignature:
| Key | Action |
|---|---|
| Tab | Moves through the close button, the meaning, the user ID, the password, the reason, Cancel and Sign. On opening, focus lands on the first field still to be filled. |
| Enter | In the user ID, the password or the free-text reason: submits, raising signRequest when the meaning, user ID, password and (if required) reason are all given, and an alert naming the first that is missing otherwise. Enter in the meaning list or the preset reason list does not submit. |
| Escape | Cancels, raising cancel; after a signing, closes the manifestation. Does nothing while the application is verifying. |
| Arrow keys in the meaning | Choose a meaning, as in any select. |
The password field is cleared the moment Enter is pressed, before the application is asked. After a refusal focus returns to the password field; after a lock it moves to the close button. The close button and Cancel are the only controls still live.
Localization
All strings the ESignature exposes to assistive technology come from its messages property, so they can be provided in the user's language. Set locale to select a language and add a language through messages. Assigning messages replaces the whole object, so include the existing languages when adding one: el.messages = Object.assign({}, el.messages, { de: pack }); If the built-in en pack is dropped, switching back to English shows raw message keys.
The ESignature uses the following message keys:
- title, signing, hash, meaning, chooseMeaning, userId, password, reason, reasonOptional, chooseReason
- sign, cancel, close, verifying, signed, continuous, noRecord
- needMeaning, needUserId, needPassword, needReason, rejected, rejectedWith, attemptsLeft, locked
- meaningApproved … meaningWitnessed - the meanings as offered; byApproved … byWitnessed - their form in the manifestation
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. The record's title and fields are the application's and are not localized by the panel. The manifestation is built by Smart.Industrial.Audit.manifest() with the panel's localized "by" forms, so the signature the record keeps reads in the signer's language.
Additional information on WAI-ARIA for the SMART Framework can be found here.