Skip to content

Strings, `AccessibilityIdentifiers`, `ImageIdentifiers`

Winnie Teichmann edited this page Feb 2, 2024 · 5 revisions

Overview

In order to better organize certain items throughout the app, we have declared these struct types in the application. This way, there will be no errors using when typing image names, or accessibility identifiers.

Strings

Our strings live as extensions of String. However, they are logically organized according to their location in the app. For example, a string for the settings menu might be found at String.Settings.Homepage.OpeningScreenTitle

We are currently in the process of transferring our strings from the old unorganized system of strings to this better way. However, during that time, there are many strings that exist outside of this organizational order.

Each string is defined with a MZLocalizedString, with the following properties:

  • The key should be unique and composed of a relevant name, ended with the version the string was included in. Example: "FirefoxHomepage.Pocket.Sponsored.v103" is a string that lives under the homepage for the sponsored content in the pocket section, added in v103. The name is clear and explicit.
  • The tableName defines the name of the table containing the localized string. This specifically need to be defined for any strings that is part of the messaging framework, but since any string can be part of messaging in the future all strings should have a tablename.
  • The value is always the text that needs to be localized.
  • The comment is an explanation aimed towards people that will translate the string value. Make sure it follow l10n guidelines.

Note: you will find strings that do not have tableNames. Old strings are fine, but any new & updated strings should have a tableName value included.

AccessibilityIdentifiers

Similar to strings, we've organized our accessibility identifiers according to where they are located in the application.

We are currently in the process of converting accessibility identifiers from strings and moving them into their respective structs. While this process is ongoing, we will have a mix of both.

Image Identifiers

In order to more easily use images throughout the application, we're adding them, as we go, to the StandardImageIdentifier and ImageIdentifier struct. This will allow us to more easily work with images.

StandardImageIdentifiers

These are standardized icons that come from our Mozilla design system are used on all platforms. The icons live in the the Acorn repository.

Before adding an image provided by designers please check if an icon like this exists already in the project and if not if one is in Acorn. If an Acorn icon exists, it should be added to the project instead of the image provided by designers to avoid duplicates.

Whenever adding a new icon from Acorn, a new image set with the same name as the icon should be created (e.g. settingsLarge). The image set should use a single scale and have the checkbox "Preserve Vector Data" checked. All icons should be added as PDFs. Do not add Acorn icons in subfolder of the asset catalog. After creating the image set, the icon name has to be added to the correct size sub-struct of StandardImageIdentifiers in alphabetical order. The sizes available are Small (16x16), Medium (20x20), Large (24x24) and ExtraLarge (30x30). The correct size can be extrapolated from the icon image (e.g. settingsLarge belongs in the Large struct). The size is omitted from the constant name as the size can be inferred from the sub-struct name.

Some Acorn icons have multiple colours and can therefor not be tinted as iOS cannot handle the different colours. In this case a coloured icon in the desired tint has to be requested from design.

ImageIdentifiers

Images that are specific to Firefox for iOS should be added to ImageIdentifiers. If adding a new image asset, please be sure to add its string name to this struct in alphabetical order.

Clone this wiki locally