From 6b6d2fe94d83789fe68878b6020e83d30b919404 Mon Sep 17 00:00:00 2001 From: Kevin Murphy Date: Wed, 20 Feb 2019 09:16:11 +0100 Subject: [PATCH 1/3] Edit accessability content --- .../quickguide-designer/accessibility.md | 13 ++++++++ yarn.lock | 32 +++---------------- 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md index f79a935bbdd..b22ecd4d7ad 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md @@ -91,3 +91,16 @@ Semantic markup makes robust content that's accessible. Pay attention to the fol Responsive Design ensures that content can be viewed on a wide spectrum of display sizes. Responsive component and layout design should be planned from the beginning and not applied as an afterthought. Build prototypes early in code or design and begin testing their breakpoints sooner rather than later. + +#### Accessibility checklist for designers + +NB: Move this section to it's own menu item pages + +Building an accessible interface starts at the UX stage of design. Ideally a designer should be able to convey to a developer how they would like a keyboard user to use and navigate through an interface. Much of the DNB Design System's styling and development have taken accessibility into consideration to a certain extent (see https://eufemia.dnb.no/uilib/usage/accessibility). + +- make sure the content is perceivable - ensure good contrast between background and foreground +- Plan how you would like a keyboard navigator to access interface laments/areas. What will the order of tabbing be? +- Should you provide a ’skip to content’ feature to allow users to get to the main content quickly +- Plan how the interface will respond to different screen sizes. The layout may have to change - how will this affect accessability? +- Zoom the interface - some users zoom their browser to increase the size. How will elements behave in these scenarios? Will they overlap. What happens to wide horizontal components such as navigation or tab sets? +- Fluid design as opposed to using fixed breakpoints, allows the content to reflow in the same order as screen readers render content to users who are blind or visually impaired. diff --git a/yarn.lock b/yarn.lock index 57798531dfb..c4ab7bdbd42 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6231,7 +6231,7 @@ debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@~4.1.0: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -10315,7 +10315,7 @@ import-local@^2.0.0: pkg-dir "^3.0.0" resolve-cwd "^2.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -12354,11 +12354,6 @@ lodash._basecopy@^3.0.0: resolved "https://registry.yarnpkg.com/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz#8da0e6a876cf344c0ad8a54882111dd3c5c7ca36" integrity sha1-jaDmqHbPNEwK2KVIghEd08XHyjY= -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._basetostring@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz#d1861d877f824a52f669832dcaf3ee15566a07d5" @@ -12377,29 +12372,12 @@ lodash._basevalues@^3.0.0: resolved "https://registry.yarnpkg.com/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz#5b775762802bde3d3297503e26300820fdf661b7" integrity sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc= -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: +lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= @@ -12600,7 +12578,7 @@ lodash.reject@^4.4.0: resolved "https://registry.yarnpkg.com/lodash.reject/-/lodash.reject-4.6.0.tgz#80d6492dc1470864bbf583533b651f42a9f52415" integrity sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU= -lodash.restparam@*, lodash.restparam@^3.0.0: +lodash.restparam@^3.0.0: version "3.6.1" resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= @@ -17416,7 +17394,7 @@ readable-stream@~1.1.10, readable-stream@~1.1.9: isarray "0.0.1" string_decoder "~0.10.x" -readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0: +readdir-scoped-modules@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747" integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c= From 7e742c9d08cc5236e1a788fa21b0286301898eb8 Mon Sep 17 00:00:00 2001 From: Kevin Murphy Date: Wed, 20 Feb 2019 10:32:18 +0100 Subject: [PATCH 2/3] Edit quickguide designer content --- .../dnb-design-system-portal/src/pages/quickguide-designer.md | 3 +++ .../src/pages/quickguide-designer/accessibility.md | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer.md index d2fba0d7b6c..40acf8b9476 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer.md +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer.md @@ -40,3 +40,6 @@ What you should read from brand guidelines before starting to design for DNB 4. Add Eufemia library to your file Add Eufemia team + +5. In preferences set your nudge amount to 8px +6. diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md index b22ecd4d7ad..79704cbe1e9 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/accessibility.md @@ -96,7 +96,7 @@ Responsive component and layout design should be planned from the beginning and NB: Move this section to it's own menu item pages -Building an accessible interface starts at the UX stage of design. Ideally a designer should be able to convey to a developer how they would like a keyboard user to use and navigate through an interface. Much of the DNB Design System's styling and development have taken accessibility into consideration to a certain extent (see https://eufemia.dnb.no/uilib/usage/accessibility). +Building an accessible interface starts at the UX stage of design. Ideally a designer should be able to convey to a developer how they would like a keyboard user to use and navigate through an interface. Much of the DNB Design System's styling and development have taken accessibility into consideration to a certain extent (see https://eufemia.dnb.no/uilib/usage/accessibility). However, each interface design comes with it's own challenges and requirement - make sure the content is perceivable - ensure good contrast between background and foreground - Plan how you would like a keyboard navigator to access interface laments/areas. What will the order of tabbing be? From 8ad5c148b13116c0146c5081b29f33324ff61a5b Mon Sep 17 00:00:00 2001 From: Kevin Murphy Date: Wed, 20 Feb 2019 14:40:34 +0100 Subject: [PATCH 3/3] Edit quicksytart designer --- .../src/pages/quickguide-designer.md | 16 +++-- .../assets/figma-layout-grid.svg | 67 +++++++++++++++++++ 2 files changed, 78 insertions(+), 5 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/figma-layout-grid.svg diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer.md b/packages/dnb-design-system-portal/src/pages/quickguide-designer.md index 40acf8b9476..5dfb3c9d5a6 100644 --- a/packages/dnb-design-system-portal/src/pages/quickguide-designer.md +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer.md @@ -7,6 +7,7 @@ draft: false import Img from 'Tags/Img' import FigmaTeam from 'Pages/quickguide-designer/assets/figma-team.svg' import FigmaLibraries from 'Pages/quickguide-designer/assets/figma-libraries.svg' +import FigmaLayoutGrid from 'Pages/quickguide-designer/assets/figma-layout-grid.svg' # QuickStart - Designers @@ -32,14 +33,19 @@ What you should read from brand guidelines before starting to design for DNB ### Getting started 1. Open Figma -2. Make sure you are a member of the DNB UX team +2. Make sure you are a member of the DNB UX team. If not, then contact a lead designer (https://eufemia.dnb.no/design-system/contact) +3. When you click on the 'You' dropdown, you should see DNB Bank ASA as a team to choose from. +4. Choose DNB Bank ASA Join the DNB UX team -3. Create a new file -4. Add Eufemia library to your file +5. Create a new file +6. Add Eufemia library to your file by selecting the 'open book' icon on the top right of the Figma interface. This opens a new dialogue window: +7. Choose Eufemia by toggling the switch. Add Eufemia team -5. In preferences set your nudge amount to 8px -6. +8. In preferences set your nudge amount to 8px - this will snap items to the 8px grid +9. Add a layout grid and set it to 8px: + +Add 8px layout grid diff --git a/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/figma-layout-grid.svg b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/figma-layout-grid.svg new file mode 100644 index 00000000000..ba185b6951d --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/quickguide-designer/assets/figma-layout-grid.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +