Accessibility: missing tab navigation support for night shift toggle button and focus indicator styles for few other elements inside sidebar

[heybran]

Issue Summary

1. Missing tab navigation support

The night shift toggle button appears to be inaccessible to tab navigation due to its missing tabindex attribute.

2. Missing tab focus indicator style, therefore users are not aware of which element is currently being focused

1. Search button (below screenshot is when it's currently being focused by tab)

---

2. Toggle sidebar button (below screenshot is when it's currently being focused by tab)

---

3. Open site in new tab link (below screenshot is when it's currently being focused by tab)

---

4. Toggle custom post types button (below screenshot is when it's currently being focused by tab)

---

5. User avatar button (below screenshot is when it's currently being focused by tab)

Steps to Reproduce

1. Open the Ghost admin
2. Attempt to tab through the items inside the sidebar

Ghost Version

6.4.0

Node.js Version

22.19.0

How did you install Ghost?

CLI

Database type

MySQL 8

Browser & OS version

Brave browser & macOS 15.3

Relevant log / error output

Code of Conduct

• I agree to be friendly and polite to people in this repository

[abdultalha0862]

@heybran Thank you for raising this issue. Currently, I am working on this issue.

[abdultalha0862]

@heybran Can you provide a video so that it will be clear to the contributors to effectively understand the issue and work on it.

[heybran]

Hey @abdultalha0862

If you try to tab though the items in the sidebar, you will find that for the items I listed above, they need a styles applied to their focus state, in order for the users to know which UI element is focused at the moment. It's the same idea when you navigate the website using screen reader, the screen reader will announce the element back to you, so you know which actions to perform.

If it's still not clear, I can upload a video when I got a bit of more time.

[abdultalha0862]

@heybran I am grateful for your detailed explanation. I understand you may be busy, and if possible, I would appreciate it if you could share the video or other resources. Otherwise, I will do my best to understand the issue.