GitHub User Search App | HTML CSS Sass JavaScript (Async Await)

Hello Everyone! 👋

I finally finish my first API challenge! 🥳

This is a hard challenge for me, but I learned a lot of new things. 😀

Hopefully, I can get some feedback as well since I am still new at asynchronous programming. 😁

Now for the questions:

• There's an article where it tells me that I should use input with type="text" instead of type="search". But, is this a good thing to follow?
• Should I put the role="search" on the form element or on the div element (inside the form element)? I don't know the correct answer because MDN recommends putting the role="search" on the form element. But, Ahmad Shadeed recommends to put the role="search" on the form element to prevent overriding the default form semantic.
• I follow the GitHub alternative text of the user's avatar which is like alt="@username". But, do you think it's good enough or is there a better alternative text for the avatar?
• If you see the site, there are some statistics such as the total of public repositories, how many followers the user has, etc. My question is, should it be read as "8 Repos" or "Repos 8"? Currently, screenreaders will read the text as "Repos 8". But, if I should change it, then I would probably use flexbox to reverse the text visually. So, screenreaders would read the text as "8 Repos".
• Should I have a hidden heading above each list? For example, <h3>User statistics</h3>. I got the inspiration from the @grace-snow's solution for the "Profile card component" challenge).
• There are disabled links (or not available links) in this challenge. So, let's say the janedoe's GitHub account has no link in his/her profile. So, what do you think about the way I handle the disabled links? Currently, I make them as normal text (<span>Not Available</span>).
• Also, you might notice that janedoe has no name. So, I visually hide the h2 if the user has no name, <h2 class="sr-only">Not Available</h2>. What are your thoughts?
• Is there a better way to manage the colors for the dark mode and light mode? I used CSS variables in this project to make it easier because I could just switch the colors with prefers-color-scheme. You can see the CSS code to see how I handle the color for this project.
• If you can help me suggest a better name for any function in my JavaScript, I would really appreciate it. For example, setThemeSwitcherStateForDarkMode() is a very long name. 😆

I am aware of the HTML issues that have been generated. I added the role="list" to each ul element to make sure the ul element still has the semantic meaning when I set list-style: none;.

If you find any bugs or notice I miss something, please let me know. Also, if you spot any bad practices in my code, feel free to tell me. I will try my best to make improvements to make this solution better. 🙂

Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

Thanks!