Recipes, orders and scheduled jobs
Recipe Panel <smart-recipe-panel>
RecipePanel lists the recipes a line can be set to and loads one into the plant in a single action.
Accessibility Attributes
The RecipePanel is a list of recipes and the values loading one would write, all as text. The recipes are a listbox with one tab stop and arrow key navigation; the values are a table whose row headers are the names an operator knows. What a load did is a live region, so an operator who cannot see the panel still hears whether the plant took every value - assertively when it refused one, politely when it did not. An entry the plant refused is struck through and also carries the word refused, because a line through text is not a state a screen reader reports.
The following ARIA attributes are used inside the RecipePanel:
- role="group" - set on the container, with an aria-label naming the panel - "Line 3 recipes".
- role="listbox" - set on the recipe list, and role="option" on each recipe, so a reader hears how many products there are and which is chosen.
- aria-selected - set on each recipe: the chosen one is true and the rest false.
- aria-label - set on each recipe, as its name and how many values it writes - "Product A, 5 values" - so the size of the change is heard before it is made.
- tabindex - managed as a roving tab stop across the recipes: the chosen one is 0, the rest -1.
- role="status" - set on the outcome line, so what a load did is announced without moving focus; a refusal is announced assertively.
- role="alertdialog" - set on the confirmation, which names every value about to be written and takes focus on its confirming button.
- aria-disabled - indicates that the panel is disabled.
Keyboard Interaction
The following keyboard shortcuts are available to interact with the RecipePanel:
| Key | Action |
|---|---|
| Tab | Moves into the recipe list, landing on the chosen recipe, then to the Load button, and out again. The list is one stop however many recipes it holds. |
| Arrow Up/Down, Arrow Left/Right | Chooses the previous / next recipe and shows its values. Nothing is written; recipeSelect is raised. |
| Home / End | Chooses the first / last recipe. |
| Enter or Space | On a recipe, chooses it. On Load, asks for confirmation, or raises recipeApply when confirm is false. |
| Escape | Closes the confirmation without loading and returns focus to Load. |
Choosing a recipe never loads it. Moving through the list only changes what the panel shows; loading is a separate, deliberate press, and by default a confirmed one.
Localization
All strings the RecipePanel 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 RecipePanel uses the following message keys:
- panelLabel, noRecipes, noneChosen
- load, loading
- confirmTitle, confirmBody, confirmLoad, confirmCancel
- applied, appliedAll, notLoaded, refused
- recipeLabel
The messages also carry values and valuesPlural. The component does not use them yet.
German, French, Spanish and Chinese packs are included in the Smart.Industrial package. Strings that are also exposed as properties default to empty and fall back to the pack, so the default text stays translatable while an explicit property value takes precedence.
Additional information on WAI-ARIA for the SMART Framework can be found here.