헤드리스 UI tailwindcss로 완전히 액세스할 수 있는 메뉴 구성 요소

이 블로그는 tailwindcss를 사용하여 tailwind Labs 작성자의 Headless UI을 사용하여 메뉴 구성 요소에서 접근성을 구현하는 모범 사례 지침에 중점을 둡니다.

접근성이 중요한 이유는 무엇입니까?

2021년과 마찬가지로 웹은 많은 사람들이 정보와 상호 작용에 액세스할 수 있어야 합니다. 또한 인쇄, 오디오 및 시각 매체에 대한 장벽이 있는 장애인에게 동등한 액세스와 동등한 기회를 제공하는 것은 웹 기술을 통해 훨씬 더 쉽게 극복할 수 있습니다. 또한 이것은 Google에서 최고의 검색 결과를 제공하고 유용성에 따라 순위를 매기는 데 도움이 될 수 있으며 UX와 제품을 향상시킬 것입니다.

우리는 사용할 것입니다,

헤드리스 UI

Tailwind CSS, Tailwind UI 및 Refactoring UI의 작성자입니다.

TailwindCSS

HTML을 떠나지 않고 최신 웹 사이트를 신속하게 구축
다른 유틸리티 클래스를 통해.

HeadlessUI Dev는 Tailwind CSS와 아름답게 통합되도록 설계된 완전히 스타일이 지정되지 않고 완전히 액세스 가능한 UI 구성 요소 세트입니다.

헤드리스 UI에서 메뉴 구성요소를 빌드해 보겠습니다.

메뉴는 탐색에 사용되며 웹 페이지 작동의 중요한 부분인 기능을 제공합니다.

ReactJ에 사용

# npm
npm install @headlessui/react

# Yarn
yarn add @headlessui/react

기본 예

메뉴 버튼은 메뉴, Menu.Button , Menu.Items 및 Menu.Item 구성 요소를 사용하여 작성됩니다.

Menu.Button을 클릭하면 Menu.Items가 자동으로 열리거나 닫힙니다. 메뉴가 열리면 항목 목록이 포커스를 받고 키보드를 통해 자동으로 탐색할 수 있습니다.

import { Menu } from "@headlessui/react";

function MyDropdown() {
  return (
    <Menu>
      {/* Render no wrapper, instead pass in a button manually. */}
      <Menu.Button as={React.Fragment}>
        <button>More</button>
      </Menu.Button>
      <Menu.Items>
        <Menu.Item>
          {({ active }) => (
            <a
              className={`${active && "bg-blue-500"}`}
              href="/account-settings"
            >
              Account settings
            </a>
          )}
        </Menu.Item>
        {/* ... */}
      </Menu.Items>
    </Menu>
  );
}

위 코드는 headlessUI를 사용하여 unstyled 컴포넌트입니다.

여기서 흥미로운 점은 아래에 생성된 HTML 버전을 보면 접근성 레이블을 볼 수 있고 tailwindcss를 사용하여 아름다운 UI를 만드는 인라인 클래스가 있다는 것입니다.

<div class="w-56 text-right fixed top-16">
  <div class="relative inline-block text-left">
    <div>
      <button class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75" id="headlessui-menu-button-1" type="button" aria-haspopup="true"> 
         Options <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</div>

button 태그에서 볼 수 있습니다.

type="button" aria-haspopup="true

또한 드롭다운 콘텐츠에서

<div class="absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
     aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-10" role="menu" tabindex="0">
    <div class="px-1 py-1 " role="none">
        <button class="text-gray-900 group flex rounded-md items-center w-full px-2 py-2 text-sm" id="headlessui-menu-item-11" role="menuitem"
                tabindex="-1">
            <svg class="w-5 h-5 mr-2" aria-hidden="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 13V16H7L16 7L13 4L4 13Z" fill="#EDE9FE" stroke="#A78BFA" stroke-width="2"></path>
            </svg>
            Edit
        </button>
        <button class="text-gray-900 group flex rounded-md items-center w-full px-2 py-2 text-sm" id="headlessui-menu-item-12" role="menuitem"
                tabindex="-1">
            <svg class="w-5 h-5 mr-2" aria-hidden="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 4H12V12H4V4Z" fill="#EDE9FE" stroke="#A78BFA" stroke-width="2"></path>
                <path d="M8 8H16V16H8V8Z" fill="#EDE9FE" stroke="#A78BFA" stroke-width="2"></path>
            </svg>
            Duplicate
        </button>
    </div>
</div>

코드 분석:

드롭다운 콘텐츠 블록에는

<div class="..." aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-10" role="menu" tabindex="0">...</div>

그리고 그것의 자식 div 구조는

<div class="..." role="none">
        <button class="..." id="headlessui-menu-item-11" role="menuitem" tabindex="-1">...</button>
</div>

최종 접근성 참고 사항

1. 집중 관리Menu.Button를 클릭하면 메뉴가 전환되고 Menu.Items 구성 요소에 초점이 맞춰집니다. 포커스는 Esc 키를 누르거나 사용자가 메뉴 외부를 클릭할 때까지 열려 있는 메뉴 안에 갇혀 있습니다. 메뉴를 닫으면 초점이 Menu.Button로 돌아갑니다.

2. 마우스 상호작용Menu.Button를 클릭하면 메뉴가 전환됩니다. 열린 메뉴 외부의 아무 곳이나 클릭하면 해당 메뉴가 닫힙니다.

3. 키보드 상호작용


4. 기타
모든 관련 ARIA 속성은 자동으로 관리됩니다.
메뉴에 구현된 모든 접근성 기능에 대한 전체 참조는 the ARIA spec on Menu Buttons 을 참조하십시오.

참조

자세한 내용은 https://headlessui.dev/react/menu을 확인하십시오. 코드의 모든 정보와 예제는 문서에 더 잘 설명되어 있습니다.

결론

👏👏 확실히, https://headlessui.dev/은 모든 React 또는 VueJs 프로젝트의 첫 번째 선택입니다. 나는 당신이 당신의 프로젝트에 그것을 시도하고 그것을 즐길 것을 제안합니다!.

개발 초기부터 tailwindcss 클래스를 작성해 왔습니다. 그리고 저는 이 프레임워크가 어떻게 발전했는지에 놀랐습니다. 멋진 제품을 개발해 주셔서 감사합니다. 너희들이 그들을 따라하는지 확인하십시오.

자유롭게 생각과 의견을 공유하고 문제나 질문이 있으면 의견을 남겨주세요.

다음까지,
계속 해킹하세요, 건배