Skip to content
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

Merged
merged 2 commits into from
Aug 16, 2022
Merged

Conversation

bmukha
Copy link
Contributor

@bmukha bmukha commented Aug 6, 2022

hooli-style-popup

Demo |
Code base

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Please, review.

@HannaSyn HannaSyn self-requested a review August 8, 2022 17:27
Copy link
Contributor

@HannaSyn HannaSyn left a 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>
Copy link
Contributor

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"
Copy link
Contributor

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">
Copy link
Contributor

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"
Copy link
Contributor

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;
}
Copy link
Contributor

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 {
Copy link
Contributor

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

@bmukha
Copy link
Contributor Author

bmukha commented Aug 10, 2022

Tnx for the feedback. Provided links have been very insightful. Please, review my submission again - I believe all aforementioned issues have been addressed.

@bmukha bmukha requested a review from HannaSyn August 10, 2022 19:06
@HannaSyn HannaSyn merged commit fc4f1a9 into kottans:main Aug 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants