{
  "block": 106139994,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "7118.371428 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-17T21:21:45",
  "trx_id": "bc7b3b7b34463b4e4a918b4521bd437bf608c09c",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 105963519,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "4406.161023 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-05-11T17:39:06",
  "trx_id": "fd822476576406aad4088dff5af027fe43c2eede",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 105507729,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "7130.887184 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-04-25T20:47:12",
  "trx_id": "91a97f9b2767a03e5d3d39c64267806ef24705a1",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 102842607,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "4447.707842 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2026-01-23T00:06:51",
  "trx_id": "afdd2db58a0f8662bc9b6d98d682f49e0802cf82",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 91289046,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "4611.927039 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2024-12-16T19:27:33",
  "trx_id": "fad424ab78501c525ccb38cfc9ccc56e86ad231b",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 79843326,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "4781.060571 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-11-13T11:13:39",
  "trx_id": "25160375a21bcb09af5494b84150614193f79800",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 78343786,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "7718.339357 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2023-09-21T18:26:42",
  "trx_id": "ec2924a0912ed7844ece2623132fa080efb0bbcd",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 69109592,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "7940.020795 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-11-03T08:38:03",
  "trx_id": "36b655c506af76901694085b68e705fe49caba74",
  "trx_in_block": 2,
  "virtual_op": 0
}

{
  "block": 60806084,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "8160.554026 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2022-01-17T08:09:51",
  "trx_id": "6141e5e7e448d5dd4649e62e675d3e9ff7d72221",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 54604612,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "8344.322684 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2021-06-13T22:12:03",
  "trx_id": "424540928b66789d8637824c3869090d739fb368",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 49352179,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "8531.744658 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-11T08:34:42",
  "trx_id": "7b8ac53b32217f6bd3b2a2eae455d8e70ac76486",
  "trx_in_block": 4,
  "virtual_op": 0
}

{
  "block": 49203746,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "1912.543513 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-12-06T02:12:09",
  "trx_id": "6a93671b8383ac10780d376483fb715f884ff36a",
  "trx_in_block": 8,
  "virtual_op": 0
}

{
  "block": 48907543,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "8548.871275 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-11-25T15:40:30",
  "trx_id": "e464b09ec0bd3856985a3a1b3acfa72bf5a03dc9",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 43213958,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "8740.757871 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-09T03:06:54",
  "trx_id": "e31551f0f82d41e3ff370a199510e727be0fbc4b",
  "trx_in_block": 13,
  "virtual_op": 0
}

{
  "block": 43189589,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "1953.311140 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-05-08T06:19:09",
  "trx_id": "e6e394ec4b99044b919d6ea4685d0116bcb7dd7e",
  "trx_in_block": 3,
  "virtual_op": 0
}

{
  "block": 42557937,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "8753.792888 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2020-04-15T17:37:54",
  "trx_id": "88f1339cfff59443fe318b2719df22d65417b84d",
  "trx_in_block": 15,
  "virtual_op": 0
}

{
  "block": 39139212,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @andreafalzetti! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@andreafalzetti/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>\n\n<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@andreafalzetti) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=andreafalzetti)_</sub>\n\n\n###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "andreafalzetti",
      "parent_permlink": "building-an-accessible-and-re-usable-react-component",
      "permlink": "steemitboard-notify-andreafalzetti-20191218t074833000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-12-18T07:48:33",
  "trx_id": "67ddf3082f3d514c689f2c76b85dc2651a011633",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 35780025,
  "op": [
    "transfer",
    {
      "amount": "0.001 STEEM",
      "from": "dtube",
      "memo": "Time is running out, claim your DTube account now before anyone else can! Login at https://d.tube",
      "to": "andreafalzetti"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-08-22T16:40:48",
  "trx_id": "ace58d85f58c80b0dca09dd5d1096532cf1426ed",
  "trx_in_block": 23,
  "virtual_op": 0
}

{
  "block": 32841019,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "8949.415355 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2019-05-12T11:10:48",
  "trx_id": "2cfa80ab3253fdc929c8b7c9329089e42fce17de",
  "trx_in_block": 12,
  "virtual_op": 0
}

{
  "block": 28665043,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @andreafalzetti! You received a personal award!\n\n<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@andreafalzetti/birthday1.png</td><td>1 Year on Steemit</td></tr></table>\n\n<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@andreafalzetti)_</sub>\n\n\n> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notify.png\"]}",
      "parent_author": "andreafalzetti",
      "parent_permlink": "building-an-accessible-and-re-usable-react-component",
      "permlink": "steemitboard-notify-andreafalzetti-20181218t072130000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-12-18T07:21:30",
  "trx_id": "d92af058d669c661b424bd2584d4fd90fb296d28",
  "trx_in_block": 9,
  "virtual_op": 0
}

