<input type="search"
       value="신발 브랜드"
       aria-control="search-result"
       aria-expanded="false">
<ul role="listbox"
    id="search-result">
  <li role="option">
    스케처*
  </li>
  <li role="option">
    뉴발란*
  </li>
  <li role="option">
    나이*
  </li>
</ul>

<h2 id="brand-label">신발 브랜드</h2>

<div role="combobox"
  aria-expanded="true"
  aria-labelledby="brand-label"
  aria-controls="brand-list"
>
  <input type="search"
    value="나이*"
    aria-activedescendant="opt-nik*"
    aria-autocomplete="list"
  />
</div>

<ul role="listbox" id="brand-list">
  <li role="option" id="opt-nik*" aria-selected="true">나이*</li>
  <li role="option" id="opt-newbalanc*" aria-selected="false">뉴발란*</li>
  <li role="option" id="opt-skecher*" aria-selected="false">스케처*</li>
</ul>

- <div role="button">주문하기
+ <button>주문하기</button>

+ <div role="tab">
-  <h2 role="tab">제목 탭</h2>
+  <h2>제목 탭</h2>
+ </div>

- <div role="my-role">

<Tooltip enabled={invalidPrice} placement="top">
  <span slot="message" aria-live="assertive"
        id={errorTooltipId}>
    {errorMessages.join('<br/>')}
  </span>
  <input
    name="price"
	aria-invalid={invalidPrice}
	aria-describeby={errorTooltipId}
	inputmode="numeric"
</Tooltip>

<style>
input[name="price"][aria-invalid="true"] {
  border: 1px solid red;
  background-color: rgb(255, 0, 0, 0.5);
}
</style>

<Tooltip enabled={invalidPrice} placement="top">
  <span slot="message" aria-live="assertive"
        id={errorTooltipId}>
    {errorMessages.join('<br/>')}
  </span>
  <input
    name="price"
+	class="aria-[invalid='true']:(border-error-900 bg-error-50)"
	aria-invalid={invalidPrice}
	aria-describeby={errorTooltipId}
	inputmode="numeric"
</Tooltip>

button.expanded {
  background-color: lightgray;
  & > i.chevron-icon {
    transform: rotate(0.5turn);
  }
}

button > i.chevron-icon {
  transition: transform 0.5s;
}

ul {
  position: absolute;
}

<Toolbar>
  <button type="button"
    aria-expanded={isFontListOpen}
    class={isFontListOpen ? 'expanded' : ''}
    onclick={() => isFontListOpen = !isFontListOpen}
  >
    프리텐다드 <i class="chevron-icon" />
  </button>
  <ul role="listbox" hidden={!isFontListOpen}>
    <li role="option"
      data-value="프리텐다드"
      onclick={onSelectFontValue}
    >
      프리텐다드
      <i class="selected-icon" />
    </li>
    // 기타 다른 옵션...
  </ul>
</Toolbar>

- button.expanded {
+ button[aria-expanded='true'] {
  background-color: lightgray;
  & > i.chevron-icon {
    transform: rotate(0.5turn);
  }
}

+ button[aria-expanded='true'] + ul[role='listbox'] {
+   display: block;
+ }

<Toolbar>
  <button type="button"
    aria-expanded={isFontListOpen}
-   class={isFontListOpen ? 'expanded' : ''}
    onclick={() => isFontListOpen = !isFontListOpen}
  >
    프리텐다드 <i class="chevron-icon" />
  </button>
- <ul role="listbox" hidden={!isFontListOpen}>
+ <ul role="listbox">
    <li role="option"
      data-value="프리텐다드"
      onclick={onSelectFontValue}
    >
      프리텐다드
      <i class="selected-icon" />
    </li>
    // 기타 다른 옵션...
  </ul>
</Toolbar>

li[role='option']
  > i.selected-icon {
  visually: hidden;
}

li[role='option'][aria-selected='true']
  > i.selected-icon {
  /* 선택되면 ✅ 아이콘 표시 */
  visually: visible;
}

<Toolbar>
  <button type="button"
    aria-expanded={isFontListOpen}
    onclick={() => isFontListOpen = !isFontListOpen}
  >
    프리텐다드 <i class="chevron-icon" />
  </button>
  <ul role="listbox">
    <li role="option"
+     aria-selected={true}
      data-value="프리텐다드"
      onclick={onSelectFontValue}
    >
      프리텐다드
      <i class="selected-icon" />
    </li>
    // 기타 다른 옵션...
  </ul>
</Toolbar>

<h2 id="brand-label">신발 브랜드</h2>

<div role="combobox"
  aria-expanded="true"
  aria-labelledby="brand-label"
  aria-controls="brand-list"
>
  <input type="search"
    value="나이*"
    aria-activedescendant="opt-nik*"
    aria-autocomplete="list"
  />
  <ul role="listbox" id="brand-list">
    <li role="option" id="opt-nik*"
        tabindex="0"
        aria-selected="true">나이*</li>
    <li role="option" id="opt-newbalanc*" tabindex="-1"
        aria-selected="false">뉴발란*</li>
    <li role="option" id="opt-skecher*" tabindex="-1"
        aria-selected="false">스케처*</li>
  </ul>
</div>

name: 쇼핑
role: region
children:
- name: shoppingbox
  role: internal frame
  children:
  - name: shoppingbox
    role: document
    children:
    - name: 
      role: generic
      children:
      - name: 
        role: generic
        children:
        - name: 
          role: tablist
          children:
          - name: 쇼핑
            role: tab
            description: 쇼핑은 광고영역입니다.
            children:
            - name: 쇼핑
              role: text leaf
          - name: 맨즈
            role: tab
            description: 맨즈는 광고영역입니다.
            children:
            - name: 맨즈
              role: text leaf
          - name: 원쁠딜
            role: tab
            children:
            - name: 원쁠딜
              role: text leaf
          - name: 쇼핑라이브
            role: tab
            children:
            - name: 쇼핑라이브
              role: text leaf
        - name: 
          role: generic
          children:
          - name: 
            role: generic
            children:
            - name: '1'
              role: text leaf
            - name: 
              role: generic
            - name: 
              role: generic
            - name: "/"
              role: text leaf
            - name: '6'
              role: text leaf
          - name: 이전 페이지
            role: button
            children:
            - name: 
              role: generic
          - name: 다음 페이지
            role: button
            children:
            - name: 
              role: generic
        - name: 
          role: tabpanel
          children:
          - name: 
            role: tablist
          - name: 
            role: list

import { test, expect } from '@playwright/test';

test('Banner contains expected elements', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  const banner = page.getByRole('banner');

  await expect(banner.getByRole('heading', { level: 1 })).toHaveText(
    /Playwright enables reliable end-to-end/
  );

  await expect(banner.getByRole('link').nth(0));
    .toHaveText('Get started');
  await expect(banner.getByRole('link').nth(1))
    .toHaveText('Star microsoft/playwright on GitHub');
  await expect(banner.getByRole('link').nth(2)).toHaveText(
    /[\d]+k\+ stargazers on GitHub/
  );
});

import { test, expect } from '@playwright/test';

test('Banner contains expected elements', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  const banner = page.getByRole('banner');

  await expect(page.getByRole('banner')).toMatchAriaSnapshot(`
	- banner:
		- heading /Playwright enables reliable end-to-end/ [level=1]
		- link "Get started"
		- link "Star microsoft/playwright on GitHub"
		- link /[\\d]+k\\+ stargazers on GitHub/
	`);
});