@amsterdam/design-system-css 0.4.0 → 0.6.0

package/src/components/pagination/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Pagination
 
 Pagination is a navigation element used to navigate between multiple pages of overview lists.
@@ -16,4 +18,4 @@ Pagination indicates the current page and allows users to navigate to other page
 
 ## Relevant WCAG Rules
 
-Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

package/src/components/pagination/pagination.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin list-reset {
@@ -14,17 +14,12 @@
   display: flex;
   flex-wrap: wrap;
   font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-spacious-font-size);
+  font-size: var(--amsterdam-pagination-font-size);
   font-weight: var(--amsterdam-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-spacious-line-height);
+  line-height: var(--amsterdam-pagination-line-height);
 
   @include list-reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-pagination-compact-font-size);
-    line-height: var(--amsterdam-pagination-compact-line-height);
-  }
 }
 
 @mixin button-reset {
@@ -43,7 +38,7 @@
   display: flex;
   gap: 0.5rem;
   outline-offset: var(--amsterdam-pagination-button-outline-offset);
-  padding-inline: 0.75rem;
+  padding-inline: var(--amsterdam-pagination-button-padding-inline);
   text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset);

package/src/components/paragraph/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Paragraph
 
 Represents a paragraph of running text, form instructions, and other standalone text fragments.

package/src/components/paragraph/paragraph.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {
@@ -12,36 +12,21 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-spacious-medium-font-size);
+  font-size: var(--amsterdam-paragraph-medium-font-size);
   font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-spacious-medium-line-height);