{
  "block": 24700271,
  "op": [
    "transfer_from_savings",
    {
      "amount": "0.001 SBD",
      "from": "smitop",
      "memo": "Hi, it looks like you're not voting for any witnesses. Witnesses help secure the Steem network. You should vote for some, at https://steemit.com/~witnesses, or by pressing 'Vote for witnesses' in the Steemit sidebar (top right corner). I'm a bot.",
      "request_id": 18722,
      "to": "andreafalzetti"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-08-02T00:21:06",
  "trx_id": "c2df19925894f8b94ea6110cfebc8271ad672715",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 22489613,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "9148.910530 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-05-16T20:05:33",
  "trx_id": "4fb6e498ce005f677731d376dff4d221ef99df0b",
  "trx_in_block": 16,
  "virtual_op": 0
}

{
  "block": 22185116,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "29514.076051 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-05-06T06:18:21",
  "trx_id": "4649a81514bddbaa53a4a0dc2e9c3f0bfc4b09b3",
  "trx_in_block": 58,
  "virtual_op": 0
}

{
  "block": 18791938,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"andreafalzetti\",\"following\":\"azzurra92\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "andreafalzetti"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-08T07:34:03",
  "trx_id": "116305d9b5d103e7e89c907a0bc974547a2cbdcf",
  "trx_in_block": 34,
  "virtual_op": 0
}

{
  "block": 18791852,
  "op": [
    "account_update",
    {
      "account": "andreafalzetti",
      "json_metadata": "{\"profile\":{\"profile_image\":\"https://en.gravatar.com/userimage/60787389/93b97d87738454efa97e59ddcc507777.jpg?size=200\",\"cover_image\":\"https://andreafalzetti.github.io/img/home-bg.jpg\",\"name\":\"Andrea Falzetti\",\"about\":\"Software Engineer\",\"location\":\"London\",\"website\":\"http://falzetti.me\"}}",
      "memo_key": "STM8jw8H7ovFEp68rHTTA9KMrYaEe83PWTLeJWZLAnCx5f6qsoE5Q"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-08T07:29:42",
  "trx_id": "e28aa078e4fa95fd21bf2a1d5783bc5727184c7c",
  "trx_in_block": 11,
  "virtual_op": 0
}

{
  "block": 18791846,
  "op": [
    "account_update",
    {
      "account": "andreafalzetti",
      "json_metadata": "{\"profile\":{\"profile_image\":\"https://en.gravatar.com/userimage/60787389/93b97d87738454efa97e59ddcc507777.jpg?size=200\",\"cover_image\":\"https://andreafalzetti.github.io/img/home-bg.jpg\",\"name\":\"Andrea Falzetti\",\"about\":\"Software Engineer\",\"location\":\"London\",\"website\":\"http://falzetti.me/\"}}",
      "memo_key": "STM8jw8H7ovFEp68rHTTA9KMrYaEe83PWTLeJWZLAnCx5f6qsoE5Q"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-08T07:29:24",
  "trx_id": "8bfbb9a333f3cb3a9830fdef174eeccc82ba5e18",
  "trx_in_block": 0,
  "virtual_op": 0
}

{
  "block": 18604639,
  "op": [
    "comment",
    {
      "author": "andreafalzetti",
      "body": "Guida utilissima, grazie mille!",
      "json_metadata": "{\"tags\":[\"it-steem\"],\"app\":\"steemit/0.1\"}",
      "parent_author": "cheftony",
      "parent_permlink": "steem-italia-come-funziona-steem",
      "permlink": "re-cheftony-steem-italia-come-funziona-steem-20180101t192408203z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-01T19:24:09",
  "trx_id": "4d8122d605849cae05b188356074cd7dfbb85659",
  "trx_in_block": 1,
  "virtual_op": 0
}

{
  "block": 18604632,
  "op": [
    "vote",
    {
      "author": "cheftony",
      "permlink": "steem-italia-come-funziona-steem",
      "voter": "andreafalzetti",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-01T19:23:48",
  "trx_id": "2fa68e9559c08fe944ac0e3bdfe5132439eb6a01",
  "trx_in_block": 26,
  "virtual_op": 0
}

{
  "block": 18604549,
  "op": [
    "vote",
    {
      "author": "louisthomas",
      "permlink": "my-end-of-2017-cryptocurrency-price-predictions-the-results",
      "voter": "andreafalzetti",
      "weight": 10000
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2018-01-01T19:19:39",
  "trx_id": "f06b5ebfff335b8c61ab20cc03aff42a412b76fa",
  "trx_in_block": 40,
  "virtual_op": 0
}

{
  "block": 18463111,
  "op": [
    "delegate_vesting_shares",
    {
      "delegatee": "andreafalzetti",
      "delegator": "steem",
      "vesting_shares": "29717.711622 VESTS"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-27T21:14:54",
  "trx_id": "550a4e017c06b36cc9fc39596fab9c9768cf2ad9",
  "trx_in_block": 36,
  "virtual_op": 0
}

{
  "block": 18193379,
  "op": [
    "comment",
    {
      "author": "steemitboard",
      "body": "Congratulations @andreafalzetti! You have completed some achievement on Steemit and have been rewarded with new badge(s) :\n\n[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/firstpost.png)](http://steemitboard.com/@andreafalzetti) You published your First Post\n[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/firstvoted.png)](http://steemitboard.com/@andreafalzetti) You got a First Vote\n\nClick on any badge to view your own Board of Honor on SteemitBoard.\nFor more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)\n\nIf you no longer want to receive notifications, reply to this comment with the word `STOP`\n\n> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!",
      "json_metadata": "{\"image\":[\"https://steemitboard.com/img/notifications.png\"]}",
      "parent_author": "andreafalzetti",
      "parent_permlink": "building-an-accessible-and-re-usable-react-component",
      "permlink": "steemitboard-notify-andreafalzetti-20171218t122156000z",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T12:21:54",
  "trx_id": "1d054d08343644f346736a4e0b377b555c9484b1",
  "trx_in_block": 46,
  "virtual_op": 0
}

{
  "block": 18189624,
  "op": [
    "vote",
    {
      "author": "andreafalzetti",
      "permlink": "building-an-accessible-and-re-usable-react-component",
      "voter": "ubg",
      "weight": 100
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T09:14:06",
  "trx_id": "fe602a31f2dbbd84b1bdce5a670ff18779676d23",
  "trx_in_block": 16,
  "virtual_op": 0
}

{
  "block": 18189476,
  "op": [
    "custom_json",
    {
      "id": "follow",
      "json": "[\"follow\",{\"follower\":\"andreafalzetti\",\"following\":\"dtube\",\"what\":[\"blog\"]}]",
      "required_auths": [],
      "required_posting_auths": [
        "andreafalzetti"
      ]
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T09:06:42",
  "trx_id": "ad00b2da3e3cff65cb299e75c536631872ba98bf",
  "trx_in_block": 16,
  "virtual_op": 0
}

{
  "block": 18189123,
  "op": [
    "account_update",
    {
      "account": "andreafalzetti",
      "json_metadata": "{\"profile\":{\"profile_image\":\"https://en.gravatar.com/userimage/60787389/93b97d87738454efa97e59ddcc507777.jpg?size=200\",\"cover_image\":\"https://andreafalzetti.github.io/img/home-bg.jpg\",\"name\":\"Andrea Falzetti\",\"about\":\"Software Engineer\",\"location\":\"London\",\"website\":\"http://falzetti.me\"}}",
      "memo_key": "STM8jw8H7ovFEp68rHTTA9KMrYaEe83PWTLeJWZLAnCx5f6qsoE5Q"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T08:49:03",
  "trx_id": "0653591aff5ef91d9594a5f1709b08c6609bfede",
  "trx_in_block": 11,
  "virtual_op": 0
}

{
  "block": 18189108,
  "op": [
    "account_update",
    {
      "account": "andreafalzetti",
      "json_metadata": "{\"profile\":{\"profile_image\":\"https://en.gravatar.com/userimage/60787389/93b97d87738454efa97e59ddcc507777.jpg?size=200\",\"name\":\"Andrea Falzetti\",\"about\":\"Software Engineer\",\"location\":\"London\",\"website\":\"http://falzetti.me\"}}",
      "memo_key": "STM8jw8H7ovFEp68rHTTA9KMrYaEe83PWTLeJWZLAnCx5f6qsoE5Q"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T08:48:18",
  "trx_id": "9e489933e813731a86c4fee3e7ee63ae54c30814",
  "trx_in_block": 30,
  "virtual_op": 0
}

{
  "block": 18189051,
  "op": [
    "comment",
    {
      "author": "cheetah",
      "body": "Hi! I am a robot. I just upvoted you! I found similar content that readers might be interested in:\nhttps://andreafalzetti.github.io/feed.xml",
      "json_metadata": "",
      "parent_author": "andreafalzetti",
      "parent_permlink": "building-an-accessible-and-re-usable-react-component",
      "permlink": "cheetah-re-andreafalzettibuilding-an-accessible-and-re-usable-react-component",
      "title": ""
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T08:45:27",
  "trx_id": "883cb4fc134c1dae6511333acb3e4bfcb54430ea",
  "trx_in_block": 24,
  "virtual_op": 0
}

{
  "block": 18189050,
  "op": [
    "vote",
    {
      "author": "andreafalzetti",
      "permlink": "building-an-accessible-and-re-usable-react-component",
      "voter": "cheetah",
      "weight": 8
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T08:45:24",
  "trx_id": "88456fa3625f8507a20ab249a53241ec90e12242",
  "trx_in_block": 16,
  "virtual_op": 0
}

{
  "block": 18189048,
  "op": [
    "transfer",
    {
      "amount": "0.001 STEEM",
      "from": "hottopic",
      "memo": "Hello andreafalzetti. I Followed you.If you follow me, I'll be happy.Thanks :)",
      "to": "andreafalzetti"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T08:45:18",
  "trx_id": "015d568b4d1931c95e08130b47b663e27a310748",
  "trx_in_block": 21,
  "virtual_op": 0
}

{
  "block": 18189044,
  "op": [
    "comment",
    {
      "author": "andreafalzetti",
      "body": "![lum3n-187468-light.jpg](https://steemitimages.com/DQmcz9D36qok2xGzMPEdgHdv7NsWVJKthTJ5FNCJ4rLkhEg/lum3n-187468-light.jpg)\n\nIn [one of my recent posts](https://medium.com/@andreafalzetti/bundling-react-15-bootstrap-4-storybook-3-with-webpack-2-d65383e1825a) I talked about how I have introduced [Storybook](https://storybook.js.org/) to the team and how we adopted it in our development lifecycle.\n\nIn this article, I want to share with you, my experience building an accessible **custom input React component** and how I found Storybook a useful dev tool that helped me achieve my goal.\n\nLet's start!\n\n## Challenge 🤓\nIn this project, several views are sharing a similar piece of UI, a box with an icon and some text. In some cases, it also contains a button and an additional paragraph of text. I want the **box** to be a separate React Component so I can re-use it across the application. I need to identify all common features and pass them as _props_ to the component so it will be able to behave differently in each instance. Given that this component will be a custom input, I want to make sure that the element is **visible and usable** from **screen readers**, it won't take too long, and it will make a big difference for many users.\n\n![interactive-bot-button-designs.jpg](https://steemitimages.com/DQmSo28p1prtmadvGYcSk2iqZFXFrG6S6SBsKNVrfjMgLfR/interactive-bot-button-designs.jpg)\n\n## Scaffolding 👷\n\nFirst, we need a **name** for our new component. Then a folder and file structure.\n\n![interactive-box-folder-stracture.jpg](https://steemitimages.com/DQmR5g2kZNQoqf7qbW2bu99Xhq8piQpmQ6iQ9MTdotGA99g/interactive-box-folder-stracture.jpg)\n\nThis style comes from a boilerplate I have been using, it's called [react-redux-starter-kit](https://github.com/davezuko/react-redux-starter-kit). The project has now been abandoned but I still suggest you to check it out as it was really well done 💪\n\nI won't include the code of the actual box as that is not the purpose of this article. Below you can see how I exported the component and how I have used it.\n\nExport\n\n```js\n// src/components/InteractiveBox/index.js\nimport InteractiveBoxButton from './InteractiveBoxButton'\nimport InteractiveBoxContainer from './InteractiveBoxContainer'\n\nexport { InteractiveBoxButton, InteractiveBoxContainer }\n```\n\nImport\n\n```js\n// src/routes/MyRoute123/components/MyRoute123.js\nimport { InteractiveBoxButton, InteractiveBoxContainer } from 'components/InteractiveBox'\n```\n\nThe next step is to create the **stories** for the component, in Storybook. A story is a scenario or particular configuration in which our component will render. The idea here is to create a story for each different case. Although this can take a bit longer than just building the component, I found this process very helpful to me in helping to discover all props and edge cases I needed to cover. It resulted in both better SASS and JavaScript code.\n\nMoreover, you will end up with a bunch of visual tests for your component, which comes in handy in different occasions. I have talked about it in [my last blog post](https://medium.com/@andreafalzetti/bundling-react-15-bootstrap-4-storybook-3-with-webpack-2-d65383e1825a#4949)\n\nThese are the stories that I have created so far:\n\n![interactive-box-stories.jpg](https://steemitimages.com/DQmaxswujZSHUDsuaixXrUPuYmhScVj5AQnA5Y4WMHAQKe5/interactive-box-stories.jpg)\n\n## State management\n\nTo handle the state of the component, so which option is selected, I decided to build a wrapper component which will act as \"selector\" and it will orchestrate the rendering of the child boxes. I kept the main component standalone, so I can use it even if I don't need to click handlers or change of state in my application.\n\n```\n<InteractiveBoxContainer>\n  <InteractiveBoxButton\n    title={'YES'}\n    text={'I want this'}\n    height={350}\n    value={'yes'}\n     />\n  <InteractiveBoxButton\n    title='NO'\n    text={'I don\\'t want this'}\n    secondaryText={'Answer the questions below'}\n    height={350}\n    value={'no'}\n     />\n</InteractiveBoxContainer>\n```\n\n## Accessibility\n\nDuring the [HalfStack](https://www.meetup.com/halfstack/) June meetup: [Accessibility and GraphQL](https://www.meetup.com/halfstack/events/238826210/), one of the speakers, [Callum Macrae](http://macr.ae/), gave a talk about accessibility and screen readers. I admit that until that moment I didn't know much about this and didn't pay attention to this matter when building UI. Thanks to his talk and some practice at home I learnt how to use a screen reader, in particular, VoiceOver on Mac and now I use it to test my code, especially when I build custom input elements.\n\n## Custom input fields 🤔\n\nDon't try to be clever with your inputs! It's very easy to screw things up, especially regarding accessibility. Unless you learnt how to deal with it appropriately, I would recommend you to stay away from building form masks or custom input on your own.\n\nIn my case, the input didn't involve any typing which means we just need to inform the screen reader of the presence of our component and make it clickable. Given that I am using standard text elements and regular buttons inside the component, they will be automatically discovered and read out to the user. It was enough adding `role='button'` and an `aria-label='Description of the element'` to the div container to make it visible and clickable to screen readers. It's straightforward, but it gets missed most of the time, at least for what my experience can say.\n\nBesides being ethically correct for me and very satisfying knowing that we are allowing everybody to use the interfaces we build, it is also an important business decision as there is a high number of users with accessibility issues.\n\nI hope this post has been useful to you and you got my point. Next time you build a custom UI element, don't forget to at least **test it with a screen reader**. If your Company or Team can afford it, I would recommend running some accessibility tests with a real user. I will leave some useful links below.\n\n## Useful links\n\n1. **[a11y](https://www.npmjs.com/package/a11y)** (tool)\n1. [Web Accessibility Evaluation Tools List](https://www.w3.org/WAI/ER/tools/)\n1. [The A11Y Project](http://a11yproject.com/) ()\n  * [How–to: Create accessible data tables](http://a11yproject.com/posts/accessible-data-tables/)\n  * [How-to: Use Placeholder Attributes](http://a11yproject.com/posts/placeholder-input-elements/)\n  * [How–to: Use Skip Navigation links](http://a11yproject.com/posts/skip-nav-links/)\n  * [How–to: Use TITLE attributes](http://a11yproject.com/posts/title-attributes/)\n  * [How–to: Use role='application'](http://a11yproject.com/posts/how-to-use-application-role/)\n  * [How-to: Hide Content](http://a11yproject.com/posts/how-to-hide-content/)\n1. [The Value of Involving People with Disabilities in User Research](https://www.usertesting.com/blog/2014/03/04/the-value-of-involving-people-with-disabilities-in-user-research/) (blog post)\n1. [A Web for Everyone](http://rosenfeldmedia.com/books/a-web-for-everyone/) (book)\n1. [Make accessibility easy, and the world will be more accessible](http://rosenfeldmedia.com/a-web-for-everyone/make-accessibility-easy/) (Accessibility in PDF)\n\nPhoto credits: [@lum3n](https://unsplash.com/photos/ck3HFWw2OiM)",
      "json_metadata": "{\"tags\":[\"webdevelopment\",\"javascript\",\"react\",\"accessibility\",\"storybook\"],\"image\":[\"https://steemitimages.com/DQmcz9D36qok2xGzMPEdgHdv7NsWVJKthTJ5FNCJ4rLkhEg/lum3n-187468-light.jpg\",\"https://steemitimages.com/DQmSo28p1prtmadvGYcSk2iqZFXFrG6S6SBsKNVrfjMgLfR/interactive-bot-button-designs.jpg\",\"https://steemitimages.com/DQmR5g2kZNQoqf7qbW2bu99Xhq8piQpmQ6iQ9MTdotGA99g/interactive-box-folder-stracture.jpg\",\"https://steemitimages.com/DQmaxswujZSHUDsuaixXrUPuYmhScVj5AQnA5Y4WMHAQKe5/interactive-box-stories.jpg\"],\"links\":[\"https://medium.com/@andreafalzetti/bundling-react-15-bootstrap-4-storybook-3-with-webpack-2-d65383e1825a\",\"https://storybook.js.org/\",\"https://github.com/davezuko/react-redux-starter-kit\",\"https://medium.com/@andreafalzetti/bundling-react-15-bootstrap-4-storybook-3-with-webpack-2-d65383e1825a#4949\",\"https://www.meetup.com/halfstack/\",\"https://www.meetup.com/halfstack/events/238826210/\",\"http://macr.ae/\",\"https://www.npmjs.com/package/a11y\",\"https://www.w3.org/WAI/ER/tools/\",\"http://a11yproject.com/\",\"http://a11yproject.com/posts/accessible-data-tables/\",\"http://a11yproject.com/posts/placeholder-input-elements/\",\"http://a11yproject.com/posts/skip-nav-links/\",\"http://a11yproject.com/posts/title-attributes/\",\"http://a11yproject.com/posts/how-to-use-application-role/\",\"http://a11yproject.com/posts/how-to-hide-content/\",\"https://www.usertesting.com/blog/2014/03/04/the-value-of-involving-people-with-disabilities-in-user-research/\",\"http://rosenfeldmedia.com/books/a-web-for-everyone/\",\"http://rosenfeldmedia.com/a-web-for-everyone/make-accessibility-easy/\",\"https://unsplash.com/photos/ck3HFWw2OiM\"],\"app\":\"steemit/0.1\",\"format\":\"markdown\"}",
      "parent_author": "",
      "parent_permlink": "webdevelopment",
      "permlink": "building-an-accessible-and-re-usable-react-component",
      "title": "Building an accessible and re-usable React Component"
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T08:45:06",
  "trx_id": "35fccb9c0673c8c49227ec00ea3e66305712df79",
  "trx_in_block": 28,
  "virtual_op": 0
}

{
  "block": 18186389,
  "op": [
    "account_create_with_delegation",
    {
      "active": {
        "account_auths": [],
        "key_auths": [
          [
            "STM7MtUzA2bZHhXfgLzPiyXDDFtDjvG22wenKyGYENuj476MiU1au",
            1
          ]
        ],
        "weight_threshold": 1
      },
      "creator": "steem",
      "delegation": "57000.000000 VESTS",
      "extensions": [],
      "fee": "0.500 STEEM",
      "json_metadata": "",
      "memo_key": "STM8jw8H7ovFEp68rHTTA9KMrYaEe83PWTLeJWZLAnCx5f6qsoE5Q",
      "new_account_name": "andreafalzetti",
      "owner": {
        "account_auths": [],
        "key_auths": [
          [
            "STM5DT2aHtKWR2xw8bt82zcjDdJRLRgE6Kt8QF4pvJF9Lf8SdyDL4",
            1
          ]
        ],
        "weight_threshold": 1
      },
      "posting": {
        "account_auths": [],
        "key_auths": [
          [
            "STM5MaKCU1K5oeLd6dd4vZfhUvajAgtPVhvtcmYML8kw8KKkMgm5Z",
            1
          ]
        ],
        "weight_threshold": 1
      }
    }
  ],
  "op_in_trx": 0,
  "timestamp": "2017-12-18T06:32:21",
  "trx_id": "533516ef7bf64ad30e21c772ab86a276beedc15a",
  "trx_in_block": 25,
  "virtual_op": 0
}