CODEWITHSUNDEEP
javascripthtmlreactjsstyled-components
Alex Ironside
Alex Ironside

Reputation: 5039

Making an element tabbable with Styled Components

I want people to be able to "focus" on my div with tab. So far I tried this:

const Div = styled.div.attrs({
  tabindex: '0',
})`
  margin: auto;
  width: 100%;
  max-width: 1200px;
  height: 320px;
  background: url(${({ rtl }) => determineUrl(rtl)}) no-repeat center;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  @media (min-width: ${resolutions.min.mobile}px) and (max-width: ${resolutions.max.mobile}px){
    max-height: 240px;
  }
`;

And this:

<Div tabindex={0}>...</Div>

as well as 

<Div tabindex={"0"}>...</Div>

These don't work, and can't think of anything else.

Upvotes: 1

Views: 819

Answers (1)

Adam Kosmala
Adam Kosmala

Reputation: 935

tabindex is not valid property name in React, it should be tabIndex and it accepts only numbers as values, so tabIndex={0} should do the trick for you

Upvotes: 5

Related Questions