Merge branch 'master' into standardize-file-names

Author: taysea

aries-site/src/components/content/SubsectionText.js

@@ -21,6 +21,12 @@ const StyledBox = styled(Box)`
   }
 `;
 
+const AccessibilityColorMap = accessibility => {
+  if (accessibility.includes('Passed')) return 'status-ok';
+  if (accessibility.includes('Failed')) return 'status-critical';
+  return 'status-warning';
+};
+
 export const SubsectionText = ({
   children,
   level,
@@ -37,7 +43,7 @@ export const SubsectionText = ({
     {accessibility && (
       <Tag
         alignSelf="start"
-        border={{ color: 'brand' }}
+        border={{ color: AccessibilityColorMap(accessibility) }}
         value={accessibility}
         onClick={() =>
           document

aries-site/src/data/structures/components.js

@@ -30,7 +30,7 @@ import { TagPreview } from '../../examples/cardPreviews/tag';
 export const components = [
   {
     name: 'Anchor',
-    accessibility: 'Passed WCAG 2.2 AAA',
+    accessibility: 'Passed WCAG 2.2 AA',
     category: 'Controls',
     description:
       'Hyperlinks used with text-based navigation, such as inline text.',
@@ -90,6 +90,7 @@ export const components = [
   },
   {
     name: 'Button',
+    accessibility: 'Passed WCAG 2.2 AA',
     category: 'Controls',
     description:
       'Buttons are graphic elements that indicate to users that actions can be performed.',
@@ -850,6 +851,7 @@ export const components = [
   },
   {
     name: 'Menu',
+    accessibility: 'Failed WCAG 2.2 AA',
     category: 'Controls',
     description:
       'Menu is a component that contains a list of actions. When a user clicks an item in the menu, the menu closes and the action is executed.',

aries-site/src/data/wcag/components.json

@@ -2,15 +2,50 @@
   {
     "anchor": [
       { "rule": "1.4.1", "status": "passed" },
-      { "rule": "1.4.6", "status": "passed" },
       { "rule": "1.4.3", "status": "passed" },
+      { "rule": "1.4.6", "status": "passed" },
       { "rule": "2.1.1", "status": "passed" },
       { "rule": "2.1.2", "status": "passed" },
       { "rule": "2.1.3", "status": "passed" },
       { "rule": "2.4.4", "status": "conditional" },
       { "rule": "2.4.7", "status": "passed" },
       { "rule": "2.4.9", "status": "conditional" },
+      { "rule": "2.4.13", "status": "failed" },
+      { "rule": "3.2.1", "status": "passed" },
+      { "rule": "4.1.2", "status": "passed" }
+    ],
+    "button": [
+      { "rule": "1.1.1", "status": "conditional" },
+      { "rule": "1.3.1", "status": "conditional" },
+      { "rule": "1.3.3", "status": "conditional" },
+      { "rule": "1.4.3", "status": "exceptions" },
+      { "rule": "1.4.6", "status": "failed" },
+      { "rule": "2.1.1", "status": "passed" },
+      { "rule": "2.1.2", "status": "passed" },
+      { "rule": "2.1.3", "status": "passed" },
+      { "rule": "2.4.7", "status": "passed" },
+      { "rule": "2.4.13", "status": "failed" },
+      { "rule": "2.5.3", "status": "conditional" },
+      { "rule": "2.5.5", "status": "failed" },
+      { "rule": "2.5.8", "status": "passed" },
+      { "rule": "4.1.2", "status": "conditional" },
+      { "rule": "4.1.3", "status": "passed" }
+    ],
+    "menu": [
+      { "rule": "1.4.3", "status": "passed" },
+      { "rule": "1.4.6", "status": "passed" },
+      { "rule": "1.4.11", "status": "passed" },
+      { "rule": "1.4.13", "status": "passed" },
+      { "rule": "2.1.1", "status": "passed" },
+      { "rule": "2.1.2", "status": "passed" },
+      { "rule": "2.4.4", "status": "conditional" },
+      { "rule": "2.4.7", "status": "failed" },
+      { "rule": "2.4.13", "status": "failed" },
+      { "rule": "2.5.5", "status": "failed" },
+      { "rule": "2.5.8", "status": "passed" },
       { "rule": "3.2.1", "status": "passed" },
+      { "rule": "3.2.4", "status": "conditional" },
+      { "rule": "3.2.5", "status": "passed" },
       { "rule": "4.1.2", "status": "passed" }
     ]
   }

aries-site/src/layouts/content/AccessibilitySection.js

@@ -1,5 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useMemo, useEffect } from 'react';
+import { Notification } from 'grommet';
 import { WCAGRuleDetail, WCAGRuleSummary } from '.';
 import componentData from '../../data/wcag/components.json';
 
@@ -87,6 +88,13 @@ export const AccessibilitySection = ({ title, version }) => {
 
   return (
     <>
+      <Notification
+        status="info"
+        margin={{ bottom: 'medium' }}
+        width="large"
+        // eslint-disable-next-line max-len
+        message="WCAG rules marked as conditional indicate that the implementer must take additional actions to ensure full compliance."
+      />
       <WCAGRuleSummary statuses={statusData} />
       <WCAGRuleDetail version={version || '2.2'} rules={comparisons} />
     </>

aries-site/src/layouts/content/WCAGRuleDetail.js

@@ -24,7 +24,7 @@ const getStatusIcon = status => {
       return <StatusCriticalSmall alt="" color="status-critical" />;
     case 'conditional':
       return <CircleInformation alt="" />;
-    case 'passed with exceptions':
+    case 'exceptions':
       return <StatusWarningSmall alt="" color="status-warning" />;
     default:
       return <StatusGoodSmall alt="" color="status-ok" />;

aries-site/src/layouts/content/WCAGRuleSummary.js

@@ -12,7 +12,7 @@ const STATUS_MAP = {
     label: 'Passed',
     icon: <StatusGoodSmall alt="" color="status-ok" />,
   },
-  passedWithExceptions: {
+  exceptions: {
     label: 'Passed with Exceptions',
     icon: <StatusWarningSmall alt="" color="status-warning" />,
   },
@@ -43,7 +43,7 @@ const calculateAccessibilityTestCounts = statuses =>
     },
     {
       passed: 0,
-      passedWithExceptions: 0,
+      exceptions: 0,
       failed: 0,
       conditional: 0,
     },

aries-site/src/pages/components/anchor.mdx

@@ -131,8 +131,6 @@ Used to indicate that an anchor cannot be interacted with.
 ### A11y guidance
 The following guidance should be considered for each instance of the component and is the responsibility of the implementer. WCAG criteria provided directly by the Grommet component are summarized under [WCAG compliance](#wcag-compliance).
 
-**Note**: WCAG rules marked as conditional indicate that the implementer must take additional actions to ensure full compliance.
-
 **Use 'target' and 'rel' props when linking externally:**
 
 If clicking an Anchor leads to an external URL, apply these props to the anchor:

aries-site/src/pages/components/button.mdx

@@ -1,4 +1,8 @@
-import { BestPracticeGroup, Example } from '../../layouts';
+import {
+  AccessibilitySection,
+  BestPracticeGroup,
+  Example,
+} from '../../layouts';
 import {
   ButtonBadCancelPreview,
   ButtonBadGroupPreview,
@@ -137,12 +141,6 @@ For buttons with icons ONLY, it is important that you show the two following ele
 
 2. Inform the user of what will happen when the button is clicked by including `a11yTitle` or `aria-label`.
 
-### Accessibility
-
-If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab," that is a link `<a>`. Everything else is a `<button>`.
-
-The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job.
-
 ## Primary buttons
 
 Primary buttons highlight actions on a page delivering the most benefit to users. They are helpful in enabling users’ goals, unlocking new value by enabling a new experience, capability, or creation of something which hadn’t previously existed.
@@ -381,3 +379,17 @@ For button groups on screen widths less than or equal to 576px (Grommet "small")
     <ButtonBadGroupPreview />
   </Example>
 </BestPracticeGroup>
+
+## Accessibility
+### A11y guidance
+The following guidance should be considered for each instance of the component and is the responsibility of the implementer. WCAG criteria provided directly by the Grommet component are summarized under [WCAG compliance](#wcag-compliance).
+
+If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab," that is a link `<a>`. Everything else is a `<button>`.
+
+The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job.
+
+If using an `<a>` tag, see the [WCAG rules for the Anchor component](/components/anchor#wcag-compliance).
+
+### WCAG compliance
+
+<AccessibilitySection title="button" />

aries-site/src/pages/components/menu.mdx

@@ -1,5 +1,5 @@
 import { Box } from 'grommet';
-import { BestPracticeGroup, Example } from '../../layouts';
+import { AccessibilitySection, BestPracticeGroup, Example } from '../../layouts';
 import {
   MenuExample,
   MenuBatchActionsExample,
@@ -41,12 +41,6 @@ To create a predictable experience for users, the following are guidelines for u
 
 **Avoid creating cascading menus.** Menus with multiple layers creates a confusing experience for the user because relevant actions may become nested and difficult to find. Refining menu items to necessary actions creates a more manageable user experience.
 
-### Accessibility
-
-Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied.
-
-An icon can be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient.
-
 ## Organizing menu items
 
 Allow a user to quickly locate the menu item they desire by organizing menu items
@@ -283,3 +277,12 @@ Used to indicate that a Menu cannot be interacted with.
 >
   <MenuDisabledExample />
 </Example>
+
+### Accessibility
+
+Accessibility features such as screen reader messages are automatically built into Menu. By default, these messages are "Open Menu" and "Close Menu". However, if a more specific message is necessary, a custom [a11yTitle](https://v2.grommet.io/menu?theme=hpe#a11yTitle) or [messages](https://v2.grommet.io/menu?theme=hpe#messages) may be applied.
+
+An icon may be used on a menu item to provide additional context about the action. It is recommended that an icon is used in conjunction with text to ensure the context of the menu item is clear. However, there may be cases where an icon alone is sufficient. For example, highly familiar action indicators, such as this example of [Menu with custom icon](#with-custom-icon) demonstrate when an icon only may be sufficient.
+
+### WCAG compliance
+  <AccessibilitySection title='menu' />

sandbox/grommet-app/src/pages/sticker-sheet/index.jsx

@@ -65,7 +65,6 @@ const textSizes = [
   '3xl',
   '4xl',
   '5xl',
-  '6xl',
 ];
 
 const StickerSheet = () => {

sandbox/grommet-app/src/themes/theme.jsx

@@ -541,18 +541,46 @@ const buildTheme = tokens => {
 
   const paragraphTheme = {};
   const textTheme = {};
+  const fontWeights = {};
+  // Keep track of the largest text size to use as a fallback
+  // because grommet theme has a max size of 6xl, but design tokens
+  // only supports up to 5xl.
+  const fallback = {
+    size: '0rem',
+    height: '0rem',
+    maxWidth: '0rem',
+    weight: 0,
+  };
   textSizes.forEach(size => {
+    if (
+      parseInt(large.hpe.text?.[size]?.fontSize.replace('rem', ''), 10) >
+      parseInt(fallback.size.replace('rem', ''), 10)
+    ) {
+      fallback.size = large.hpe.text?.[size]?.fontSize;
+      fallback.height = large.hpe.text?.[size]?.lineHeight;
+      fallback.maxWidth = large.hpe.text?.[size]?.maxWidth;
+      fallback.weight = large.hpe.text?.[size]?.fontWeight;
+    }
     paragraphTheme[size] = {
-      size: large.hpe.text?.[size]?.fontSize,
-      height: large.hpe.text?.[size]?.lineHeight,
-      maxWidth: large.hpe.text?.[size]?.maxWidth,
+      size: large.hpe.text?.[size]?.fontSize || fallback.size,
+      height: large.hpe.text?.[size]?.lineHeight || fallback.height,
+      maxWidth: large.hpe.text?.[size]?.maxWidth || fallback.maxWidth,
     };
     textTheme[size] = {
-      size: large.hpe.text?.[size].fontSize,
-      height: large.hpe.text?.[size].lineHeight,
+      size: large.hpe.text?.[size]?.fontSize || fallback.size,
+      height: large.hpe.text?.[size]?.lineHeight || fallback.height,
     };
+    fontWeights[size] = large.hpe.text?.[size]?.fontWeight || fallback.weight;
   });
 
+  textTheme.extend = ({ size }) => {
+    return `font-weight: ${fontWeights[size]};`;
+  };
+
+  paragraphTheme.extend = ({ size }) => {
+    return `font-weight: ${fontWeights[size]};`;
+  };
+
   const buttonKindTheme = {};
   buttonKinds.forEach(kind => {
     const borderWidth = oldTheme
@@ -756,37 +784,37 @@ const buildTheme = tokens => {
         face: `
           @font-face {
             font-family: "Metric";
-            src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
-                 url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
+            src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
+                 url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
           }
           @font-face {
             font-family: "Metric";
-            src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
-                 url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
+            src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff2") format('woff2'),
+                 url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Regular.woff") format('woff');
             font-weight: 400;
           }
           @font-face {
             font-family: "Metric";
-            src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff2") format('woff2'),
-                 url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff") format('woff');
+            src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff2") format('woff2'),
+                 url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Bold.woff") format('woff');
             font-weight: 700;
           }
           @font-face {
             font-family: "Metric";
-            src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff2") format('woff2'),
-                 url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff") format('woff');
+            src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff2") format('woff2'),
+                 url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Semibold.woff") format('woff');
             font-weight: 600;
           }
           @font-face {
             font-family: "Metric";
-            src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff2") format('woff2'),
-                 url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff") format('woff');
+            src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff2") format('woff2'),
+                 url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Medium.woff") format('woff');
             font-weight: 500;
           }
           @font-face {
             font-family: "Metric";
-            src: url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Light.woff2") format('woff2'),
-                 url("https://www.hpe.com/h41225/hfws-static/fonts/metric-hpe-web/MetricHPE-Web-Light.woff") format('woff');
+            src: url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Light.woff2") format('woff2'),
+                 url("https://www.hpe.com/content/dam/hpe/fonts/metric-hpe-web/MetricHPE-Web-Light.woff") format('woff');
             font-weight: 100;
           }`,
         size: large.hpe.text.medium.fontSize,