cloudfour / cloudfour/cloudfour.com-patterns

Consider matching DOM order for Sky Nav elements when JS is disabled for better accessibility

Đang mở
#1,994 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
⁉️ question 🎨 design 🦮 a11y
Ngôn ngữ chính
SCSS
Star
26
Fork
3
Merge trung bình
19 giờ 32 phút
Pull request đã merge (30 ngày)
81

Mô tả

When JS is disabled:
- the "Menu" button is hidden
- the Sky Nav is open

## Current implementation

The DOM order of the nav does not match the visual order in the current solution:
Current tab order count | Current tab order in action
--- | ---
Screen Shot 2022-08-02 at 9 39 01 AM | ![source-order-current](https://user-images.githubusercontent.com/459757/182430440-70c954b7-2f48-44eb-ba57-ec6de151e657.gif)

## Proposed solution

We should consider allowing the visual order to match the DOM order when JS is disabled. We might even consider centering the Cloud Four logo since the button is not shown:
Proposes tab order count | Proposed tab order in action
--- | ---
Screen Shot 2022-08-02 at 9 46 09 AM | ![source-order-proposal](https://user-images.githubusercontent.com/459757/182430606-c5ad6067-3ca0-4dbb-9830-c53b0ec94eb5.gif)

## Other considerations

- The gradient no longer matches the original design in the proposed solution

## Related

- https://web.dev/visual-order-follows-dom/

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.