[CSS] button tag role

const [onScreen, setOnScreen] = useState('1');

const handleOnScreen = e => {
  setOnScreen(e.target.value);
};

<S.CategoryButtonWrap role="tablist">
     <button
       role="tab"
       aria-selected={onScreen === '1'}
       value="1"
       onClick={handleOnScreen}
     >
       수정 심사중
     </button>
     <button
       role="tab"
       aria-selected={onScreen === '2'}
       value="2"
       onClick={handleOnScreen}
     >
       수정 완료
     </button>
     <button
       role="tab"
       aria-selected={onScreen === '3'}
       value="3"
       onClick={handleOnScreen}
     >
       수정 반려
     </button>
</S.CategoryButtonWrap>

export const CategoryButtonWrap = styled.div`
  margin-bottom: 12px;

  button {
    width: 109.3px;
    padding: 0 12px 12px 12px;
    border: none;
    border-bottom: 2px solid #f9f9f9;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    color: #bcbcbc;

    &[aria-selected='true'] {
      border-bottom: 2px solid #ff6a21;
      color: #ff6a21;
    }
  }
`;