+  line-height: var(--amsterdam-paragraph-medium-line-height);
 
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-paragraph-compact-medium-font-size);
-    line-height: var(--amsterdam-paragraph-compact-medium-line-height);
-  }
 }
 
 .amsterdam-paragraph--small {
-  font-size: var(--amsterdam-paragraph-spacious-small-font-size);
-  line-height: var(--amsterdam-paragraph-spacious-small-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-paragraph-compact-small-font-size);
-    line-height: var(--amsterdam-paragraph-compact-small-line-height);
-  }
+  font-size: var(--amsterdam-paragraph-small-font-size);
+  line-height: var(--amsterdam-paragraph-small-line-height);
 }
 
 .amsterdam-paragraph--large {
-  font-size: var(--amsterdam-paragraph-spacious-large-font-size);
-  line-height: var(--amsterdam-paragraph-spacious-large-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-paragraph-compact-large-font-size);
-    line-height: var(--amsterdam-paragraph-compact-large-line-height);
-  }
+  font-size: var(--amsterdam-paragraph-large-font-size);
+  line-height: var(--amsterdam-paragraph-large-line-height);
 }
 
 .amsterdam-paragraph--inverse-color {

package/src/components/radio/README.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Radio
+
+Allows users to select one option from a list.
+
+## Guidelines
+
+- Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone.
+  If needed, add a hint explaining this, for example, ‘Select one option’.
+- Order radio options alphabetically by default.
+  In some cases, it can be helpful to order them from most-to-least common options.
+  For example, you could order options for ‘Where do you live?’ based on population size.
+  However you should do this with extreme caution as it can reinforce bias.
+  If in doubt, order alphabetically.
+- Labels should be concise. Try to keep labels shorter than 4 words.
+
+Use a [Checkbox](/docs/components-forms-checkbox--docs) when a user can select more than 1 option from a list.

package/src/components/radio/radio.scss

@@ -0,0 +1,157 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
+.amsterdam-radio__input {
+  @include hide-input;
+  @include input-label-focus;
+}
+
+.amsterdam-radio__circle {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  height: calc(var(--amsterdam-radio-font-size) * var(--amsterdam-radio-line-height));
+  width: 1.5rem;
+
+  &::after {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
+    border-color: var(--amsterdam-radio-circle-border-color);
+    border-radius: 100%;
+    border-style: solid;
+    border-width: 0.125rem;
+    box-sizing: border-box;
+    content: "";
+    height: 1.5rem;
+    width: 100%;
+  }
+}
+
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-radio__label {
+  color: var(--amsterdam-radio-color);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--amsterdam-radio-font-family);
+  font-size: var(--amsterdam-radio-font-size);
+  font-weight: var(--amsterdam-radio-font-weight);
+  gap: 0.5rem;
+  line-height: var(--amsterdam-radio-line-height);
+  outline-offset: var(--amsterdam-radio-outline-offset);
+
+  &:hover {
+    color: var(--amsterdam-radio-hover-color);
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+    text-underline-offset: 0.375rem;
+
+    .amsterdam-radio__circle::after {
+      border-color: var(--amsterdam-radio-circle-hover-border-color);
+    }
+  }
+
+  @include reset;
+}
+
+// Default checked
+.amsterdam-radio__input:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-checked-background-image);
+  }
+}
+
+// Invalid unchecked
+.amsterdam-radio__input[aria-invalid="true"] {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    border-color: var(--amsterdam-radio-circle-invalid-border-color);
+  }
+}
+
+// Disabled unchecked
+.amsterdam-radio__input:disabled {
+  + .amsterdam-radio__label {
+    color: var(--amsterdam-radio-disabled-color);
+    cursor: not-allowed;
+
+    .amsterdam-radio__circle::after {
+      border-color: var(--amsterdam-radio-circle-disabled-border-color);
+      border-width: 0.125rem;
+    }
+  }
+}
+
+// Invalid checked
+.amsterdam-radio__input[aria-invalid="true"]:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-invalid-checked-background-image);
+  }
+}
+
+// Disabled label
+.amsterdam-radio__input:disabled + .amsterdam-radio__label:hover {
+  text-decoration: none;
+}
+
+// Disabled checked
+.amsterdam-radio__input:disabled:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+  }
+}
+
+// Disabled invalid unchecked
+.amsterdam-radio__input[aria-invalid="true"]:disabled {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    border-color: var(--amsterdam-radio-circle-disabled-border-color);
+  }
+}
+
+// HOVER STATES
+
+// Invalid unchecked hover
+.amsterdam-radio__input[aria-invalid="true"] + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  border-color: var(--amsterdam-radio-circle-invalid-hover-border-color);
+}
+
+// Default checked hover
+.amsterdam-radio__input:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  background-image: var(--amsterdam-radio-circle-checked-hover-background-image);
+}
+
+// Invalid checked hover
+.amsterdam-radio__input[aria-invalid="true"]:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: this should be the (currently non-existent) dark red hover color
+  background-image: var(--amsterdam-radio-circle-invalid-checked-hover-background-image);
+}
+
+// Disabled checked hover
+.amsterdam-radio__input:disabled:checked + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  background-image: var(--amsterdam-radio-circle-disabled-checked-hover-background-image);
+}
+
+// Disabled invalid unchecked hover
+.amsterdam-radio__input[aria-invalid="true"]:disabled + .amsterdam-radio__label:hover .amsterdam-radio__circle::after {
+  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+  border-color: var(--amsterdam-radio-circle-disabled-border-color);
+}
+
+// DISABLED INVALID STATES
+
+// Disabled invalid checked
+.amsterdam-radio__input[aria-invalid="true"]:disabled:checked {
+  + .amsterdam-radio__label .amsterdam-radio__circle::after {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    background-image: var(--amsterdam-radio-circle-disabled-checked-background-image);
+  }
+}

package/src/components/row/README.md

@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Row

package/src/components/row/row.scss

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+.amsterdam-row {
+  display: flex;
+  flex-direction: row;
+}
+
+@each $size, $label in $amsterdam-sizes {
+  .amsterdam-row--#{$label} {
+    gap: var(--amsterdam-row-gap-#{$size});
+  }
+}

package/src/components/screen/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Screen
 
 Manages the maximum width and alignment of the entire website or application.
@@ -6,10 +8,10 @@ Manages the maximum width and alignment of the entire website or application.
 
 This should be the outermost component of your website or application.
 Within it, combine components such as
-[Grid](?path=/docs/react_layout-grid--docs),
-[Header](?path=/docs/react_containers-header--docs),
-[Footer](?path=/docs/react_containers-footer--docs),
-[Spotlight](?path=/docs/react_containers-spotlight--docs),
+[Grid](/docs/components-layout-grid--docs),
+[Header](/docs/components-containers-header--docs),
+[Footer](/docs/components-containers-footer--docs),
+[Spotlight](/docs/components-containers-spotlight--docs),
 and Figure.
 
 ## Design

package/src/components/screen/screen.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {

package/src/components/search-field/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Search Field
 
 Allows users to quickly find relevant content by entering a (part of a) word or phrase to search through the content.
@@ -30,4 +32,4 @@ These features can be disruptive for a user searching for part of a word, and `a
 - [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is.
 - [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input.
 
-Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

package/src/components/search-field/search-field.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-search-field {
@@ -19,22 +19,17 @@
   box-shadow: var(--amsterdam-search-field-input-box-shadow);
   color: var(--amsterdam-search-field-input-color);
   font-family: var(--amsterdam-search-field-input-font-family);
-  font-size: var(--amsterdam-search-field-input-spacious-font-size);
+  font-size: var(--amsterdam-search-field-input-font-size);
   font-weight: var(--amsterdam-search-field-input-font-weight);
-  line-height: var(--amsterdam-search-field-input-spacious-line-height);
+  line-height: var(--amsterdam-search-field-input-line-height);
   outline-offset: var(--amsterdam-search-field-input-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-search-field-input-padding-block);
+  padding-inline: var(--amsterdam-search-field-input-padding-inline);
   touch-action: manipulation;
   width: 100%;
 
   @include reset;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-search-field-input-compact-font-size);
-    line-height: var(--amsterdam-search-field-input-compact-line-height);
-  }
-
   &:hover {
     box-shadow: var(--amsterdam-search-field-input-hover-box-shadow);
   }
@@ -63,8 +58,10 @@
   color: var(--amsterdam-search-field-button-color);
   cursor: pointer;
   outline-offset: var(--amsterdam-search-field-button-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 0.5rem;
+
+  // TODO Check if these paddings are necessary
+  padding-block: var(--amsterdam-search-field-button-padding-block);
+  padding-inline: var(--amsterdam-search-field-button-padding-inline);
   touch-action: manipulation;
 
   &:hover {

package/src/components/skip-link/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Skip Link
 
 Use a Skip Link to navigate to the main content quickly with the keyboard.

package/src/components/skip-link/skip-link.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-skip-link {
@@ -12,17 +12,12 @@
   font-weight: var(--amsterdam-skip-link-font-weight);
   line-height: var(--amsterdam-skip-link-line-height);
   outline-offset: var(--amsterdam-skip-link-outline-offset);
-  padding-block: 0.5rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-skip-link-padding-block);
+  padding-inline: var(--amsterdam-skip-link-padding-inline);
   text-align: center;
   text-decoration: none;
 
   &:hover {
     background-color: var(--amsterdam-skip-link-hover-background-color);
   }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-skip-link-compact-font-size);
-    line-height: var(--amsterdam-skip-link-compact-line-height);
-  }
 }

package/src/components/spotlight/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Spotlight
 
 Emphasizes a section on a page through a distinctive background colour.

package/src/components/spotlight/spotlight.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-spotlight--blue {

package/src/components/switch/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Switch
 
 A switch is a control element to toggle between two different states quickly.
@@ -14,7 +16,7 @@ A switch applies to a page or the entire system, such as an on/off switch.
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
 
-The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs).
+The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](/docs/docs-design-guidelines-interactive-elements--docs).
 
 ## References
 

package/src/components/switch/switch.scss

@@ -1,12 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
 @mixin reset {
   box-sizing: border-box;
 }
 
 .amsterdam-switch__input {
-  appearance: none;
-  margin-block: 0;
-  margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
+  @include hide-input;
+  @include input-label-focus;
 }
 
 .amsterdam-switch__label {
@@ -14,6 +20,7 @@
   border-radius: calc(var(--amsterdam-switch-thumb-width) * 2);
   cursor: pointer;
   display: inline-block;
+  outline-offset: var(--amsterdam-switch-outline-offset);
   padding-block: 1px;
   padding-inline: 1px;
   transition: background-color 0.2s ease-in-out;
@@ -43,12 +50,6 @@
   cursor: not-allowed;
 }
 
-.amsterdam-switch__input:focus-visible + .amsterdam-switch__label {
-  outline-color: -webkit-focus-ring-color;
-  outline-offset: var(--amsterdam-switch-outline-offset);
-  outline-style: auto;
-}
-
 .amsterdam-switch__input:checked + .amsterdam-switch__label::before {
   // The 2px is to account for the 1px padding-inline on the label
   transform: translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px));

package/src/components/table/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Table
 
 Use the table component to let users compare information in rows and columns.
@@ -8,4 +10,4 @@ Table is used to display simple information that does not need to be filtered or
 - Use `<Table.Caption>` to describe a table in the same way you would use a heading.
   A caption helps users find, navigate and understand tables.
 - Never use the table component to layout content on a page.
-  Instead, use [Grid](https://amsterdam.github.io/design-system/?path=/docs/react_layout-grid--docs).
+  Instead, use [Grid](/docs/components-layout-grid--docs).

package/src/components/table/table.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-table {
@@ -25,8 +25,8 @@
 .amsterdam-table__cell,
 .amsterdam-table__header-cell {
   border-bottom: var(--amsterdam-table-cell-border-bottom);
-  padding-block: 1rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-table-cell-padding-block);
+  padding-inline: var(--amsterdam-table-cell-padding-inline);
   text-align: start;
   vertical-align: top;
 }

package/src/components/tabs/README.md

@@ -0,0 +1,32 @@
+<!-- @license CC0-1.0 -->
+
+# Tabs
+
+Tabs are used to bundle related content in a compact overview within a page. Each tab has a short name, and these names indicate the relationship between the information displayed in each tab.
+
+## How to Use
+
+- The content of each tab is viewable independently, not in the context of one another.
+- The content within each tab should have a similar structure.
+- Use when there is limited visual space and content needs to be divided into sections.
+
+You can navigate tabs with your keyboard:
+
+| key            | element                                        |
+| :------------- | :--------------------------------------------- |
+| Enter or Space | Open or close the tab that has the focus       |
+| Tab            | Go to the next element that can have focus     |
+| Shift + Tab    | Go to the next element that can have focus     |
+| Left arrow     | If the tabs have focus: go to the previous tab |
+| Right arrow    | If the tabs have focus: go to the next tab     |
+| Home           | If the tabs have focus: go to the first tab    |
+| End            | If the tabs have focus, go to the last tab     |
+
+### Caution
+
+Do not use tabs if the content in each tab functions just as well on separate pages.
+
+## References
+
+- [W3C - Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+- [MDN - Tab Aria Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role)

package/src/components/tabs/tabs.scss

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/breakpoint";
+
+.amsterdam-tabs__list {
+  border-bottom: var(--amsterdam-tabs-list-border-bottom);
+  display: flex;
+  overflow-x: auto;
+}
+
+.amsterdam-tabs__button {
+  background-color: var(--amsterdam-tabs-button-background-color);
+  border: var(--amsterdam-tabs-button-border);
+  color: var(--amsterdam-tabs-button-color);
+  cursor: var(--amsterdam-tabs-button-cursor);
+  font-family: var(--amsterdam-tabs-button-font-family);
+  font-size: var(--amsterdam-tabs-button-font-size);
+  font-weight: var(--amsterdam-tabs-button-font-weight);
+  line-height: var(--amsterdam-tabs-button-line-height);
+  outline-offset: var(--amsterdam-tabs-button-outline-offset);
+  padding-block: var(--amsterdam-tabs-button-padding-block);
+  padding-inline: var(--amsterdam-tabs-button-padding-inline);
+
+  &:disabled {
+    color: var(--amsterdam-tabs-button-disabled-color);
+    cursor: var(--amsterdam-tab-button-disabled-cursor);
+  }
+
+  &:hover:not([aria-selected="true"], [disabled]) {
+    box-shadow: var(--amsterdam-tabs-button-hover-box-shadow);
+    color: var(--amsterdam-tabs-button-hover-color);
+  }
+
+  &[aria-selected="true"] {
+    background-color: var(--amsterdam-tabs-button-selected-background-color);
+    color: var(--amsterdam-tabs-button-selected-color);
+  }
+}

package/src/components/text-area/README.md

@@ -0,0 +1,17 @@
+<!-- @license CC0-1.0 -->
+
+# TextArea
+
+A form field that allows the user to input text over multiple lines.
+
+## Guidelines
+
+- Use a TextArea when users need to enter more than 1 sentence of text, such as a comment or description.
+- The height of the TextArea should be appropriate for the information to be entered.
+- A TextArea must have a label, and in most cases, this label should be visible.
+- Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
+  Some browser extensions for spell-checking send this information to external servers.
+
+## Accessibility
+
+- [WCAG 2.1](https://www.w3.org/WAI/WCAG21/Techniques/html/H91.html) requires that the TextArea has a label or title attribute.