From 919c4ac7ce269d5d604856e6901b0de41c7c7e35 Mon Sep 17 00:00:00 2001 From: Javier Reartes Date: Thu, 14 Oct 2021 14:46:41 -0300 Subject: [PATCH 01/15] DP-23086 Fixing keyboard navigation on organization search. --- packages/assets/scss/03-organisms/_organization-navigation.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/assets/scss/03-organisms/_organization-navigation.scss b/packages/assets/scss/03-organisms/_organization-navigation.scss index 4ac15b3e36..a2f5847f1f 100644 --- a/packages/assets/scss/03-organisms/_organization-navigation.scss +++ b/packages/assets/scss/03-organisms/_organization-navigation.scss @@ -190,6 +190,7 @@ $menu-transition-time: 0.3s; max-width: 0; pointer-events: none; opacity: 0; + visibility: hidden; transition: 0s; .form-open & { @@ -197,6 +198,7 @@ $menu-transition-time: 0.3s; width: 100%; pointer-events: auto; opacity: 1; + visibility: visible; transition: $menu-transition-time; margin-right: 15px; } From e950456be41b1e94646dc4b4c9d2f7cd8c941f97 Mon Sep 17 00:00:00 2001 From: Javier Reartes Date: Thu, 14 Oct 2021 15:03:58 -0300 Subject: [PATCH 02/15] Changelog --- DP-23086.yml | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 DP-23086.yml diff --git a/DP-23086.yml b/DP-23086.yml new file mode 100644 index 0000000000..00f02c945d --- /dev/null +++ b/DP-23086.yml @@ -0,0 +1,59 @@ +# Every PR must have a changelog. To create a changelog: +# 1. Make a copy of this file and name it with the ticket number. +# 2. Keep the original format of one of the examples at the bottom, and override each element of it using ___TEMPLATE___ for reference +# 3. Remove all comments from the copied file + +#___CHANGE TYPES___ +# - Added for new features. +# - Changed for changes in existing functionality. +# - Deprecated for soon-to-be removed features. +# - Removed for now removed features. +# - Fixed for any bug fixes. +# - Security in case of vulnerabilities. +# e.g. Added + +#___PROJECT___ +# - Patternlab +# - React +# - Docs +# e.g. React +# e.g. React, Patternlab + +#___COMPONENT___ +# Component name(s) in `PascalCase` +# e.g. Header +# e.g. Form, InputSlider, InputTextTypeAhead + +#___DESCRIPTION___ +# PR description and PR number (append PR number with # to create a link to the PR in Github) +# If you need multiple lines, start the first line with the following "|-" characters. +# For any breaking changes, add a comment in the PR describing the necessary changes on the consumer side and link that comment in the description. +#e.g. Adds apples to apple trees for admin apple pickers (#PR) + +#___ISSUE___ +# A Jira ticket or a Github issue number (append Github issue number with # to create a link to the issue in Github) +# e.g. DP-12345 or #123 + +#___IMPACT___ +# - Major impact when you make incompatible API changes, +# - Minor impact when you add functionality in a backwards compatible manner, and +# - Patch impact when you make backwards compatible bug fixes. +# e.g. Minor +# See https://semver.org/ for more info. + + +#___TEMPLATE___ +# ChangeType [enter a valid option, see __CHANGE TYPES___ e.g. Added]: +# - project: Enter one or multiple (comma separated) valid project prefix(es) - see ___PROJECT___ e.g. React, Patternlab +# component: Enter one or multiple (comma separated) valid component name(s) - see ___COMPONENT___ e.g. Color +# description: Describe the change and add the PR number. see ___DESCRIPTION___ e.g. Adds apples to apple trees for admin apple pickers (#PR) +# issue: Add a Jira ticket or issue number, e.g. DP-12345 or 124 +# impact: Enter a valid impact, e.g. Minor + +#___EXAMPLE___ +Fixed: + - project: Patternlab + component: OrganizationNavigation + description: Fixes keyboard navigation for organization search. (#1531) + issue: DP-23086 + impact: patch From 79be41d63384e7494652e700c2ba04accfc7d21e Mon Sep 17 00:00:00 2001 From: Javier Reartes Date: Thu, 28 Oct 2021 15:30:24 -0300 Subject: [PATCH 03/15] Adjusting a11y issues --- .../_organization-navigation-item.scss | 2 - .../_organization-navigation.scss | 4 +- .../by-template/organization-navigation.twig | 18 +++--- .../js/modules/organizationNavigation.js | 58 ++++++++++++------- 4 files changed, 48 insertions(+), 34 deletions(-) diff --git a/packages/assets/scss/03-organisms/_organization-navigation-item.scss b/packages/assets/scss/03-organisms/_organization-navigation-item.scss index 9141b8563a..11566fb844 100644 --- a/packages/assets/scss/03-organisms/_organization-navigation-item.scss +++ b/packages/assets/scss/03-organisms/_organization-navigation-item.scss @@ -6,10 +6,8 @@ position: relative; padding: 0 20px; margin-bottom: 0; - order: 2; @media ($bp-large-min) { - order: 1; display: flex; padding: 0; border-bottom: 0; diff --git a/packages/assets/scss/03-organisms/_organization-navigation.scss b/packages/assets/scss/03-organisms/_organization-navigation.scss index a2f5847f1f..6a18193f96 100644 --- a/packages/assets/scss/03-organisms/_organization-navigation.scss +++ b/packages/assets/scss/03-organisms/_organization-navigation.scss @@ -20,7 +20,7 @@ $menu-transition-time: 0.3s; left: 0; width: 100%; margin-top: 0; - z-index: $z-dropdown; + z-index: $z-modal; .show-menu & { opacity: 0; @@ -150,13 +150,11 @@ $menu-transition-time: 0.3s; &__search { border-bottom: 1px solid $c-gray-light; - order: 1; padding: 20px; @media ($bp-large-min) { display: flex; flex-direction: row-reverse; - order: 2; border-bottom: 0; padding: 0; diff --git a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig index 38333fc348..434da1fbba 100644 --- a/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig +++ b/packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/organization-navigation.twig @@ -1,5 +1,5 @@