Merge branch 'wip/portal-content-updating' into develop

packages/dnb-design-system-portal/src/pages/quickguide-designer.md

@@ -6,6 +6,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
 
@@ -27,11 +28,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
 
 <Img src={FigmaTeam} caption="Join the DNB UX team" alt="Join the DNB UX team" height="224" />
 
-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.
 
 <Img src={FigmaLibraries} caption="Add the Eufemia library" alt="Add Eufemia team" height="320" />
+
+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:
+
+<Img src={FigmaLayoutGrid} caption="Add an 8px layout grid" alt="Add 8px layout grid" height="200" />

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). 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?
+- 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.