ba-flight-number
A simple component to show a customers flight number and the logo of the airline they are flying with.
Airframe
Web Components
React
React Native
Anatomy
Airline icon
The logo of the airline operating the flight. A fallback icon is shown if no name is provided, the name has no matching icon, or the image fails to load
Flight number
The flight number text, e.g. "BA 1234"
Design Documentation
We currently only have icons that work correctly with white backgrounds. Do not use the other page-segment themes as the colour contrast ratio will not meet the WCAG standards.
If ba-flight-number is used within ba-content the typography settings and size of the icon will be determined by the element it is nested in. For example if the component is nested within a <h1> tag, then it will use the same typography settings as the <h1> element.
Live Demo
<ba-flight-number name="british-airways" flight-number="BA 1234"></ba-flight-number>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
flightNumber(required) |
flight-number |
The flight number to show | string |
undefined |
name |
name |
Name of the icon to be shown | CarrierName | undefined |
'default' |
Permitted ARIA roles
- None
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <Plain text> |
Parent components
ba-flight-number can be slotted into:
<ba‑page‑segment><ba‑hero><ba‑grid><ba‑flex><h1><h2><h3><h4><h5><h6><p>
Usage
Basic usage
In most scenarios the flight number will consist of a flight number and an icon
<ba-flight-number name="british-airways" flight-number="BA 1234"></ba-flight-number>Using the fallback icon
If the airline does not have an icon available, simply do not provide the name prop to show a fallback icon
<ba-flight-number flight-number="BA 1234"></ba-flight-number>If a name is provided that does not have a corresponding icon, or the image fails to load, the fallback icon will be shown
<ba-flight-number name="unknown-icon" flight-number="BA 1234"></ba-flight-number>Changing the font size
The font size of the flight number can be adjusted by using the ba-content component to wrap the ba-flight-number component. The typography settings and size of the icon will be determined by the element it is nested in. For example, if the component is nested within a <h1> tag, then it will use the same typography settings as the <h1> element.
<ba-content>
<h1>
<ba-flight-number name="british-airways" flight-number="BA 1234"></ba-flight-number> used within a heading tag.
</h1>
</ba-content>Guidelines
Screen readers may read out the flight number incorrectly. For example a flight number of BA 1234 may be read out as "Ba one thousand two hundred and thirty four". This is by design as altering the text to be read out correctly for screen readers can hamper the accessibility of the component when trying to navigate through it. Also screen reader users are used to this kind of behaviour and can easily navigate through the text one character at a time if needed.
Keyboard navigation
No keyboard interactions have been defined for this component.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-flight-number is only used on a white background, not on other page-segment themes
- If used within ba-content, the typography and icon size are determined by the element it is nested in
Accessibility checklist
- The flight number text is displayed as is and additional fixes to modify how it is read by screen readers are not applied
These checks are handled by the component and do not need to be repeated each time it is used.
- The fallback icon is shown when no name is provided, an unrecognised name is provided, or the image fails to load
- Colour contrast for the icon and text meets WCAG standards on a white background
- High contrast mode adjustments