Merge pull request #669 from WestpacGEL/new-kate-content

New kate content

apps/site/src/components/code/code.inject-components.ts

@@ -52,57 +52,7 @@ export {
   ProgressIndicator,
 } from '@westpac/ui';
 
-export {
-  NewWindowIcon,
-  DropDownIcon,
-  PrintIcon,
-  PlayIcon,
-  PauseIcon,
-  AddCircleIcon,
-  AddIcon,
-  RemoveIcon,
-  TickCircleIcon,
-  ArrowRightIcon,
-  CalendarIcon,
-  DeleteIcon,
-  FavoriteIcon,
-  GridIcon,
-  HelpIcon,
-  MessageIcon,
-  NotificationOffIcon,
-  PdfFileIcon,
-  PersonIcon,
-  ProgressIcon,
-  StarRateIcon,
-  WriteIcon,
-  TelephoneIcon,
-  InfoIcon,
-  SearchIcon,
-  VisibilityIcon,
-  CloseIcon,
-  VisibilityOffIcon,
-  RefreshIcon,
-  PhoneIcon,
-  SettingsIcon,
-  WatchIcon,
-  EmailIcon,
-  AtmIcon,
-  EftposIcon,
-  PadlockIcon,
-  BusinessPersonIcon,
-  SecurityIcon,
-  VerifiedIcon,
-  GiftIcon,
-  WarningIcon,
-  SuccessIcon,
-  ArrowLeftIcon,
-  GenericFileIcon,
-  GithubIcon,
-  FaceHappyIcon,
-  WalkIcon,
-  HeadsetIcon,
-  AndroidIcon,
-} from '@westpac/ui/icon';
+export * from '@westpac/ui/icon';
 
 export { GiftPictogram } from '@westpac/ui/pictogram';
 export { Link as NextLink };

apps/site/src/content/design-system/components/input-group-copy/accessibility/accessibility-api/content.mdoc

@@ -0,0 +1,2 @@
+- `<label for="{ID}">`: Each text input or select element has a visually hidden *label* element and uses explicit association (connected to the text input or select element using a *for* attribute) for optimal support in assistive technologies. [React component: refer to *label* prop to set label text, *for* is auto-generated]
+- `<input type="text" id="{ID}">` / `<select id="{ID}">`: Text input or select elements must have a unique *id* value. [React component: *id* is auto-generated]

apps/site/src/content/design-system/components/input-group-copy/accessibility/accessibility-features/content.mdoc

@@ -0,0 +1,3 @@
+- Indicator outline appears around the input and button elements when focused
+- Text input and select elements include a visually hidden label
+- The input group shape and text content is visible in Windows High Contrast Mode (WHCM). Button ‘look’ styling (colour) is not visible in WHCM.

apps/site/src/content/design-system/components/input-group-copy/accessibility/keyboard-support/content.mdoc

@@ -0,0 +1 @@
+No keyboard interaction needed.

apps/site/src/content/design-system/components/input-group-copy/accessibility/notes-on-accessibility/content.mdoc

@@ -0,0 +1,23 @@
+All components comply with WCAG 2.1 AA guidelines and Success Criteria. These fall under the [four principles of accessibility](/design-system/accessibility/design-system-accessibility) – Perceivable, Operable, Understandable and Robust. Below are some specific ways in which this component follows these principles:
+
+### Perceivable
+
+The Design System components have been designed to adhere to colour contrast ratios for both text and non-text elements. They have been coded to include text alternatives when required, and allow component text and labels to be resized. They do not use colour alone to convey information.
+
+### Operable
+
+The Design System components have been coded to be navigable using a keyboard and other assistive technologies. WCAG compliance recommends being aware of the time it takes for people to complete tasks and to not automatically move focus. Animation should be controlled and simple so as not to cause seizures, and it’s important to provide the ability to perform the same task in multiple ways where possible. These rules have been followed where navigation and interaction is included in Design System components or patterns.
+
+### Understandable
+
+WCAG compliance requires consistent and predicable interactions, clear and simple language, concise labels, no jargon or abbreviations and clear error messaging. These rules have been followed where content and interactions are included in Design System components or patterns.
+
+### Robust
+
+When designing inputs with select boxes (eg input with timeframe selection), the select box is often placed to the right of the input. This makes most sense for sighted users and plays to convention.
+
+However, it makes the order of inputs announced by screen readers as 1. input 2. select. This means screen reader users will be unaware of the ability to change the timeframe until the select box receives focus and is announced, potentially forcing them to reconsider their input, delete, then re-enter.
+
+One way to aid screen reader users is to use hint text to instruct. For example:
+
+"Enter the amount and select day, month, or year"

apps/site/src/content/design-system/components/input-group-copy/accessibilityDemo.mdoc

@@ -0,0 +1,69 @@
+```tsx
+() => {
+  const [value, setValue] = useState(0);
+
+  return (
+    <Fragment>
+      <InputGroup name="example-text" label="Total amount" before="AUS $" after=".00">
+        <Input defaultValue="User input text" />
+      </InputGroup>
+      <br />
+      <InputGroup
+        name="example-select"
+        label="Total amount"
+        after={
+          <Select
+            name="example-select-select"
+            label="Currency"
+            defaultValue="monthly"
+            onChange={event => console.log(`Selected ${event.target.value}`)}
+          >
+            <option value="daily">Daily</option>
+            <option value="monthly">Monthly</option>
+            <option value="yearly">Yearly</option>
+          </Select>
+        }
+      >
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup name="example-button" label="Filter by name" after={<Button>Go</Button>}>
+        <Input defaultValue="User input text" />
+      </InputGroup>
+      <br />
+      <InputGroup
+        name="example-select"
+        label="Total amount"
+        placeholder="Placeholder text"
+        before={
+          <Select
+            name="example-select-select"
+            label="option"
+            onChange={event => console.log(`Selected ${event.target.value}`)}
+            data={[
+              { text: 'Option', value: 'option' },
+              { text: 'Option 2', value: 'option2' },
+              { text: 'Option 3', value: 'option' },
+            ]}
+          >
+            <option value="option-1">Option 1</option>
+            <option value="option-2">Option 2</option>
+            <option value="option-3">Option 3</option>
+          </Select>
+        }
+      >
+        <Input />
+      </InputGroup>
+      <br />
+      <InputGroup
+        name="example-button"
+        label="Filter by name"
+        before={<Button onClick={() => setValue(value => value - 1)}>-</Button>}
+        after={<Button onClick={() => setValue(value => value + 1)}>+</Button>}
+      >
+        <Input value={value} onChange={event => setValue(event.target.value)} />
+      </InputGroup>
+    </Fragment>
+  );
+};
+```