@digigov/ui 0.22.0 → 0.24.1

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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, {

package/esm/core/Radios/__stories__/WithHints.js

@@ -3,15 +3,25 @@ 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": "login-hint"
+}, /*#__PURE__*/React.createElement(FieldsetLegend, {
   size: "m"
-}, "\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;"), /*#__PURE__*/React.createElement(Hint, null, "\u0398\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF\u03C4\u03B5 \u03AD\u03BD\u03B1\u03BD \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03CC \u03BC\u03B5 \u03C4\u03BF\u03BD \u03BF\u03C0\u03BF\u03AF\u03BF \u03B8\u03B1 \u03B1\u03C0\u03BF\u03B4\u03B5\u03AF\u03BE\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03CD\u03C4\u03BF\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C7\u03C9\u03C1\u03AE\u03C3\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
+}, "\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;"), /*#__PURE__*/React.createElement(Hint, {
+  id: "login-hint"
+}, "\u0398\u03B1 \u03C7\u03C1\u03B5\u03B9\u03B1\u03C3\u03C4\u03B5\u03AF\u03C4\u03B5 \u03AD\u03BD\u03B1\u03BD \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03B1\u03C3\u03BC\u03CC \u03BC\u03B5 \u03C4\u03BF\u03BD \u03BF\u03C0\u03BF\u03AF\u03BF \u03B8\u03B1 \u03B1\u03C0\u03BF\u03B4\u03B5\u03AF\u03BE\u03B5\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03CD\u03C4\u03BF\u03C4\u03B7\u03C4\u03B1 \u03C3\u03B1\u03C2 \u03CE\u03C3\u03C4\u03B5 \u03BD\u03B1 \u03C0\u03C1\u03BF\u03C7\u03C9\u03C1\u03AE\u03C3\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(Radios, null, /*#__PURE__*/React.createElement(RadioItem, {
   name: "login",
-  value: "gsis"
-}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet", /*#__PURE__*/React.createElement(Hint, null, "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 Taxisnet \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B8\u03B5\u03AF\u03C4\u03B5")), /*#__PURE__*/React.createElement(RadioItem, {
-  name: "country",
-  value: "cyprus"
-}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03C3\u03BC\u03CC e-banking", /*#__PURE__*/React.createElement(Hint, null, "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 \u03C4\u03BF\u03C5 e-banking \u03C4\u03B7\u03C2 \u03C4\u03C1\u03AC\u03C0\u03B5\u03B6\u03B1\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B8\u03B5\u03AF\u03C4\u03B5")))));
+  value: "gsis",
+  "aria-describedby": "gsis-hint"
+}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet", /*#__PURE__*/React.createElement(Hint, {
+  id: "gsis-hint"
+}, "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 Taxisnet \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B8\u03B5\u03AF\u03C4\u03B5")), /*#__PURE__*/React.createElement(RadioItem, {
+  name: "login",
+  value: "ebanking",
+  "aria-describedby": "ebanking-hint"
+}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 \u03BB\u03BF\u03B3\u03B1\u03C1\u03B9\u03C3\u03BC\u03CC e-banking", /*#__PURE__*/React.createElement(Hint, {
+  id: "ebanking-hint"
+}, "\u0398\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03AD\u03C7\u03B5\u03C4\u03B5 \u03C4\u03BF\u03C5\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03BF\u03CD\u03C2 \u03C4\u03BF\u03C5 e-banking \u03C4\u03B7\u03C2 \u03C4\u03C1\u03AC\u03C0\u03B5\u03B6\u03B1\u03C2 \u03B3\u03B9\u03B1 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5.")))));
 
 export var WithHints = function WithHints() {
   return _ref;

package/esm/core/Select/__stories__/Default.js

@@ -1,10 +1,11 @@
-import React from "react";
-import Select, { SelectOption } from "@digigov/ui/core/Select";
+import React from 'react';
+import Select, { SelectOption } from '@digigov/ui/core/Select';
 import Field from '@digigov/ui/core/Field';
-import Label from '@digigov/react-core/Label'; // import LabelTitle from '@digigov/react-core/LabelTitle';
+import Label from '@digigov/react-core/Label';
 
 var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
-  name: "select-list"
+  name: "select-list",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/React.createElement(SelectOption, {
   value: "dim"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/React.createElement(SelectOption, {

package/esm/core/Select/__stories__/DisabledInput.js

@@ -1,11 +1,13 @@
-import React from "react";
-import Select, { SelectOption } from "@digigov/ui/core/Select";
+import React from 'react';
+import Select, { SelectOption } from '@digigov/ui/core/Select';
 import Field from '@digigov/ui/core/Field';
 import Label from '@digigov/react-core/Label';
 
 var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Select, {
   name: "select-list",
-  disabled: true
+  disabled: true,
+  "aria-disabled": "true",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/React.createElement(SelectOption, {
   value: "dim"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/React.createElement(SelectOption, {

package/esm/core/Select/__stories__/WithHint.js

@@ -1,11 +1,12 @@
-import React from "react";
-import Select, { SelectOption } from "@digigov/ui/core/Select";
+import React from 'react';
+import Select, { SelectOption } from '@digigov/ui/core/Select';
 import Field from '@digigov/ui/core/Field';
 import Label from '@digigov/react-core/Label';
-import { Hint } from "@digigov/ui/typography"; // import LabelTitle from '@digigov/react-core/LabelTitle';
+import { Hint } from '@digigov/ui/typography';
 
 var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.createElement(Label, null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/React.createElement(Hint, null, "\u0395\u03C0\u03B9\u03BB\u03AD\u03BE\u03C4\u03B5 \u03C4\u03B7\u03BD \u03C4\u03B1\u03BE\u03B9\u03BC\u03CC\u03BD\u03B7\u03C3\u03B7 \u03C0\u03BF\u03C5 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5."), /*#__PURE__*/React.createElement(Select, {
-  name: "select-list"
+  name: "select-list",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/React.createElement(SelectOption, {
   value: "dim"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/React.createElement(SelectOption, {
@@ -16,7 +17,7 @@ var _ref = /*#__PURE__*/React.createElement(Field, null, /*#__PURE__*/React.crea
   value: "kat"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
 
-export var Default = function Default() {
+export var WithHint = function WithHint() {
   return _ref;
 };
-export default Default;
+export default WithHint;

package/esm/core/Select/index.mdx

@@ -34,3 +34,9 @@ Error messages should be styled like this:
 
 
 
+You can read more about the accessibility patterns used in our Select
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
+
+
+

package/esm/core/Table/Table.stories.js

@@ -16,4 +16,5 @@ export * from './__stories__/DarkVariantWithVerticalHeaders';
 export * from './__stories__/WithLoader';
 export * from './__stories__/DefinedWidth';
 export * from './__stories__/Densed';
-export * from './__stories__/MultipleProps';
+export * from './__stories__/MultipleProps';
+export * from './__stories__/WithFloatingScroll';

package/esm/core/Table/TableFloatingScroll.js

@@ -30,11 +30,13 @@ export function TableFloatingScroll(props) {
     var elementOffset = contentRef.current.offsetTop + contentRef.current.offsetHeight;
 
     function onBodyScroll() {
-      var currentScroll = window.pageYOffset + window.innerHeight; // @ts-ignore
+      var currentScroll = window.pageYOffset + window.innerHeight;
 
-      if (currentScroll < elementOffset && currentScroll > contentRef.current.offsetTop) {
-        setPosition('fixed'); // @ts-ignore
-      } else if (currentScroll >= elementOffset || currentScroll <= contentRef.current.offsetTop) {
+      if (currentScroll < elementOffset && // @ts-ignore
+      currentScroll > contentRef.current.offsetTop) {
+        setPosition('fixed');
+      } else if (currentScroll >= elementOffset || // @ts-ignore
+      currentScroll <= contentRef.current.offsetTop) {
         setPosition('relative');
       }
     }

package/esm/core/Table/__stories__/NoData.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableNoDataRow } from '@digigov/react-core';
 
-var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with no data"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableNoDataRow, null, "No data"))));
+var _ref = /*#__PURE__*/React.createElement(TableContainer, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Table with no data"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Date"), /*#__PURE__*/React.createElement(TableHeadCell, null, "Amount"))), /*#__PURE__*/React.createElement(TableBody, null, /*#__PURE__*/React.createElement(TableNoDataRow, {
+  "aria-colspan": 100
+}, "No data"))));
 
 export var NoData = function NoData() {
   return _ref;

package/esm/core/Table/__stories__/WithFloatingScroll.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, NavVertical, NavVerticalItem } from '@digigov/react-core';
+import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/admin';
+import TableFloatingScroll from '@digigov/ui/core/Table/TableFloatingScroll';
+var labels = {
+  name: 'Ονοματεπώνυμο',
+  email: 'Email',
+  phone: 'Τηλέφωνο',
+  role: 'Ρόλος',
+  status: 'Κατάσταση',
+  actions: 'Ενέργειες',
+  at: 'Αριθμός Ταυτότητας',
+  zip: 'Ταχυδρομικός Κώδικας',
+  address: 'Διεύθυνση',
+  city: 'Πόλη',
+  country: 'Χώρα',
+  active: 'Ενεργός',
+  last_login: 'Τελευταία Σύνδεση',
+  last_login_agent: 'Τελευταία Σύνδεση Αξεσουάρ',
+  last_login_ip: 'Τελευταία Σύνδεση IP',
+  afm: 'ΑΦΜ'
+};
+var data = new Array(20).fill({
+  name: 'Τάκης Τσούκαλος',
+  afm: '1111111114',
+  role: 'Χειριστής',
+  at: '1212121',
+  email: 'myhomeemail@gov.gr',
+  phone: '22222222',
+  address: 'Αγία Παρασκευής',
+  city: 'Αγία Παρασκευή',
+  country: 'Ελλάδα',
+  zip: '222233',
+  active: 'Ναι',
+  last_login: '12/12/12',
+  last_login_ip: '0.0.0.0',
+  last_login_agent: 'Firefox'
+});
+
+var _ref = /*#__PURE__*/React.createElement(TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref2 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/React.createElement(Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+var _ref3 = /*#__PURE__*/React.createElement(TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref4 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/React.createElement(Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/React.createElement(DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+export var WithFloatingScroll = function WithFloatingScroll() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TableFloatingScroll, null, /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref)), /*#__PURE__*/React.createElement(TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/React.createElement(TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref2);
+  })))), /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/React.createElement(TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref3)), /*#__PURE__*/React.createElement(TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/React.createElement(TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/React.createElement(TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref4);
+  }))));
+};
+export default WithFloatingScroll;

package/esm/core/Table/__stories__/WithLoader.js

@@ -1,42 +1,44 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { Button, TableContainer, Table, TableCaption, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell, TableNoDataRow } from '@digigov/react-core';
-import { LoaderContainer, CircularProgress, TableLoaderBackground } from '@digigov/react-extensions/admin/';
+import TableLoaderBackground from '@digigov/ui/admin/TableLoaderBackground';
+import LoaderContainer from '@digigov/ui/admin/LoaderContainer';
+import CircularProgress from '@digigov/ui/admin/CircularProgress';
 var data = [{
   name: 'Dimitris',
   job: 'carpenter',
   year: '5 years',
-  salary: '10.80$'
+  salary: '10.80€'
 }, {
   name: 'Katerina',
   job: 'engineer',
   year: '6 years',
-  salary: '19.60$'
+  salary: '19.60€'
 }, {
   name: 'Vasilis',
   job: 'taxi driver',
   year: '10 years',
-  salary: '12.83$'
+  salary: '12.83€'
 }, {
   name: 'Giorgos',
   job: 'yoga master',
   year: '15 years',
-  salary: '27.80$'
+  salary: '27.80€'
 }, {
   name: 'Giannis',
   job: 'unemployed',
   year: '5 years',
-  salary: '00.00$'
+  salary: '00.00€'
 }, {
   name: 'Katerina',
   job: 'car driver',
   year: '10 years',
-  salary: '11.80$'
+  salary: '11.80€'
 }, {
   name: 'Thanasis',
   job: 'babysitter',
   year: '5 years',
-  salary: '15.80$'
+  salary: '15.80€'
 }];
 
 var _ref = /*#__PURE__*/React.createElement(LoaderContainer, null, /*#__PURE__*/React.createElement(CircularProgress, null));
@@ -62,7 +64,7 @@ export var WithLoader = function WithLoader() {
 
   setTimeout(function () {
     setTableData(data);
-  }, 8000);
+  }, 2000);
   return /*#__PURE__*/React.createElement("div", {
     className: "example"
   }, /*#__PURE__*/React.createElement(TableContainer, null, !tableData ? _ref : /*#__PURE__*/React.createElement(Table, null, _ref2, _ref3, /*#__PURE__*/React.createElement(TableBody, null, loading === true && _ref4, tableData && tableData.length > 0 ? tableData.map(function (d, index) {
@@ -71,11 +73,8 @@ export var WithLoader = function WithLoader() {
     }, /*#__PURE__*/React.createElement(TableDataCell, null, d.name), /*#__PURE__*/React.createElement(TableDataCell, null, d.job), /*#__PURE__*/React.createElement(TableDataCell, null, d.year), /*#__PURE__*/React.createElement(TableDataCell, null, d.salary));
   }) : _ref5))), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
-      setLoading(true);
-      setTimeout(function () {
-        setLoading(false);
-      }, 7000);
+      setLoading(!loading);
     }
-  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03B7\u03BA\u03B7"));
+  }, "Toggle Loading"));
 };
 export default WithLoader;