What is this thing called?
You can see the element but you cannot name it, so you cannot search for it and you cannot ask an agent to build it. Describe it in your own sloppy words. You get the real name in Arabic and English, the symbol it carries in code, and a prompt you can paste straight into your coding agent.
Search understands Arabic in any spelling, and Franco-Arabic too. Type "zorar" or "shreet el ta2adom".
Identification key
.swipeActions / ItemTouchHelperDrag a row sideways and buttons you never knew were there slide out from under it.
FloatingActionButtonThe circle parked over the content in one corner of the screen, usually a plus that starts something new.
SwipeRefreshLayout / .refreshableYou drag the list down a little and let go, and a spinner brings in whatever is new. There is no button; you have to already know it is there.
UIAlertController .actionSheetThe short list of commands that rises from the bottom edge, red delete at the top and cancel sitting on its own at the bottom.
IntersectionObserverThe list that refills itself. Every time you reach the bottom, ten more arrive and the footer moves further away.
IntersectionObserverThe list beside the article, with one link lit up on whatever section you have scrolled to.
text-overflow: ellipsisThe long name that gets cut and leaves a "…" behind, with the rest still reachable somewhere.
role="radiogroup"The joined row of buttons where one stays lit, and the highlight slides over to whichever you press.
aria-roledescription="carousel"The strip that flips through banners with two arrows and a row of dots. Most people only ever see the first slide.
popover="auto" + role="dialog"The small box that opens next to a button, holds things you can press, and closes the moment you click outside.
role="dialog" + role="combobox"Hit Cmd+K, type the name of what you want, and it runs before you have found the menu it lives in.
role="menu" + role="menuitem"The panel that opens from a three dot button or a right click, where every row runs a command and then it closes itself.
<header> + <nav>The strip across the top of every page: logo at one end, section links beside it, search and account at the other end.
<aside> / <nav>The column down the side of an app that holds every page, and stays put wherever you go.
<hr> / role="separator"One thin line carrying three different meanings. Your eye cannot tell them apart; the accessibility tree can.
<article>The box with a picture, a title, two lines of text, and a button. Everyone just calls it a card.
<table> + <th scope>Rows and columns that let you compare numbers straight down a line, with a header you press to re-sort.
<img alt> / AvatarGroupThe little circle with a photo in it, and your initials when there is no photo.
role="alert"The message that keeps its place in the page and never leaves on its own, either beside the field or as a strip across the top.
role="status" / badgeContentThe small number parked on the corner of an icon. You cannot press it, you press the icon.
role="progressbar"The bar tells you how far along you are. The spinner only tells you to wait.
<input type="file">Press it and your computer opens its own file window, or drag the file straight in from the desktop.
role="combobox"Type two letters and the list underneath shrinks until the thing you wanted is the only one left.
<input type="text">The box you type your name into. The plainest thing on the page, and the one with the most parts nobody can name.
<input type="range">The line with a handle you drag, and the number moves with your finger.
role="radiogroup"The row of little circles where picking one empties the one you picked before.
<input type="checkbox">The little square you tick. Check as many as you want, and none of them cancels another.
<label for>The label on top, the small line underneath, and the error text. One unit, and every piece has its own job.
BottomSheetDialog / .presentationDetentsThe panel that comes up from the bottom edge and parks halfway. Flick it back down and it goes away.
TabView / NavigationBarThe strip of icons glued to the bottom of a phone app. Each one is a whole section that remembers where you left it.
role="dialog" / inset-inline-startThe panel that slides in from one edge and leaves the page still showing behind it.
<Empty> / noRowsOverlayThe screen you land on when there is nothing to show. It still has to tell you what to do next.
<button> / role="option"The little capsule you press to filter by. The × on its edge removes it.
role="switch"The little switch that takes effect the moment you press it. There is no Save button and nothing to wait for.
<nav aria-label="pagination">The row of numbers under the results. Unlike infinite scroll, page 7 has a link you can send.
role="dialog" aria-modal="true"The window that dims the page behind it and will not let you past until you answer.
<select> / role="listbox"The box with the little down arrow that opens a list so you pick one thing.
role="tooltip" + aria-describedbyThe small bubble that appears when you rest the pointer on an icon and tells you what it does.
role="tablist"The row of labels you click to swap the panel underneath, without leaving the page.
aria-current="step"The row of numbered circles above a form that tells you which step you are on and how many are left.
aria-busy="true"The grey outline of the page that shows before the data lands, with a light that sweeps across it.
aria-expanded + aria-controlsA stack of headers. Press one and its panel opens underneath, and the one that was open usually closes.
role="status"The small box that slides into a corner, says "Saved", then disappears on its own.
aria-current="page"The small row of links above the title that tells you where you are in the site.
Every element ships an RTL section
What mirrors when the page flips right-to-left, what must never mirror, and which logical CSS property to use instead of left and right. This is the knowledge Arabic-market developers rediscover by hand, every single day.
RTL guide