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(OnboardingTooltip): add close with close button #6892

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

inomdzhon
Copy link
Contributor

@inomdzhon inomdzhon commented May 6, 2024


  • Unit-тесты
  • e2e-тесты
  • Дизайн-ревью
  • Документация фичи

Изменения

  • в OnboardingTooltip добавил параметр closeBy;
  • для TooltipBase добавил параметры closeIconLabel и onCloseIconClickTooltip пока игнорируем их, т.к. по задаче нужно только для OnboardingTooltip);
  • в Tooltip, за одно, удалил дублирующий TooltipBase код.

Нюанс

Заметил, что сейчас в OnboardingTooltip проблемы с доступностью.

  • overlay полностью перекрывает всё, не кликнуть даже по содержимому тултипа, а также overlay это просто <div>;

    Как надо: текст должен быть доступен для взаимодействия, а overlay должен быть кнопкой с aria-label, который описывает что эта кнопка делает.

  • при этом по кнопке TAB можно навигироваться на элементы под тултипом и тем самым прокликать их и "сломать" флоу онбординга.

    Как надо: TAB должен быть зациклен в тултипе, чтобы пользователь шёл по флоу онбординга

UPD создал задачу #6893

- в `OnboardingTooltip` добавил параметр `closeBy`;
- для `TooltipBase` добавил параметры `closeIconLabel` и `onCloseIconClick` (в `Tooltip` пока игнорируем их, т.к. по задаче нужно только для `OnboardingTooltip`);
- в `Tooltip`, за одно, удалил дублирующий `TooltipBase` код.

h2. Нюанс

Заметил, что сейчас в `OnboardingTooltip` проблемы с доступностью.

- `overlay` полностью перекрывает всё, не кликнуть даже по содержимому тултипа, а также `overlay` это просто `<div>`;
    > **Как надо:** текст должен быть доступен для взаимодействия, а `overlay` должен быть кнопкой с `aria-label`, который описывает что эта кнопка делает.
- при этом по кнопке TAB можно навигироваться на элементы под тултипом и тем самым прокликать их и "сломать" флоу онбординга.
   > **Как надо:** TAB должен быть зациклен в тултипе, чтобы пользователь шёл по флоу онбординга
@inomdzhon inomdzhon requested a review from a team as a code owner May 6, 2024 18:23
@inomdzhon inomdzhon changed the title feat(OnboardingTooltip): add close wth close button feat(OnboardingTooltip): add close with close button May 6, 2024
Copy link
Contributor

github-actions bot commented May 6, 2024

size-limit report 📦

Path Size
JS 367.36 KB (+0.11% 🔺)
JS (gzip) 111.72 KB (+0.04% 🔺)
JS (brotli) 92 KB (+0.02% 🔺)
JS import Div (tree shaking) 1.43 KB (0%)
CSS 269.98 KB (+0.07% 🔺)
CSS (gzip) 35.3 KB (+0.09% 🔺)
CSS (brotli) 28.62 KB (+0.06% 🔺)

Copy link

codesandbox-ci bot commented May 6, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Copy link
Contributor

github-actions bot commented May 6, 2024

e2e tests

Playwright Report

Copy link
Contributor

github-actions bot commented May 6, 2024

👀 Docs deployed

Commit 7968bcc

Copy link

codecov bot commented May 6, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.34%. Comparing base (d2b8446) to head (7968bcc).
Report is 51 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #6892      +/-   ##
==========================================
+ Coverage   83.33%   83.34%   +0.01%     
==========================================
  Files         350      350              
  Lines       10729    10737       +8     
  Branches     3575     3582       +7     
==========================================
+ Hits         8941     8949       +8     
  Misses       1788     1788              
Flag Coverage Δ
unittests 83.34% <100.00%> (+0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link

@EleonoraEvans EleonoraEvans left a comment

Choose a reason for hiding this comment

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

все ок)

Copy link
Contributor

@mendrew mendrew left a comment

Choose a reason for hiding this comment

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

Выглядит отлично! 👍

@vkcom-publisher vkcom-publisher added pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности and removed pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности labels May 15, 2024
@vkcom-publisher vkcom-publisher added pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности and removed pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности labels May 23, 2024
@vkcom-publisher vkcom-publisher added pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности and removed pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности labels May 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
4 participants