Gatsby: [v2] 추가 div 래퍼

@ reach / router는 화면 판독기가 사이트를 사용할 수 있도록하는 일환으로 포커스를 자동으로 관리 할 수 ​​있도록 추가합니다.

https://reach.tech/router/accessibility

나는 이것이 매우 어리석은 것을 알고 있지만 래핑 div가 하나만 있으면 더 좋을 것이라고 생각합니다.

도달 범위 div에 대해 특별한 것은 아닌 것 같습니다. 대신 html 속성을 추가하여 도달 범위 div를 래핑 id="___gatsby" div와 병합 할 수 있습니까?

안타깝게도이 둘을 병합하는 것은 불가능합니다. 아마도 React가 마운트 된 div를 재사용하여 @ reach / router로 작업 할 수 있습니다.

height: 100% 를 추가해야하는데 class 또는 id 가 없습니다. 앱에서 찾아 보았지만 찾을 수 없습니다. id 를 어떻게 추가 할 수 있는지 말씀해 주시겠습니까?

@colmtuite 그것은 이상적인 아니에요하지만이 그룹화부터 div 의 유일한 자식 인 <div id="___gatsby"> , 당신은 단순히 통해 타겟팅 할 수 있습니다

#___gatsby > * {
  height: 100%;
}

업데이트 : 약간 더 나은 해결책은 @ironblock이 제안한보다 구체적인 선택기를 여기에서 사용하는 것 입니다.

div[role="group"][tabindex] {
  height: 100%;
}

업데이트 2 : 2018 년에는 그렇지 않았지만 요즘에는 문제의 div ID가 gatsby-focus-wrapper 입니다. 따라서 선택기는 훨씬 덜 모호 할 수 있습니다.

#gatsby-focus-wrapper {
  height: 100%;
}

관련 문제 : https://github.com/reach/router/issues/63

나는 개인적으로 이것이 잘못된 것이며 스타일이 지정된 구성 요소를 사용하지 않는 사람들에게 문제의 원인이라고 생각합니다.

@kaishin 당신이 의미하는 바를 확장 할 수 있습니까? 오해가 정확히 무엇입니까?

@janosh 나는 도달 / 라우터 관리자가이 래퍼 div를 비활성화하거나 최소한 사용자 정의하는 방법을 제공하지 않기로 결정했습니다. 저는 시맨틱 HTML의 큰 지지자이며이 문제에 직면하기 전에 거의 알지 못했던 라이브러리에 대한 후크 역할 만하는 또 다른 래퍼 div를 처리해야한다는 점에 실망했습니다.

나는 지금 당신의 요점을 이해하고 매우 동의합니다. 비의 미적 마크 업에 대해서도 똑같이 느낍니다.
당신의 댓글 끝에 혼란 스러웠어요

... 스타일이 지정된 구성 요소를 사용하지 않는 사람들의 문제의 원인입니다.

styled-components 사용하는 사람들이 왜 영향을받지 않는지 모르겠습니다.

이 문제가 너무 불합리한 해결책으로 종결되었다고 믿을 수 없습니다.

@ danielo515 글쎄, 문제는 종속성과 관련이 있으므로 다소 이해할 수 있습니다.

이 주석은 CSS 해결 방법을 제공합니다 : https://github.com/reach/router/issues/63#issuecomment -428050999

스타일 구성 요소를 사용하는 사람들이 영향을받지 않는 이유를 알 수 없습니다.

@janosh 이 호를 연 이후로 스타일링에 아무런 문제가 없었습니다. 그래서 여기서 실제로 문제는 무엇입니까?

@LekoArts 충분한 콘텐츠가없는 경우에도 창 하단에 바닥 글을 유지하기 위해 CSS 솔루션을 중단하는 styled-components 하고 CSS 선택기를 해결하는 방법을 알고 있다고해서 래퍼 div 더 이상 의미 론적이지 않습니다.

기본적으로 본문의 아무 곳이나 클릭 한 다음 Tab 키를 누르면 가장 가까운 초점을 맞출 수있는 요소에 초점이 맞춰집니다. 그러나이 래퍼는 본문을 클릭하면 래퍼에 초점이 맞춰져 탭 순서가 요소 근처가 아닌 처음으로 재설정됨을 의미합니다. 이것이 접근성 문제인지 확실하지 않지만 요소 근처를 클릭 한 다음 탭을 눌러 초점을 맞추려고 할 때 발견 한 것입니다.

@colmtuite height : 100vh;

트윗 담아 가기
또는 플렉스로

div[role="group"][tabindex] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@Schmerb 100vh를 CSS 전용 클래스로 설정하는 것이 생성 된 코드를 조작하는 것보다 더 편리한 방법이라고 생각합니다.

뿡 빵뀨
분명히 했어야했는데 ... 100vh 앱이 뷰포트와 같은 크기의 고정 된 높이를 갖기를 원한다면 좋습니다 ...

그러나 사용 가능한 모든 공간을 차지하기 위해 앱이 필요한 경우

(본질적으로 height: 100% 가진 모든 사람이 시도하지만 부모가 정해진 키가 없기 때문에 실패 할 가능성이 높습니다)

그런 다음 Flexbox 구출합니다.

내 구체적인 사례를 더 명확히하기 위해 두 시도의 스크린 샷 :
파란색 / 주황색 테두리는 /page 구성 요소입니다. Gatsby가 배치하는 임의의 '후크'div는 공백입니다. height: 100vh 하면 공백이 뷰포트의 맨 아래로 확장되는 것을 볼 수 있습니다.

사용 flex 주요 축으로하는 (전환 flex-direction: column 대신 기본의 flex-direction: row )과 재산을 플렉스는 성장에, 당신은 매우 잘 볼 사용 가능한 모든 공간을 차지 할 수 있습니다.

height: 100vh;

display: flex; flex-direction: column; flex-grow: 1;

내가 보는 모든 것은 존재하지 말아야 할 문제에 대한 해결 방법입니다.
대상 브라우저가 Flexbox를 지원하지 않으면 어떻게합니까?

스크롤이 필요할 때 크롬에 이중 스크롤바가 표시되는`height : 100vh '를 설정할 때 버그도 발생했습니다.

비슷한 문제를 해결하는 방법은 height: 100vh; 사용하는 것보다 min-height: 100vh; 를 래핑 Layout 구성 요소에 추가하는 것입니다. 그것을 설정과 같은 것과 결합하면 :
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

이제 래핑 구성 요소는 항상 _ 최소한 _ 뷰 포트의 높이가되지만 콘텐츠가 스크롤이 필요할만큼 충분히 크면 바닥 글 요소가 화면 하단에 유지되도록 푸시됩니다.

그러나 (크지 만!) 안타깝게도 그리드는 플렉스 박스보다 브라우저 지원이 적지 만 개인적으로는 '해키'느낌이 덜합니다.

플렉스 지원을하지 않는 데 도움이되는 대답은 아니지만 페이지 하단에 바닥 글을 붙이는 깔끔한 방법일까요?

불행히도 문제의 코드 줄이 접근성을 다루지 만 접근성 오류도 발생합니다. https://github.com/reach/router/issues/257에 문제를 기록했습니다

100vh 는 Android 브라우저와 다른 의미 일 수 있습니다.
빠른 인터넷 검색에서 예제 공개 : https://stackoverflow.com/q/30148956

어떤 이유로 div[role="group"][tabindex] 는 해당 div에 어떤 ​​스타일도 적용하지 않습니다. ID #gatsby-focus-wrapper 을 지정해야했습니다.

높이 문제에 대한 합리적인 해결책이 아직 없습니까?