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(PPDSC-2218): added Scroll storybook scenario #248

Merged
merged 7 commits into from
Jul 6, 2022

Conversation

agagotowiec
Copy link
Contributor

@agagotowiec agagotowiec commented Jun 30, 2022

PPDSC-2218

What

  1. Background - why this is needed
    Missing scenario in the scroll component storybook showcasing how users can scroll inside the container using tab key.

  2. What did you do
    Added a scenario to the scroll component storybook that allow the user to scroll inside of the container using the tab key.

  3. What does the reviewers should expect
    A scenario where focus moves to first interactive element inside the container and then through the other interactive elements.

I have done:

  • Written unit tests against changes
  • Written functional tests against the component and/or NewsKit site
  • Updated relevant documentation

I have tested manually:

  • The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
  • The screen reader reads and flows through the elements as expected.
  • There are no new errors in the browser console coming from this PR.
  • When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
  • The Playground feature is working as expected

After:
Screenshot 2022-07-05 at 09 17 49

Who should review this PR:

How to test:
Please check scenario 'scroll-inside-the-container-with-tab-key' in the scroll component storybook

@agagotowiec agagotowiec added ready for review Please assist in getting this reviewed ready for design review Please assist in getting this reviewed labels Jun 30, 2022
@github-actions github-actions bot added the feature This change contains a new feature label Jun 30, 2022
@agagotowiec agagotowiec removed the feature This change contains a new feature label Jun 30, 2022
@mutebg mutebg changed the title feat(PPDSC-2218): added storybook scenario feat(PPDSC-2218): added Scroll storybook scenario Jul 1, 2022
evgenitsn
evgenitsn previously approved these changes Jul 1, 2022
Copy link
Contributor

@evgenitsn evgenitsn left a comment

Choose a reason for hiding this comment

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

Looks good 👍

Comment on lines 346 to 361
export const StoryScrollInsideTheContainer = () => (
<MainContainer>
<StorybookSubHeading>
Scroll elements inside the container using tab key
</StorybookSubHeading>
<Container width="250px" height="100px">
<Scroll scrollBar controls="static" tabIndex={-1}>
<Flex>
{Array.from({length: 10}, (_, i) => (
<Box key={getSSRId()} tabIndex={0}>{`Item ${i + 1}`}</Box>
))}
</Flex>
</Scroll>
</Container>
</MainContainer>
);
Copy link
Contributor

Choose a reason for hiding this comment

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

May I suggest using of Button instead of the Box, the approach can be the same as the tags story but just use the Button component instead.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done

@agagotowiec agagotowiec requested review from evgenitsn and mutebg July 5, 2022 09:01
@agagotowiec agagotowiec merged commit f5e1f6e into main Jul 6, 2022
@agagotowiec agagotowiec deleted the feat/PPDSC-2218-scroll-component-story branch July 6, 2022 10:37
Xin00163 pushed a commit that referenced this pull request Oct 17, 2022
…ponent-story

feat(PPDSC-2218): added Scroll storybook scenario
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready for design review Please assist in getting this reviewed ready for review Please assist in getting this reviewed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants