@digigov/ui 0.22.0 → 0.24.1

package/core/Radios/__stories__/MultipleQuestions.js

@@ -21,9 +21,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, {
+  "aria-describedby": "country-hint"
+}, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Hint["default"], 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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.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["default"].createElement(_Hint["default"], {
+  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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   name: "country",
   value: "greece"
 }, "\u0395\u03BB\u03BB\u03AC\u03B4\u03B1"), /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {

package/core/Radios/__stories__/WithErrorMessage.js

@@ -27,7 +27,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], {
   error: true
-}, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Hint["default"], 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["default"].createElement(_ErrorMessage["default"], null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], 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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
+}, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, {
+  "aria-describedby": "travel-hint travel-error"
+}, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Hint["default"], {
+  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["default"].createElement(_ErrorMessage["default"], {
+  id: "travel-error"
+}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden["default"], 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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   name: "cold",
   value: "cold"
 }, "\u0391\u03B3\u03B3\u03BB\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {

package/core/Radios/__stories__/WithHints.js

@@ -21,15 +21,25 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Field.FieldsetLegend, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Field.Fieldset, {
+  "aria-describedby": "login-hint"
+}, /*#__PURE__*/_react["default"].createElement(_Field.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["default"].createElement(_Hint["default"], 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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
+}, "\u03A0\u03CE\u03C2 \u03B8\u03AD\u03BB\u03B5\u03C4\u03B5 \u03BD\u03B1 \u03C3\u03C5\u03BD\u03B4\u03B5\u03B8\u03B5\u03AF\u03C4\u03B5;"), /*#__PURE__*/_react["default"].createElement(_Hint["default"], {
+  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["default"].createElement(_Radios["default"], null, /*#__PURE__*/_react["default"].createElement(_Radios.RadioItem, {
   name: "login",
-  value: "gsis"
-}, "\u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03B7 \u03BC\u03B5 Taxisnet", /*#__PURE__*/_react["default"].createElement(_Hint["default"], 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["default"].createElement(_Radios.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["default"].createElement(_Hint["default"], 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["default"].createElement(_Hint["default"], {
+  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["default"].createElement(_Radios.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["default"].createElement(_Hint["default"], {
+  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.")))));
 
 var WithHints = function WithHints() {
   return _ref;

package/core/Select/__stories__/Default.js

@@ -22,7 +22,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-  name: "select-list"
+  name: "select-list",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
   value: "dim"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
@@ -33,7 +34,6 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null,
   value: "kat"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
 
-// import LabelTitle from '@digigov/react-core/LabelTitle';
 var Default = function Default() {
   return _ref;
 };

package/core/Select/__stories__/DisabledInput.js

@@ -23,7 +23,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/_react["default"].createElement(_Select["default"], {
   name: "select-list",
-  disabled: true
+  disabled: true,
+  "aria-disabled": "true",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
   value: "dim"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {

package/core/Select/__stories__/WithHint.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const Default: () => JSX.Element;
-export default Default;
+export declare const WithHint: () => JSX.Element;
+export default WithHint;

package/core/Select/__stories__/WithHint.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithHint = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -24,7 +24,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null, /*#__PURE__*/_react["default"].createElement(_Label["default"], null, "\u03A4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7", /*#__PURE__*/_react["default"].createElement(_typography.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["default"].createElement(_Select["default"], {
-  name: "select-list"
+  name: "select-list",
+  "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
   value: "dim"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_Select.SelectOption, {
@@ -35,11 +36,10 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Field["default"], null,
   value: "kat"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
 
-// import LabelTitle from '@digigov/react-core/LabelTitle';
-var Default = function Default() {
+var WithHint = function WithHint() {
   return _ref;
 };
 
-exports.Default = Default;
-var _default = Default;
+exports.WithHint = WithHint;
+var _default = WithHint;
 exports["default"] = _default;

package/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/core/Table/Table.stories.d.ts

@@ -16,3 +16,4 @@ export * from "./__stories__/WithLoader";
 export * from "./__stories__/DefinedWidth";
 export * from "./__stories__/Densed";
 export * from "./__stories__/MultipleProps";
+export * from "./__stories__/WithFloatingScroll";

package/core/Table/Table.stories.js

@@ -192,6 +192,20 @@ Object.keys(_MultipleProps).forEach(function (key) {
   });
 });
 
+var _WithFloatingScroll = require("./__stories__/WithFloatingScroll");
+
+Object.keys(_WithFloatingScroll).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _WithFloatingScroll[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _WithFloatingScroll[key];
+    }
+  });
+});
+
 /* eslint-disable digigov/no-relative-imports */
 var _default = {
   title: 'Digigov UI/core/Table',

package/core/Table/TableFloatingScroll.js

@@ -48,11 +48,13 @@ 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/core/Table/__stories__/NoData.js

@@ -11,7 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactCore = require("@digigov/react-core");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, null, "Table with no data"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"))), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableNoDataRow, null, "No data"))));
+var _ref = /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, null, "Table with no data"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Date"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Amount"))), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableNoDataRow, {
+  "aria-colspan": 100
+}, "No data"))));
 
 var NoData = function NoData() {
   return _ref;

package/core/Table/__stories__/WithFloatingScroll.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WithFloatingScroll: () => JSX.Element;
+export default WithFloatingScroll;

package/core/Table/__stories__/WithFloatingScroll.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithFloatingScroll = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactCore = require("@digigov/react-core");
+
+var _admin = require("@digigov/ui/admin");
+
+var _TableFloatingScroll = _interopRequireDefault(require("@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["default"].createElement(_reactCore.TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, /*#__PURE__*/_react["default"].createElement(_admin.Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/_react["default"].createElement(_admin.DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_admin.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, /*#__PURE__*/_react["default"].createElement(_admin.Dropdown, {
+  "float": true,
+  align: "left",
+  placement: "bottom"
+}, /*#__PURE__*/_react["default"].createElement(_admin.DropdownButton, {
+  variant: "link"
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_admin.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Accept"), /*#__PURE__*/_react["default"].createElement(_reactCore.NavVerticalItem, {
+  href: "#"
+}, "Dismiss")))));
+
+var WithFloatingScroll = function WithFloatingScroll() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TableFloatingScroll["default"], null, /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref)), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref2);
+  })))), /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, Object.keys(data[0]).map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, {
+      key: key
+    }, labels[key]);
+  }), _ref3)), /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, data && data.map(function (dt, index) {
+    return /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, {
+      key: index
+    }, Object.keys(dt).map(function (key) {
+      return /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, {
+        key: key
+      }, dt[key]);
+    }), _ref4);
+  }))));
+};
+
+exports.WithFloatingScroll = WithFloatingScroll;
+var _default = WithFloatingScroll;
+exports["default"] = _default;

package/core/Table/__stories__/WithLoader.js

@@ -15,7 +15,11 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactCore = require("@digigov/react-core");
 
-var _admin = require("@digigov/react-extensions/admin/");
+var _TableLoaderBackground = _interopRequireDefault(require("@digigov/ui/admin/TableLoaderBackground"));
+
+var _LoaderContainer = _interopRequireDefault(require("@digigov/ui/admin/LoaderContainer"));
+
+var _CircularProgress = _interopRequireDefault(require("@digigov/ui/admin/CircularProgress"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -25,46 +29,46 @@ 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["default"].createElement(_admin.LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_admin.CircularProgress, null));
+var _ref = /*#__PURE__*/_react["default"].createElement(_LoaderContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null));
 
 var _ref2 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableCaption, null, "Table loading test");
 
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableHead, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableRow, null, /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Employee name"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Job"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Years"), /*#__PURE__*/_react["default"].createElement(_reactCore.TableHeadCell, null, "Salary")));
 
-var _ref4 = /*#__PURE__*/_react["default"].createElement(_admin.TableLoaderBackground, null, /*#__PURE__*/_react["default"].createElement(_admin.LoaderContainer, null, /*#__PURE__*/_react["default"].createElement(_admin.CircularProgress, null)));
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_TableLoaderBackground["default"], null, /*#__PURE__*/_react["default"].createElement(_LoaderContainer["default"], null, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null)));
 
 var _ref5 = /*#__PURE__*/_react["default"].createElement(_reactCore.TableNoDataRow, null, "No data");
 
@@ -81,7 +85,7 @@ var WithLoader = function WithLoader() {
 
   setTimeout(function () {
     setTableData(data);
-  }, 8000);
+  }, 2000);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "example"
   }, /*#__PURE__*/_react["default"].createElement(_reactCore.TableContainer, null, !tableData ? _ref : /*#__PURE__*/_react["default"].createElement(_reactCore.Table, null, _ref2, _ref3, /*#__PURE__*/_react["default"].createElement(_reactCore.TableBody, null, loading === true && _ref4, tableData && tableData.length > 0 ? tableData.map(function (d, index) {
@@ -90,12 +94,9 @@ var WithLoader = function WithLoader() {
     }, /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.name), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.job), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.year), /*#__PURE__*/_react["default"].createElement(_reactCore.TableDataCell, null, d.salary));
   }) : _ref5))), /*#__PURE__*/_react["default"].createElement(_reactCore.Button, {
     onClick: function onClick() {
-      setLoading(true);
-      setTimeout(function () {
-        setLoading(false);
-      }, 7000);
+      setLoading(!loading);
     }
-  }, "\u03A0\u03C1\u03BF\u03C3\u03B8\u03B7\u03BA\u03B7"));
+  }, "Toggle Loading"));
 };
 
 exports.WithLoader = WithLoader;

package/core/Table/index.mdx

@@ -49,4 +49,11 @@ Use the `<TableCaption>` element to describe a table in the same way you would u
 
 ### Using loader
 
