@digigov/ui 0.22.0 → 0.24.1

package/es/core/Button/__stories__/GroupingButtonsAndLinks.js

@@ -5,7 +5,9 @@ import Link from '@digigov/ui/core/Link';
  * My deescrition is the best description that was described
  */
 
-var _ref = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"));
+var _ref = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"), /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"));
 
 export var GroupingButtonsAndLinks = function GroupingButtonsAndLinks() {
   return _ref;

package/es/core/Button/__stories__/Primary.js

@@ -4,7 +4,9 @@ import Button from '@digigov/ui/core/Button';
  * My primary descrition is the best description that was described
  */
 
-var _ref = /*#__PURE__*/React.createElement(Button, null, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+var _ref = /*#__PURE__*/React.createElement(Button, {
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+}, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 export var Primary = function Primary() {
   return _ref;

package/es/core/Button/__stories__/Secondary.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import Button from '@digigov/ui/core/Button';
 /**
- * My primary descrition is the best description that was described 
+ * My primary descrition is the best description that was described
  */
 
 var _ref = /*#__PURE__*/React.createElement(Button, {
-  color: "secondary"
+  color: "secondary",
+  "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
 }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
 
 export var Secondary = function Secondary() {

package/es/core/Button/__stories__/Warning.js

@@ -2,10 +2,10 @@ import React from 'react';
 import Button from '@digigov/ui/core/Button';
 
 var _ref = /*#__PURE__*/React.createElement(Button, {
-  color: "warning"
+  color: "warning",
+  "aria-label": "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF\u03C5"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE");
 
 export var Warning = function Warning() {
   return _ref;
-};
-export default Warning;
+};

package/es/core/Button/__stories__/WithVariantLink.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Button from '@digigov/ui/core/Button';
+/**
+ * My primary descrition is the best description that was described
+ */
+
+export var WithVariantLink = function WithVariantLink() {
+  return /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick() {
+      console.log('clicked');
+    },
+    variant: "link",
+    "aria-label": "\u03A3\u03C5\u03BD\u03B5\u03C7\u03AF\u03C3\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B5\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7 \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"
+  }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1");
+};
+export default WithVariantLink;

package/{core/Button/Button.mdx → es/core/Button/index.mdx}

@@ -59,7 +59,7 @@ Any links within a button group will automatically align with the buttons.
 Write button text in sentence case, describing the action it performs. For
 example:'
 
-- `Start now` at the [start of the service](patterns/start-pages.md)
+- `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
 - `Sign in` to an account a user has already created
 - `Continue` when the service does not save a user's information
 - `Save and continue` when the service does save a user's information
@@ -87,4 +87,11 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+Read more about [how to use the React types](/docs/api/Button)
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Select
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.

package/es/core/Checkboxes/__stories__/ConditionalReveal.js

@@ -4,7 +4,11 @@ import TextInput from '@digigov/ui/core/TextInput';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "contact-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "contact-hint"
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   checked: true,
   name: "email",
   value: "email"

package/es/core/Checkboxes/__stories__/Default.js

@@ -3,7 +3,11 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "feeling-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/es/core/Checkboxes/__stories__/MultipleQuestions.js

@@ -3,9 +3,13 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "feeling-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, {
   size: "s"
-}, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+}, "\u03A0\u03CE\u03C2 \u03B1\u03B9\u03C3\u03B8\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03C5\u03C4\u03AE \u03C4\u03B7 \u03C3\u03C4\u03B9\u03B3\u03BC\u03AE;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "feeling-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0388\u03C7\u03C9 \u03C3\u03C5\u03BD\u03AC\u03C7\u03B9"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/es/core/Checkboxes/__stories__/NoneAnswer.js

@@ -3,7 +3,11 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "travel-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "travel-hint"
+}, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/es/core/Checkboxes/__stories__/NoneAnswerWithError.js

@@ -7,7 +7,13 @@ import ErrorMessage from '@digigov/react-core/ErrorMessage';
 
 var _ref = /*#__PURE__*/React.createElement(Field, {
   error: true
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2 \u03C3\u03C4\u03B9\u03C2 \u03BF\u03C0\u03BF\u03AF\u03B5\u03C2 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5, \u03AE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \xAB\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2\xBB."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "travel-hint travel-error"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "travel-hint"
+}, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, {
+  id: "travel-error"
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2 \u03C3\u03C4\u03B9\u03C2 \u03BF\u03C0\u03BF\u03AF\u03B5\u03C2 \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5, \u03AE \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \xAB\u038C\u03C7\u03B9, \u03B4\u03B5\u03BD \u03B8\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03C9 \u03C3\u03B5 \u03BA\u03B1\u03BC\u03AF\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2\xBB."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   checked: true,
   name: "en",
   value: "en"

package/es/core/Checkboxes/__stories__/WithErrorMessage.js

@@ -7,7 +7,13 @@ import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement(Field, {
   error: true
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "nationality-hint nationality-error"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "nationality-hint"
+}, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(ErrorMessage, {
+  id: "nationality-error"
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03BC\u03AF\u03B1 \u03AE \u03C0\u03B1\u03C1\u03B1\u03C0\u03AC\u03BD\u03C9 \u03C7\u03CE\u03C1\u03B5\u03C2."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(CheckboxItem, {

package/es/core/Checkboxes/__stories__/WithHint.js

@@ -3,7 +3,11 @@ import Checkboxes, { CheckboxItem } from '@digigov/ui/core/Checkboxes';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B5\u03B8\u03BD\u03B9\u03BA\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "nationality-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B7 \u03B5\u03B8\u03BD\u03B9\u03BA\u03CC\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "nationality-hint"
+}, "\u0391\u03BD \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C0\u03BF\u03BB\u03BB\u03B1\u03C0\u03BB\u03AE \u03C5\u03C0\u03B7\u03BA\u03BF\u03CC\u03C4\u03B7\u03C4\u03B1, \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Checkboxes, null, /*#__PURE__*/React.createElement(CheckboxItem, {
   name: "cold",
   value: "cold"
 }, "\u0395\u03BB\u03BB\u03B7\u03BD\u03B9\u03BA\u03AE", /*#__PURE__*/React.createElement(Hint, null, "\u03C3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03B1\u03BD\u03BF\u03BC\u03AD\u03BD\u03C9\u03BD \u03B1\u03C0\u03CC\u03B4\u03B7\u03BC\u03C9\u03BD \u03C0\u03BF\u03BB\u03B9\u03C4\u03CE\u03BD")), /*#__PURE__*/React.createElement(CheckboxItem, {

package/es/core/Link/__stories__/DarkBackground.js

@@ -1,11 +1,13 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
-import { Masthead } from "@digigov/ui/layouts";
-import SectionBreak from "@digigov/ui/core/Divider";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
+import { Masthead } from '@digigov/ui/layouts';
+import SectionBreak from '@digigov/ui/core/Divider';
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#"
-}, " govgr link  "), /*#__PURE__*/React.createElement(SectionBreak, null));
+}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
 
 export var DarkBackground = function DarkBackground() {
   return _ref;

package/es/core/Link/__stories__/DarkBackgroundNoUnderline.js

@@ -1,12 +1,14 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
-import { Masthead } from "@digigov/ui/layouts";
-import SectionBreak from "@digigov/ui/core/Divider";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
+import { Masthead } from '@digigov/ui/layouts';
+import SectionBreak from '@digigov/ui/core/Divider';
 
 var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#",
   underline: false
-}, " govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
+}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
 
 export var DarkBackgroundNoUnderline = function DarkBackgroundNoUnderline() {
   return _ref;

package/es/core/Link/__stories__/Default.js

@@ -1,9 +1,11 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#"
-}, " govgr link ");
+}, "govgr link");
 
 export var Default = function Default() {
   return _ref;

package/es/core/Link/__stories__/NoUnderline.js

@@ -1,10 +1,12 @@
-import React from "react";
-import Link from "@digigov/ui/core/Link";
+import React from 'react';
+import Link from '@digigov/ui/core/Link';
 
 var _ref = /*#__PURE__*/React.createElement(Link, {
+  "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
+  role: "link",
   href: "#",
   underline: false
-}, " govgr link ");
+}, "govgr link");
 
 export var NoUnderline = function NoUnderline() {
   return _ref;

package/es/core/Link/link.mdx

@@ -28,3 +28,7 @@ import Link from '@digigov/ui/core/Link';
 ### At dark background and no underline
 
 <Story packageName="@digigov/ui" component="core/Link" story="DarkBackgroundNoUnderline.tsx" />
+
+You can read more about the accessibility patterns used in our Link
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.

package/es/core/NavList/NavList.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["horizontal", "openSubMenus", "links"];
+var _excluded = ["horizontal", "openSubMenus", "links", "role"];
 import React from 'react';
 import { NavListProvider } from '@digigov/ui/core/NavList/NavListContext';
 import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
@@ -10,6 +10,7 @@ export var NavList = function NavList(_ref) {
       openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
       _ref$links = _ref.links,
       links = _ref$links === void 0 ? [] : _ref$links,
+      role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(NavListProvider, {
@@ -17,7 +18,8 @@ export var NavList = function NavList(_ref) {
     horizontal: horizontal,
     links: links
   }, /*#__PURE__*/React.createElement(NavListBase, _extends({
-    horizontal: horizontal
+    horizontal: horizontal,
+    role: role
   }, props)));
 };
 export default NavList;

package/es/core/NavList/NavList.stories.js

@@ -0,0 +1,7 @@
+import NavList from '@digigov/ui/core/NavList';
+export default {
+  title: 'Digigov UI/core/NavList',
+  component: NavList
+};
+export * from '@digigov/ui/core/NavList/__stories__/Default';
+export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

package/es/core/NavList/NavListBase.js

@@ -1,5 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "floating", "horizontal", "subMenu"];
+var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
 import React from 'react';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
@@ -46,11 +46,13 @@ export var NavListBase = function NavListBase(_ref) {
       floating = _ref.floating,
       horizontal = _ref.horizontal,
       subMenu = _ref.subMenu,
+      role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var classes = useNavListStyles();
   return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("ul", {
     style: props.style,
+    role: role,
     className: clsx(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
   }, children), /*#__PURE__*/React.createElement("div", {
     className: classes.floatClear

package/es/core/NavList/NavListItem.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "expandOn", "children", "href", "className", "selected"];
+var _excluded = ["name", "expandOn", "children", "href", "className", "selected", "role"];
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import Divider from '@digigov/react-core/SectionBreak';
@@ -41,6 +41,7 @@ export var NavListItem = function NavListItem(_ref) {
       href = _ref.href,
       className = _ref.className,
       passSelected = _ref.selected,
+      role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(false),
@@ -132,6 +133,7 @@ export var NavListItem = function NavListItem(_ref) {
     selected: selected,
     isNested: subMenu && subMenu.length > 0,
     horizontal: horizontal,
+    role: role,
     className: clsx(className, classes.root)
   }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/React.createElement(NavListSubMenu, {
     style: style,

package/es/core/NavList/NavListItemBase.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick"];
+var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick", "role"];
 import React, { useState, useEffect } from 'react';
 import clsx from 'clsx';
 import { makeStyles } from '@material-ui/core/styles';
@@ -93,6 +93,7 @@ export var NavListItemBase = /*#__PURE__*/React.forwardRef(function NavListItemB
       isNested = _ref.isNested,
       expandOn = _ref.expandOn,
       onClick = _ref.onClick,
+      role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var classes = useNavListItemBaseStyles();
@@ -116,13 +117,16 @@ export var NavListItemBase = /*#__PURE__*/React.forwardRef(function NavListItemB
   return /*#__PURE__*/React.createElement("li", {
     ref: ref,
     className: clsx(className, classes.root, horizontal && classes.horizontal),
-    onClick: onClick
+    onClick: onClick,
+    role: "none"
   }, /*#__PURE__*/React.createElement("div", {
     className: clsx(horizontal ? classes.horizontal : classes.vertical, (selected || privateSelected) && classes.selected)
   }, /*#__PURE__*/React.createElement(Link, _extends({
     href: href,
     className: classes.link
-  }, props), /*#__PURE__*/React.createElement("span", {
+  }, props, {
+    role: role
+  }), /*#__PURE__*/React.createElement("span", {
     className: classes.label
   }, label), /*#__PURE__*/React.createElement("span", {
     className: clsx(classes.icon, open && classes.open)

package/es/core/NavList/__stories__/Default.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import NavList, { NavListItem } from '@digigov/ui/core/NavList';
+var links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }, {
+    name: 'Nav2.4',
+    href: '#',
+    label: 'Nav list item 2.4'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavList, {
+    links: links,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/React.createElement(NavListItem, {
+      key: key,
+      name: link.name,
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false'
+    });
+  })));
+};
+export default Default;

package/es/core/NavList/__stories__/NavHorizontalLayout.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import NavList, { NavListItem } from '@digigov/ui/core/NavList';
+var links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+export var NavHorizontalLayout = function NavHorizontalLayout() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavList, {
+    horizontal: true,
+    links: links,
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list"
+  }, links.map(function (link, key) {
+    return /*#__PURE__*/React.createElement(NavListItem, {
+      "aria-label": link.label,
+      role: "menuitem",
+      "aria-haspopup": link.subMenu ? 'true' : 'false',
+      key: key,
+      name: link.name
+    });
+  })));
+};
+export default NavHorizontalLayout;

package/es/core/NavList/index.mdx

@@ -1,4 +1,25 @@
 ---
+id: NavList
 title: NavList
-parent: docs/ui/components
 ---
+
+```bash
+import NavList, { NavListItem } from '@digigov/ui/core/NavList';
+```
+
+## How to use
+
+### Vertical NavList
+
+<Story packageName="@digigov/ui" component="core/NavList" story="Default.tsx" />
+
+### Horizontal NavList
+
+<Story packageName="@digigov/ui" component="core/NavList" story="NavHorizontalLayout.tsx" />
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our NavList
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Menu or Menu bar](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).

package/es/core/Radios/__stories__/ConditionalReveal.js

@@ -4,7 +4,11 @@ import TextInput from '@digigov/ui/core/TextInput';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "contact-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u03A0\u03C9\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AE\u03C3\u03BF\u03C5\u03BC\u03B5 \u03BC\u03B1\u03B6\u03AF \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "contact-hint"
+}, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9 \u03C3\u03C4\u03B7\u03BD \u03C0\u03B5\u03C1\u03AF\u03C0\u03C4\u03C9\u03C3\u03B7 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
   checked: true,
   name: "contact",
   value: "email"

package/es/core/Radios/__stories__/Inline.js

@@ -3,7 +3,11 @@ import Radios, { RadioItem } from '@digigov/ui/core/Radios';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Radios, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "name-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B1\u03BB\u03BB\u03AC\u03BE\u03B5\u03B9 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "\u03A3\u03C5\u03BC\u03C0\u03B5\u03C1\u03B9\u03BB\u03B1\u03BC\u03B2\u03AC\u03BD\u03B5\u03C4\u03B1\u03B9 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03B5\u03C0\u03AF\u03B8\u03B5\u03C4\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03AE \u03B1\u03BB\u03BB\u03B1\u03B3\u03AE \u03C4\u03BF\u03C5 \u03C4\u03C1\u03CC\u03C0\u03BF\u03C5 \u03C0\u03BF\u03C5 \u03B3\u03C1\u03AC\u03C6\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03C3\u03B1\u03C2."), /*#__PURE__*/React.createElement(Radios, {
   inline: true
 }, /*#__PURE__*/React.createElement(RadioItem, {
   name: "changed_name",

package/es/core/Radios/__stories__/MultipleQuestions.js

@@ -3,9 +3,13 @@ import Radios, { RadioItem } from '@digigov/ui/core/Radios';
 import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
 import Hint from '@digigov/ui/typography/Hint';
 
-var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "country-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, {
   size: "s"
-}, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
+}, "\u03A0\u03BF\u03B9\u03B1 \u03B5\u03B9\u03BD\u03B1\u03B9 \u03B7 \u03C7\u03CE\u03C1\u03B1 \u03C4\u03B7\u03C2 \u03B4\u03B9\u03B1\u03BC\u03BF\u03BD\u03AE\u03C2 \u03C3\u03B1\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "country-hint"
+}, "\u03A0\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B1\u03C2 \u03C3\u03C7\u03B5\u03C4\u03B9\u03BA\u03AC \u03BC\u03B5 \u03C0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B5\u03C2 \u03B1\u03BB\u03BB\u03B1\u03B3\u03AD\u03C2. \u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03CC,\u03C4\u03B9 \u03B9\u03C3\u03C7\u03CD\u03B5\u03B9."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
   name: "country",
   value: "greece"
 }, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {

package/es/core/Radios/__stories__/WithErrorMessage.js

@@ -7,7 +7,13 @@ import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement(Field, {
   error: true
-}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, null, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03CC\u03BD\u03BF \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE."), /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03B1\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
+}, /*#__PURE__*/React.createElement(Fieldset, {
+  "aria-describedby": "travel-hint travel-error"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, null, "\u0398\u03B1 \u03C4\u03B1\u03BE\u03B9\u03B4\u03AD\u03C8\u03B5\u03C4\u03B5 \u03C3\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03B1 \u03B1\u03C0\u03CC \u03B1\u03C5\u03C4\u03AD\u03C2 \u03C4\u03B9\u03C2 \u03C7\u03CE\u03C1\u03B5\u03C2;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "travel-hint"
+}, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF\u03C4\u03B5 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03CC\u03BD\u03BF \u03BC\u03AF\u03B1 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE."), /*#__PURE__*/React.createElement(ErrorMessage, {
+  id: "travel-error"
+}, /*#__PURE__*/React.createElement(VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), " \u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03C0\u03B9\u03BB\u03AD\u03BE\u03B5\u03C4\u03B5 \u03BC\u03B9\u03B1 \u03B1\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {