Airframe GitHub Storybook
Component

ba-seat-map

Seat icons, cabins types, states and status of specific seats on BA aircraft.

Airframe

Active
Figma

Web Components

Active
Storybook Github

React

Planned

React Native

Planned Design Code Accessibility QA

Anatomy

A

Seat map headers

Lays out the seat numbers
B

ba-seat-map-row

A row containing the various ba-seat-map-buttons
C

ba-seat-map-feature

This component allows you to specify certain features of the plane. Such as exits, toilets, kitchens etc
D

Selected ba-seat-map-button

What a button looks like once a user has selected a seat

Design Documentation

The seat map component shows users exactly where they will be sitting on the aircraft, so it is important that the diagram accurately reflects the real layout.

The seat map automatically generates a descriptive label from the headers prop, so it is important that this data is correct. It announces the seat layout (column letters) and aisle positions (e.g. "Seat map. Columns A B C. Aisle is between C and D.").

Every page containing a seat map should include a key explaining all the items used within it. Visual seat-state cues have no on-page explanation for sighted users who aren't using a screen reader, so the key ensures this information is accessible to everyone.

Live Demo 

  <ba-seat-map cabin="short-haul-economy" headers="A, B, C, aisle, D, E, F">
    <ba-seat-map-row>
      <ba-seat-map-feature variant="exit-left" span="3"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-feature variant="bulkhead" span="3"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-space></ba-seat-map-space>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-feature variant="lavatory"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-feature
        span="5"
        variant="galley-kitchen"
      ></ba-seat-map-feature>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-button
        seat="1A"
        passenger-initials="JS"
        passenger="James Smith"
        price="£10"
        bassinet
        selected
      ></ba-seat-map-button>
      <ba-seat-map-button seat="1B" price="£10"></ba-seat-map-button>
      <ba-seat-map-button seat="1C" price="£10"></ba-seat-map-button>
      <ba-seat-map-space text="1" variant="aisle"></ba-seat-map-space>
      <ba-seat-map-button seat="1D" price="£11"></ba-seat-map-button>
      <ba-seat-map-button seat="1E" price="£12"></ba-seat-map-button>
      <ba-seat-map-button
        seat="1F"
        price="£12"
        bassinet
      ></ba-seat-map-button>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-button seat="2A" price="£10"></ba-seat-map-button>
      <ba-seat-map-button seat="2B" price="£10"></ba-seat-map-button>
      <ba-seat-map-button seat="2C" price="£10"></ba-seat-map-button>
      <ba-seat-map-space text="2" variant="aisle"></ba-seat-map-space>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-button seat="2E" price="£12"></ba-seat-map-button>
      <ba-seat-map-button seat="2F" price="£12"></ba-seat-map-button>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-feature variant="lavatory" span="3"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-feature variant="lavatory" span="3"></ba-seat-map-feature>
    </ba-seat-map-row>
    <ba-seat-map-row exit-row>
      <ba-seat-map-button seat="3A" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3B" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3C" price="£0"></ba-seat-map-button>
      <ba-seat-map-space text="3" variant="aisle"></ba-seat-map-space>
      <ba-seat-map-button seat="3D" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3E" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3F" price="£0"></ba-seat-map-button>
    </ba-seat-map-row>
  </ba-seat-map>

Properties and attributes

Property Attribute Description Type Default
cabin(required) cabin Sets the cabin type for the seat map, this will determine the layout and column widths "long-haul-business" | "long-haul-business-old" | "long-haul-economy" | "long-haul-first" | "long-haul-premium-economy" | "short-haul-business" | "short-haul-economy" undefined
headers(required) headers Sets the column headers for the seat map, this will populate the header row with the provided values. Use "aisle" to indicate an aisle column string undefined

Permitted ARIA roles

  • None

Slots

Slot Description Permitted elements
Unnamed slot Elements will render in the body of the component <ba‑seat‑map‑row>

Parent components

ba-seat-map can be slotted into:

Usage

Basic usage

This is a basic overview of seat map. To see more complex examples, refer to the seat map patterns in Storybook.

Basic example
<ba-seat-map cabin="short-haul-economy" headers="A, B, C, aisle, D, E, F">
    <ba-seat-map-row>
      <ba-seat-map-feature variant="exit-left" span="3"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-feature variant="bulkhead" span="3"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-space></ba-seat-map-space>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-feature variant="lavatory"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-feature
        span="5"
        variant="galley-kitchen"
      ></ba-seat-map-feature>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-button
        seat="1A"
        passenger-initials="JS"
        passenger="James Smith"
        price="£10"
        bassinet
        selected
      ></ba-seat-map-button>
      <ba-seat-map-button seat="1B" price="£10"></ba-seat-map-button>
      <ba-seat-map-button seat="1C" price="£10"></ba-seat-map-button>
      <ba-seat-map-space text="1" variant="aisle"></ba-seat-map-space>
      <ba-seat-map-button seat="1D" price="£11"></ba-seat-map-button>
      <ba-seat-map-button seat="1E" price="£12"></ba-seat-map-button>
      <ba-seat-map-button
        seat="1F"
        price="£12"
        bassinet
      ></ba-seat-map-button>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-button seat="2A" price="£10"></ba-seat-map-button>
      <ba-seat-map-button seat="2B" price="£10"></ba-seat-map-button>
      <ba-seat-map-button seat="2C" price="£10"></ba-seat-map-button>
      <ba-seat-map-space text="2" variant="aisle"></ba-seat-map-space>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-button seat="2E" price="£12"></ba-seat-map-button>
      <ba-seat-map-button seat="2F" price="£12"></ba-seat-map-button>
    </ba-seat-map-row>
    <ba-seat-map-row>
      <ba-seat-map-feature variant="lavatory" span="3"></ba-seat-map-feature>
      <ba-seat-map-space></ba-seat-map-space>
      <ba-seat-map-feature variant="lavatory" span="3"></ba-seat-map-feature>
    </ba-seat-map-row>
    <ba-seat-map-row exit-row>
      <ba-seat-map-button seat="3A" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3B" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3C" price="£0"></ba-seat-map-button>
      <ba-seat-map-space text="3" variant="aisle"></ba-seat-map-space>
      <ba-seat-map-button seat="3D" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3E" price="£0"></ba-seat-map-button>
      <ba-seat-map-button seat="3F" price="£0"></ba-seat-map-button>
    </ba-seat-map-row>
  </ba-seat-map>

React documentation coming soon.

React Native documentation coming soon.

Guidelines

Each ba-seat-map-button provides the following visually hidden text, so that screen reader users have all available information for that seat:

  • seat ID,
  • price,
  • availability status,
  • exit row,
  • extra legroom,
  • window position,
  • bassinet flag

Keyboard navigation

State: Previous element in DOM has focus

⇥ Tab

ba-seat-map has focus

State: ba-seat-map has focus

→ Arrow Right

First ba-seat-map-button is focused

State: ba-seat-map-button has focus

→ Arrow Right

Next ba-seat-map-button is focused
← Arrow Left

Previous ba-seat-map-button is focused
↓ Arrow Down

ba-seat-map-button in the next row is focused
↑ Arrow Up

ba-seat-map-button in the previous row is focused
⏎ Enter

The currently focused ba-seat-map-button is selected
⇥ Tab

Next element in DOM has focus

Usage and accessibility checklist

Use this checklist to confirm the component has been configured and used correctly.

UX checklist

  • Do provide a key of all items used
  • Do accurately provide seat map headers

These checks are handled by the component and do not need to be repeated each time it is used.

  • High contrast mode adjustments
  • In high contrast mode coloured sections should add a border to keep them visible
  • Keep icon decorative and hidden from assistive technologies where appropriate
  • All elements of the seat map are intractable with screen readers
Designing Developing Components BAgel helper QA process britishairways.com Careers Cookie policy