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

Feat / Featured shelf cosmetic update #628

Draft
wants to merge 18 commits into
base: develop
Choose a base branch
from

Conversation

royschut
Copy link
Collaborator

Feat / Featured shelf cosmetic update

This PR improves the look and feel of the featured shelf.

Steps completed:

According to our definition of done, I have completed the following steps:

  • Acceptance criteria met
  • Unit tests added
  • Docs updated (including config and env variables)
  • Translations added
  • UX tested
  • Browsers / platforms tested
  • Rebased & ready to merge without conflicts
  • Reviewed own code

refactor(home): more code splitting
feat(home): make featured pagination acessible
refactor(home): minor improvements

refactor(home): code optimisations

refactor(home): minor style improvements
@langemike
Copy link
Collaborator

langemike commented Oct 24, 2024

Really nice improvement! I detected one visual problem; when you use the pagination dots, they move. So i need to reposition my mouse cursor anytime I want to click the dots.

Other points to consider:

  1. Curious: why have you chosen to do inline JS/CSS animations as opposed to regular CSS? I think the later makes it easier to make styling changes. I understand it to calculate a dot size, but maybe the rest could be done in regular CSS.
  2. I think we should use aria-disabled instead of disabled on the slider buttons/paginations. So the buttons can still keep their focus, while the screen-reader pronounces it's state. I know this is not the first time we have discussions about this ;-)
  3. I think we should wrap the pagination within <nav> and <ul>. So the screen-reader pronounces the amount of items and makes it easier to navigate.

@@ -27,5 +28,6 @@
"slide_next": "Next slide",
"slide_previous": "Previous slide",
"slide_right": "Slide right",
"slide_to": "Slide to page {{page}} of {{pages}}",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor; I would go with "Slide to item x of y" or "Go to item x of y". When we wrap it in an <ul>, the "x of y" part is not needed in my eyes.

I think we should only use "pages" if there are more items per slide.

Using "pages" as a metaphor, could give the assumption a page can consist of multiple items. Such as

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants