TIL@220506

Static HTML elements with event handlers require a role

• <div>, <span> 혹은 <a>, <big>, <blockquote>, <footer>, <picture>, <strike>, <time> 등 semantic mapping이 없는 static tag에 event handler가 붙는 경우 role attribute를 명시해 줄 것
• 예) button, link, checkbox, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, textbox
• 참고자료
  • Github - jsx-eslint
  • Understanding name, role and value
  • role 목록 - w3c

ARIA(Accessible Rich Internet Applications)

• MDN - An overview of accessible web applications and widgets

interactive-supports-focus

• Elements with the 'menuitem' interactive role must be focusable.
• Github - jsx/eslint

Value must be omitted for boolean attributes

• JSX에서 boolean attribute의 값이 true인 경우, 이를 생략하는 것을 강제한 경우 ("react/jsx-boolean-value": "never")
• default: "never"
• command line에 --fix flag를 명시한 경우 fixable
• Github - jsx-eslint

Elements with the ARIA role "slider" must have the following attributes defined: aria-valuenow

• Github - jsx-eslint

Button needs explicit type attribute.

• GitHub - jsx-eslint

Prevent usage of Array index in keys

• react/no-array-index-key
• GitHub - jsx-eslint
• Static set인 경우 index 사용 가능 (https://github.com/jsx-eslint/eslint-plugin-react/issues/1123)

CSS

• button type 속성: button|submit|reset

• animation

  • animation-fill-mode
  • animation 이후에 transform 적용

• transition-delay

  • expeimental but supported by all browers.
  • MDN - transition-delay - CSS: Cascading Style Sheets

• input -> caret-color : text 현재 위치 색 지정

Animation on React

• CSS/React mount/unmount 시 애니메이션 주기
• 5가지 리액트 애니메이션 사용방법 비교 (React Animations in Depth) | by DylanJu | Medium
• How to Animate Components' Entrance and Exit in React
• Animation Add-Ons – React 공식문서
• Element.animate() - Web APIs | MDN

Misc

• 특정 브랜치 클론하기: git clone -b branchname url