BranchName

BranchName is a label-type component rendered as an <a> tag by default that displays the name of a branch.

Page navigation navigation

When icons are used within the branch name, ensure they have a clear role and text alternative, as in their current state, they are lacking both

Ensure the visible branch text meets the minimum contrast requirement of 4.5:1
If the visible branch text is accompanied by an icon, ensure the icon has a 3:1 contrast ratio against the background
Ensure the pill like styling of the branch has a minimum contrast ratio of 3:1 against the background
Ensure there is sufficient contrast between the static text and the link text within each branch name

Interactive branch names, e.g links, must have a minimum target size of 24×24 CSS pixels. This is to ensure that the link is large enough to be easily activated by users with motor impairments

The branch name text should remain legible when resized up to 200%
When zoomed to 400% or viewed at a width of 320px, content and functionality must remain fully available without horizontal scrolling
When adding additional text spacing, make sure that the branch name text label can still be read in their entirety

In the case of the branch name that acts as a link, it must receive focus when navigating with the Tab key
Enter or Space must select the link
Since the static branch name is not interactive, it should not be focusable

Branch name links must be activated on the up event, and not the down event, or there must be a way to prevent the action from taking place on the down event

There is currently no text alternative offered for the branch with the additional icon. In the event that there is an icon within the branch, we recommend adding role="img" and aria-label="branch" to the branch icon
For branch name components that include both static and link text, ensure that visual cues, like the "branch" label, are also conveyed to screen reader users. Since this label is purely visual, it won’t be announced by assistive technology. To provide equivalent context, include a hidden text element (e.g., a <span> with "branch") and use aria-describedby to associate it with both the static and link text

The branch name links should have an accessible name that matches or includes the visible link text

A branch name that acts as a link with an href is automatically assigned the role of "link" by assistive technologies
It is keyboard focusable via the Tab key
It can be activated using the Enter key

For branch name components with both static and link text, ensure visual cues like the “branch” label are also conveyed to screen readers. Since this label is visual only, use a visually hidden <span> and aria-describedby to provide equivalent context
When a branch includes an icon, provide a text alternative by adding role="img" and aria-label="branch" to the icon element

Ensure the component reflows correctly when zoomed or resized
Ensure the branch name that acts as a link is focusable via tab and in the case of branch name that is static text, ensure it is not focusable
Ensure the branch name that acts as a link activates with the Enter key