# a11y-hidden()

## 용도 <a href="#use" id="use"></a>

요소를 화면에서 감추되, 스크린 리더에서 읽힐 수 있도록 하는 믹스인입니다.

## 사용법 <a href="#usage" id="usage"></a>

`a11y-hidden()` 믹스인을 호출합니다. 포커스 상태에서 표시되도록 하려면 `true` 값을 설정합니다.

> a11y-hidden($focus-visible:**bool**, $focus-state-class:**string**)

```ruby
.a11yHidden {
  @include a11y-hidden();
}
```

|   매개변수(parameter)  | 유형(type) | 필수(required) | 기본 값(default) |
| :----------------: | :------: | :----------: | :-----------: |
|   $focus-visible   |   bool   |              |    `false`    |
| $focus-state-class |  string  |              |    `focus`    |

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.a11yHidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
}
```

#### 포커스 상태에서 화면에 표시할 경우

믹스인 호출 과정에 `true`를 전달합니다.

```ruby
.a11yHidden {
  @include a11y-hidden(true);
}
```

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.a11yHidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.a11yHidden--focus:focus {
  overflow: visible;
  position: static;
  clip: auto;
  width: auto;
  height: auto;
  margin: 0;
  white-space: normal;
}
```

## 로직 <a href="#logic" id="logic"></a>

`a11y-hidden()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@mixin a11y-hidden($focus-visible: false, $focus-state-class: 'focus') {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: circle(0);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;

  @if $focus-visible {
    &#{'--' + $focus-state-class}:focus {
      overflow: visible;
      position: static;
      clip: auto;
      width: auto;
      height: auto;
      margin: 0;
      white-space: normal;
    }
  }
}
```

1. 전달 받은 값이 없을 경우, 기본 값을 사용
2. 전달 받은 값이 있을 경우 포커스 상태 표시, 포커스 상태 클래스 이름을 설정하여 코드 출력

## 참고 <a href="#reference" id="reference"></a>

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)