사용자 정의 라디오 버튼을 두려워하지 마십시오

사용자 지정 라디오 그룹 만들기

사용자 지정 스타일 변형에 대한 요청이 발생할 때 일부 HTML 양식 요소는 일부 개발자에게 두려움을 불러일으킵니다.

선택 요소 😱

체크박스 🙀

라디오 버튼/입력 😧

오늘 우리는 라디오 입력을 잡고 약간의 기교를 부여합니다 ✨ 우리의 솔루션은 완전히 액세스할 수 있으며 기본 라디오 입력의 포커스와 확인된 상태를 사용하여 아래와 같은 것을 제공하는 몇 가지 스타일을 적용합니다.

라디오 그룹이란 무엇입니까?

한 번에 하나 이상의 버튼을 확인할 수 없는 라디오 버튼으로 알려진 확인 가능한 버튼 세트입니다.

믿거나 말거나, 한 번에 하나의 버튼만 선택할 수 있는 구식 라디오의 누름 버튼과 유사한 방식으로 보이고 작동하기 때문에 라디오 버튼이라고 합니다.

접근성

우리의 솔루션은 대체 요소를 사용하고 모든 곳에 aria 속성을 적용해야 하는 대신 기본 라디오 입력 요소를 사용하기 때문에 아래의 WCAG 지침을 준수합니다.

Tab 및 Shift + Tab는 포커스를 라디오 그룹 안팎으로 이동해야 합니다. 포커스가 라디오 그룹으로 이동하는 경우:

라디오 버튼이 선택된 경우 선택한 버튼에 포커스가 설정됩니다.

선택된 라디오 버튼이 없으면 그룹의 첫 번째 라디오 버튼에 포커스를 설정해야 합니다.

Space 아직 선택되지 않은 경우 초점이 맞춰진 라디오 버튼을 선택해야 합니다.

Right Arrow 및 Down Arrow는 그룹의 다음 라디오 버튼으로 초점을 이동하고 이전에 초점을 맞춘 버튼을 선택 취소한 다음 새로 초점을 맞춘 버튼을 선택해야 합니다. 포커스가 마지막 버튼에 있으면 포커스가 첫 번째 버튼으로 이동합니다.

Left Arrow 및 Up Arrow는 그룹의 이전 라디오 버튼으로 초점을 이동하고 이전에 초점을 맞춘 버튼을 선택 취소한 다음 새로 초점을 맞춘 버튼을 선택해야 합니다. 포커스가 첫 번째 버튼에 있으면 포커스가 마지막 버튼으로 이동합니다.

HTML 만들기

라디오 버튼 자식의 부모가 될 라디오 그룹 구성 요소를 생성하여 시작하고 radiogroup 역할을 추가하여 이 정보를 보조 기술에 신호로 보내겠습니다.

다음은 라디오 구성 요소입니다. 여기서 아이디어는 레이블 요소를 사용하여 사용자 지정 라디오 버튼의 스타일을 지정하는 것입니다. 장점은 레이블이 htmlFor React 속성을 통해 입력 요소와 연결되어 있으므로 레이블과의 상호 작용이 라디오 입력으로 전파되어 입력 요소의 상태에 따라 레이블 스타일을 지정할 수 있다는 것입니다.

import React, { PropsWithChildren } from "react";

export const RadioGroup = ({ children }: PropsWithChildren<{}>) => {
  return (
    <div
      role="radiogroup"
      className="radio-group"
      aria-labelledby="group_heading"
    >
      <h2 id="group_heading">Select a button</h2>
      {children}
    </div>
  );
};

export const Radio = ({
  children,
  id,
  name
}: PropsWithChildren<{ id: string; name: string }>) => {
  return (
    <>
      <input type="radio" id={id} name={name} />
      <label className="radio-label" htmlFor={id}>
        {children}
      </label>
    </>
  );
};

스타일

* {
  font-family: "Inter";
  --grey: #ededed;
  --blue: #0037fc;
}

h2 {
  margin: 0;
  font-weight: bold;
}

p {
  margin-bottom: 0;
}

.radio-group {
  display: flex;
  gap: 16px;
  margin-top: 32px;
}

/* Hide the native radio input */
input[type="radio"] {
  appearance: none;
  opacity: 0;
  position: absolute;
}

label {
  position: relative;
  padding: 48px 16px;
  border-radius: 8px;
  box-shadow: 2px 2px 6px 0px var(--grey);
}

label::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  right: 16px;
  top: 16px;
  background: var(--grey);
}

/* When the radio is checked, style the label accordingly */
input[type="radio"]:checked + label {
  background: #ebefff;
  outline: solid 3px var(--blue);
}

/* When the radio is focused, style the label accordingly */
input[type="radio"]:focus + label {
  outline-offset: 3px;
}

/* When the radio is checked, style the pseudo-element accordingly */
input[type="radio"]:checked + label::after {
  background: var(--blue);
}

코드 샌드박스는 아래에서 사용할 수 있습니다.

https://codesandbox.io/s/nameless-tree-d8yhww

요약

우리의 솔루션은 키보드를 사용할 때 WCAG 지침을 준수하며 라디오 버튼이 포커스 및 체크 상태에 있을 때 액세스 가능한 스타일이 적용됩니다.

행복한 형제자매처럼 서로 나란히 입력 및 레이블 요소를 설정하여 이를 달성했습니다.

안녕.