새 탭에서 "키보드 단축키"를 열면 클릭 전이던 페이지가 다시 열립니다

기여 UX
1

안녕하세요, 이건 버그라기보다는 예상치 못한 동작에 가깝다고 생각됩니다…

저는 Mac에서 링크를 새 탭으로 열 때 ⌘+클릭을 사용하는 습관이 있습니다. 햄버거 메뉴의 "키보드 단축키"에서 이 작업을 수행하면, 키보드 단축키가 표시되지 않는 새 탭이 열립니다.

2

해당 "링크"의 내비게이션은 앱 내에서 처리됩니다. 특정 주소를 가리키지 않기 때문에 실제로는 링크가 아니라고 할 수 있어 링크에 따옴표를 붙였습니다.

<a class="widget-link keyboard-shortcuts-link" href="" title="Keyboard Shortcuts">
  <span class="d-label">Keyboard Shortcuts</span>
</a>

href 속성이 비어 있는 것을 확인해 보세요.

모달이나 대화상자를 여는 용도일 뿐입니다. 따라서 새 탭에서 해당 링크를 열어 모달이 표시되도록 하는 것은 불가능합니다.

1개의 좋아요
3

안녕하세요, 이해합니다. 다만 사용자 입장에서 시각적으로 "키보드 단축키"가 링크처럼 보이는데, 실제로는 동작하지 않는다는 점이 의도하지 않은 동작이라고 생각되어 지적해 드리고 싶었습니다. “새 탭에서 열기” 기능이 작동하지 않는다는 점을 시각적으로 암시할 수 있는 어피던스(affordance)를 제공할 수 있다면 이상적일 것 같습니다. 물론 이 문제는 우선순위를 높일 필요는 없다고 생각합니다. 이런 문제를 겪는 사용자가 많지 않을 것 같으니까요.

4

참고로, href 속성을 빈 문자열로 설정하는 것(이것은 현재 문서에 대한 참조입니다) 대신 속성 자체를 완전히 제거하면, 대부분의 브라우저에서 링크가 새 탭으로 열리는 것을 방지할 수 있습니다.

4개의 좋아요
5

공감합니다. href가 없는 앵커 태그는 HTML5에서 유효합니다.

이를 제거하는 문제점은 링크가 탭 순환(tab index)에서 제외된다는 것입니다. 즉, 키보드나 기타 대체 입력 방식으로 해당 링크에 도달할 수 없게 됩니다.

tabindex: 0을 추가하면 이 문제를 해결할 수 있습니다.

다음과 같이 하면 됩니다.

links.push({
  action: "showKeyboard",
  className: "keyboard-shortcuts-link",
  label: "keyboard_shortcuts_help.title",
  attributes: {
    tabindex: 0
  }
});

@awesomerobot님이 href를 제거할 때 발생할 수 있는 다른 문제를 알고 계신가요?

5개의 좋아요
6

새 탭을 여는 것보다는 약간 나아진 것 같지만, 그 링크를 새 탭에서 열려고 해도 아무 반응이 없는 것이 여전히 이상하게 느껴집니다… 특히 메뉴에서 그런 방식으로 동작하는 링크가 그것뿐인 점을 고려하면 더욱 그렇습니다.

이상적으로는 어떤 경우든 키보드 모달을 여는 것이 좋습니다. /widgets/link.js.es6 파일에는 다음과 같은 코드가 있습니다.

click(e) {
if (wantsNewWindow(e)) {
      return;
    }
...

즉, 새 창/탭을 요청하는 경우 클릭 시 아무 동작도 하지 않도록 막고 있는 것으로 보입니다… 수정키가 눌린 상태에서도 모달을 열 수 있도록 그곳을 조금 재구성할 수 있을지 궁금합니다.

5개의 좋아요