-<Story packageName="@digigov/ui" component="core/Table" story="WithLoader.tsx" />
+<Story packageName="@digigov/ui" component="core/Table" story="WithLoader.tsx" />
+
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Table
+implementation in the ARIA Authoring Practices Guide (APG) at 
+[Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.

package/es/admin/CopyToClipboard/CopyToClipboard.stories.js

@@ -0,0 +1,8 @@
+import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
+export default {
+  title: 'Digigov UI/admin/CopyToClipboard',
+  component: CopyToClipboard
+};
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Default';
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Banner';
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/MultipleCopies';

package/{esm/app → es/admin}/CopyToClipboard/__stories__/Banner.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CopyToClipboard from '@digigov/ui/app/CopyToClipboard';
+import { CopyToClipboard } from '@digigov/ui/admin';
 import { Button } from '@digigov/ui';
 
 var _ref = /*#__PURE__*/React.createElement(CopyToClipboard, {

package/{esm/app → es/admin}/CopyToClipboard/__stories__/Default.js

@@ -1,13 +1,15 @@
 import React from 'react';
-import CopyToClipboard from '@digigov/ui/app/CopyToClipboard';
+import { CopyToClipboard } from '@digigov/ui/admin';
 import { Button } from '@digigov/ui';
 
 var _ref = /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "copied-text",
-  variant: "tooltip",
-  message: "text successfuly copied!"
+  variant: "tooltipLeft",
+  message: "text successfuly copied!",
+  id: "copy-to-clipboard"
 }, /*#__PURE__*/React.createElement(Button, {
-  color: "secondary"
+  color: "secondary",
+  "aria-describedby": "copy-to-clipboard"
 }, "Copy"));
 
 export var Default = function Default() {

package/es/{app → admin}/CopyToClipboard/__stories__/MultipleCopies.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import CopyToClipboard from '@digigov/ui/app/CopyToClipboard';
+import { CopyToClipboard } from '@digigov/ui/admin';
 import { AdminAside, AdminContainer, AdminLayout, AdminMain, AdminTopSection, AdminHeader, AdminHeaderSection, Dropdown, DropdownButton, DropdownContent } from '@digigov/react-extensions/admin';
 import { MoreVertIcon, NavVertical, NavVerticalItem } from '@digigov/react-core';
 import { Accordion, AccordionItem, AccordionSectionSummary, AccordionSectionSummaryHeading } from '@digigov/ui/core/Accordion';
@@ -59,7 +59,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Title, {
 
 var _ref4 = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "AAABBBFFFLLL",
-  variant: "tooltip",
+  variant: "tooltipLeft",
   message: "text successfuly copied!"
 }, /*#__PURE__*/React.createElement(Button, null, "\u0391\u03C0\u03AC\u03BD\u03C4\u03B7\u03C3\u03B7")), /*#__PURE__*/React.createElement(Button, {
   color: "secondary"
@@ -83,7 +83,7 @@ var _ref6 = /*#__PURE__*/React.createElement(Grid, {
   xs: 12
 }, /*#__PURE__*/React.createElement(CopyToClipboard, {
   text: "AAABBBFFFLLL",
-  variant: "tooltip",
+  variant: "tooltipLeft",
   message: "text successfuly copied!"
 }, /*#__PURE__*/React.createElement(Button, {
   color: "secondary"
@@ -108,7 +108,7 @@ export var MultipleCopies = function MultipleCopies() {
     }, /*#__PURE__*/React.createElement(SummaryListItemKey, null, field.name), /*#__PURE__*/React.createElement(SummaryListItemValue, null, field.value), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(ButtonGroup, null, field.actions && field.actions.map(function (action, subIndex) {
       return /*#__PURE__*/React.createElement(CopyToClipboard, {
         text: "MMMNNNKKKO",
-        variant: "tooltip",
+        variant: "tooltipRight",
         key: subIndex
       }, /*#__PURE__*/React.createElement(Button, {
         key: subIndex,

package/es/admin/CopyToClipboard/index.js

@@ -7,7 +7,7 @@ import { useTranslation } from '@digigov/ui/app';
 export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipboard(_ref, ref) {
   var text = _ref.text,
       _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      variant = _ref$variant === void 0 ? 'tooltipRight' : _ref$variant,
       message = _ref.message,
       children = _ref.children;
 
@@ -39,7 +39,8 @@ export var CopyToClipboard = /*#__PURE__*/React.forwardRef(function CopyToClipbo
     ref: ref
   }, children, enabled && /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
     variant: variant,
-    enabled: enabled
+    enabled: enabled,
+    role: "tooltip"
   }, /*#__PURE__*/React.createElement(NormalText, null, message || t('copy-to-clipboard.message'))));
 });
 export default CopyToClipboard;

package/es/admin/CopyToClipboard/index.mdx

@@ -0,0 +1,22 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+```bash
+import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
+``` 
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Default.tsx" />
+
+### Banner
+
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Banner.tsx" />
+
+### Layout example
+
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="MultipleCopies.tsx" />

package/es/admin/Dropdown/Dropdown.stories.js

@@ -0,0 +1,9 @@
+/* eslint-disable digigov/no-relative-imports */
+import Dropdown from '@digigov/ui/admin/Dropdown';
+export default {
+  title: 'Digigov UI/admin/Dropdown',
+  component: Dropdown
+};
+export * from './__stories__/Default';
+export * from './__stories__/AlignRight';
+export * from './__stories__/PlacementTop';