Data Model

Traffic lights are simple state machines where each color is a state and each state is shown for a fixed duration before moving to the next. We can capture the state information (how long to remain in each color and which color to transition to) using a simple JavaScript object:

const config = {
  red: {
    duration: 4000,
    next: 'green',
  },
  yellow: {
    duration: 500,
    next: 'red',
  },
  green: {
    duration: 3000,
    next: 'yellow',
  },
};

The next field makes the component a timed state machine.

Within the TrafficLight component, currentColor is a ref. A watchEffect schedules the next setTimeout by looking up the current entry in config, and the callback advances the state to that entry's next color. onUnmounted clears the pending timer so it cannot update a removed component.

Rendering

The rendering of this component is straightforward and can be achieved with Flexbox. With Flexbox, it's also easy to change the layout of the lights from a vertical one to a horizontal one just by changing the flex-direction property.

Vue style and class bindings render the current light and layout, while the polite live region and changing aria-label expose the active color to assistive technology.

Component API

It's a good practice to make components reusable by allowing customization of:

• What the states are.
• Next states.
• Each state's duration.
• The initial state.
• Traffic light layout (certain countries use certain layouts).

We also define the color of each light within the config object so that the TrafficLight component is both state and color agnostic. It's even possible to create two-color and four-color traffic lights just by modifying the config object without having to modify the TrafficLight component's implementation.

Test cases

• Observe that each light shows up for the specified duration.
• Observe that the lights transition to the next state correctly after the specified duration.

Accessibility

For a11y reasons, we add an aria-label to the component to indicate the current light and aria-live="polite" to announce the current active light. The contents of the component (the lights) are for visual purposes and aren't important to screen readers; they can be hidden with aria-hidden="true".