# One look and feel: inputs, buttons and uploads

> Every Zorlya app now uses the same text fields, buttons, keyboard focus ring and file picker, so Tab always shows you where you are. You can drop a file or choose one with the keyboard. These changes are merged and arrive with the next release.

Source: https://zorlya.com/blog/one-look-and-feel-across-zorlya-apps

By Zorlya. Published 2026-10-12. Using Zorlya. 4 min read.

Zorlya has several apps: the job seeker app, the hiring app, mail, the support app, the admin console and this website. They were built over time, and the same control looked a little different in each. A text field had a ring in one place and an outline in another. A file upload was a plain browser button in one app and a drop area in the next.

We have made them one set. This post describes the changes that matter if you use a keyboard, a screen reader or a phone. The changes are merged in our code and arrive with the next release, so you may see some of them before others.

## One style for fields

Text fields, text areas, dropdowns, checkboxes, radio buttons and switches all come from one shared set of components. A change to how a field looks is made once and reaches every app. That is the part you do not see. The part you do is that a field in the hiring app and the same field in the seeker app now behave alike.

On a computer the controls come in three heights, 28, 32 and 36 pixels. On a phone they are at least 44 pixels tall, which is the size where a thumb stops missing.

## Buttons

Buttons come from the same place. The ones that are only an icon, such as close or delete, now all carry a text name that a screen reader reads out. A button with only a tooltip has no name a screen reader can use, and our end-to-end tests fail on one.

## Keyboard focus

Press Tab and a control shows that it has focus. Before, the way it did that varied: some controls got an outline, some a ring, and a few had both at once, which looked like a double border.

Now every control does one thing. Its own border turns teal and a soft ring of the same colour, 3 pixels wide, appears around it. There is no outline on a field, so a field never shows two things at once. Links, expandable sections and tabs, which draw nothing of their own, get a single outline instead.

The colour is teal on white, at a contrast of 5.5 to 1. The accessibility guideline asks for 3 to 1 for a focus indicator, so this clears it with room. In dark mode the ring is a lighter teal.

We also added a test that fails the build if anyone writes a one-off focus style in an app, which is the reason the drift happened in the first place.

## File uploads

Every file picker is now the same component. You can reach it three ways:

- **Drop** one or more files onto the box.
- **Click** the box or the Choose files button.
- **Keyboard:** Tab to the button, then press Enter or Space.

The box states its limits in words before you pick anything, for example the file types and the size. If one file breaks a rule, that file is left out and the reason is shown, while the good files you dropped with it are kept. A list underneath shows what you have chosen, with an image preview for pictures, the name, the size, and a Remove button for each file whose label includes the file name, so a screen reader says which one it removes. The count of chosen files is announced as it changes, and errors are announced too.

On a phone or tablet there is no dragging, so the words "Drop files here or" are hidden and the button reads "Choose files".

The same family is used for your resume, a support ticket attachment, a CSV import in the hiring app, a company logo, a profile picture, and the attachments in Zorlya Mail. The contact form on this website uses the same rules. It still works as a plain upload field if scripts are blocked or the browser is old.

## What this means for accessibility

For a keyboard user, every control is reachable and shows where you are. For a screen reader user, icon buttons have names, file errors are spoken, and the number of files is announced. For someone with low vision, the focus ring is easy to see in both light and dark themes. For someone using touch, targets are large enough.

We have not had these changes reviewed by outside auditors, and we have not tested them with every screen reader and browser. Our own automated checks cover button names and colour contrast in both themes, and a guard test fails the build on a raw file input or a stray focus style. If something does not work for you, tell us through the contact page.

## What stays the same

Nothing about your data changes. This is how the controls look and behave, and the file picker enforces the limits it states.
