-
-
Notifications
You must be signed in to change notification settings - Fork 184
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add hooli-style-popup homework #79
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good work!
See my comments below
</div> | ||
<nav class="header__nav"> | ||
<ul class="header__nav__items"> | ||
<li class="header__nav__item__main" tabindex="2">Menu</li> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Logically, items in navigation should be links, so please add a
inside li
<label | ||
for="more__checkbox" | ||
class="more__label" | ||
tabindex="5" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
tabindex
is not necessary in this task, and in your case, it cause problems - when you navigate with tab, focus should appear on icons first, and then on More
button.
Also when focus on More
, hidden menu is not opens by clicking space on keyboard.
<li class="header__nav__item__main" tabindex="2">Menu</li> | ||
<li class="header__nav__item__main" tabindex="3">Items</li> | ||
<li class="header__nav__item__main menu"> | ||
<label for="menu__toggle"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please, add :focus
state to this element
><img | ||
src="./popup-icons/apps.png" | ||
width="48" | ||
alt="apps" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For icons it's better set an empty alt attribute, read more here
display: flex; | ||
justify-content: flex-end; | ||
align-items: center; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please, add empty line after each block
display: grid; | ||
} | ||
|
||
input[type="checkbox"]:checked + label::after { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please, avoid styling by tags link
Tnx for the feedback. Provided links have been very insightful. Please, review my submission again - I believe all aforementioned issues have been addressed. |
hooli-style-popup
Demo |
Code base
The code is submitted in a dedicated feature branch.
Only code files are submitted.
Please, review.