diff --git a/components-lock.json b/components-lock.json
index ea90cc6c97..f486ee7064 100644
--- a/components-lock.json
+++ b/components-lock.json
@@ -1,5 +1,5 @@
 {
-  "hash": "18506bae5f4874b01c4ad66a342b83571739c7f8713e0762997f1b75b4e9b26f",
+  "hash": "02638d9c8a09972771dc7664065e29dfbb9cb4fbc36405d85f85e5230ec4cba6",
   "data": {
     "%data": "%data:Map",
     "%data:Map": [
@@ -233,6 +233,38 @@
           "etpl": null
         }
       ],
+      [
+        "b-dummy-dialog",
+        {
+          "index": "src/dummies/b-dummy-dialog/index.js",
+          "declaration": {
+            "name": "b-dummy-dialog",
+            "parent": null,
+            "dependencies": [],
+            "libs": []
+          },
+          "name": "b-dummy-dialog",
+          "parent": null,
+          "dependencies": [],
+          "libs": [],
+          "resolvedLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "resolvedOwnLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "type": "block",
+          "mixin": false,
+          "logic": "src/dummies/b-dummy-dialog/b-dummy-dialog.ts",
+          "styles": [
+            "src/dummies/b-dummy-dialog/b-dummy-dialog.styl"
+          ],
+          "tpl": "src/dummies/b-dummy-dialog/b-dummy-dialog.ss",
+          "etpl": null
+        }
+      ],
       [
         "b-dummy-lfc",
         {
@@ -265,6 +297,38 @@
           "etpl": null
         }
       ],
+      [
+        "b-dummy-listbox",
+        {
+          "index": "src/dummies/b-dummy-listbox/index.js",
+          "declaration": {
+            "name": "b-dummy-listbox",
+            "parent": "i-block",
+            "dependencies": [],
+            "libs": []
+          },
+          "name": "b-dummy-listbox",
+          "parent": "i-block",
+          "dependencies": [],
+          "libs": [],
+          "resolvedLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "resolvedOwnLibs": {
+            "%data": "%data:Set",
+            "%data:Set": []
+          },
+          "type": "block",
+          "mixin": false,
+          "logic": "src/dummies/b-dummy-listbox/b-dummy-listbox.ts",
+          "styles": [
+            "src/dummies/b-dummy-listbox/b-dummy-listbox.styl"
+          ],
+          "tpl": "src/dummies/b-dummy-listbox/b-dummy-listbox.ss",
+          "etpl": null
+        }
+      ],
       [
         "b-dummy-module-loader",
         {
@@ -1997,7 +2061,9 @@
               "b-dummy-sync",
               "b-dummy-state",
               "b-dummy-control-list",
-              "b-dummy-decorators"
+              "b-dummy-decorators",
+              "b-dummy-listbox",
+              "b-dummy-dialog"
             ],
             "libs": [
               "core/cookies",
@@ -2041,7 +2107,9 @@
             "b-dummy-sync",
             "b-dummy-state",
             "b-dummy-control-list",
-            "b-dummy-decorators"
+            "b-dummy-decorators",
+            "b-dummy-listbox",
+            "b-dummy-dialog"
           ],
           "libs": [
             "core/cookies",
diff --git a/index.d.ts b/index.d.ts
index 81ccb3bde4..22949f9f7b 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -215,3 +215,5 @@ interface TouchGesturePoint extends Partial<TouchGesturesCreateOptions> {
 	x: number;
 	y: number;
 }
+
+type AccessibleElement = Element & HTMLOrSVGElement;
diff --git a/package-lock.json b/package-lock.json
index 789e559a19..d720f72bcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,7 @@
         "@types/jasmine": "3.10.3",
         "@types/semver": "7.3.10",
         "@types/webpack": "5.28.0",
-        "@v4fire/core": "3.86.2",
+        "@v4fire/core": "3.87.0",
         "@v4fire/linters": "1.9.0",
         "husky": "7.0.4",
         "nyc": "15.1.0",
@@ -123,7 +123,7 @@
         "webpack-cli": "4.9.2"
       },
       "peerDependencies": {
-        "@v4fire/core": "^3.86.2",
+        "@v4fire/core": "^3.87.0",
         "webpack": "^5.70.0"
       }
     },
@@ -3971,9 +3971,9 @@
       }
     },
     "node_modules/@v4fire/core": {
-      "version": "3.86.2",
-      "resolved": "https://registry.npmjs.org/@v4fire/core/-/core-3.86.2.tgz",
-      "integrity": "sha512-Xu/SKvKkV/XBT+CRXkOVak1KMelBNZseQY9Kh2HD5ZUZ3tyuYfyr5NtwEzCY3rVg+ouh716lQ4s5WFg1u7MJRQ==",
+      "version": "3.87.0",
+      "resolved": "https://registry.npmjs.org/@v4fire/core/-/core-3.87.0.tgz",
+      "integrity": "sha512-NbfSuOWxMldX6IsJ3vuklPB5h13O0Idxnjfwd0j3zCQk2x429TIlCXZuFOJsTdYu6eCBlUc2hfwO1BNtktOHCA==",
       "dev": true,
       "dependencies": {
         "@swc/core": "1.2.153",
@@ -4038,7 +4038,7 @@
         "through2": "4.0.2",
         "tsc-alias": "1.6.1",
         "tsconfig": "7.0.0",
-        "typedoc": "0.22.12",
+        "typedoc": "0.22.13",
         "typescript": "4.6.2",
         "upath": "2.0.1"
       }
@@ -16192,9 +16192,9 @@
       }
     },
     "node_modules/jsonc-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
-      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.1.0.tgz",
+      "integrity": "sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==",
       "dev": true,
       "optional": true
     },
@@ -17032,9 +17032,9 @@
       }
     },
     "node_modules/marked": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.17.tgz",
-      "integrity": "sha512-Wfk0ATOK5iPxM4ptrORkFemqroz0ZDxp5MWfYA7H/F+wO17NRWV5Ypxi6p3g2Xmw2bKeiYOl6oVnLHKxBA0VhA==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
+      "integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==",
       "dev": true,
       "optional": true,
       "bin": {
@@ -25025,17 +25025,17 @@
       }
     },
     "node_modules/typedoc": {
-      "version": "0.22.12",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.22.12.tgz",
-      "integrity": "sha512-FcyC+YuaOpr3rB9QwA1IHOi9KnU2m50sPJW5vcNRPCIdecp+3bFkh7Rq5hBU1Fyn29UR2h4h/H7twZHWDhL0sw==",
+      "version": "0.22.13",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.22.13.tgz",
+      "integrity": "sha512-NHNI7Dr6JHa/I3+c62gdRNXBIyX7P33O9TafGLd07ur3MqzcKgwTvpg18EtvCLHJyfeSthAtCLpM7WkStUmDuQ==",
       "dev": true,
       "optional": true,
       "dependencies": {
         "glob": "^7.2.0",
         "lunr": "^2.3.9",
-        "marked": "^4.0.10",
-        "minimatch": "^3.0.4",
-        "shiki": "^0.10.0"
+        "marked": "^4.0.12",
+        "minimatch": "^5.0.1",
+        "shiki": "^0.10.1"
       },
       "bin": {
         "typedoc": "bin/typedoc"
@@ -25044,7 +25044,30 @@
         "node": ">= 12.10.0"
       },
       "peerDependencies": {
-        "typescript": "4.0.x || 4.1.x || 4.2.x || 4.3.x || 4.4.x || 4.5.x"
+        "typescript": "4.0.x || 4.1.x || 4.2.x || 4.3.x || 4.4.x || 4.5.x || 4.6.x"
+      }
+    },
+    "node_modules/typedoc/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/typedoc/node_modules/minimatch": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+      "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/typescript": {
@@ -29283,9 +29306,9 @@
       }
     },
     "@v4fire/core": {
-      "version": "3.86.2",
-      "resolved": "https://registry.npmjs.org/@v4fire/core/-/core-3.86.2.tgz",
-      "integrity": "sha512-Xu/SKvKkV/XBT+CRXkOVak1KMelBNZseQY9Kh2HD5ZUZ3tyuYfyr5NtwEzCY3rVg+ouh716lQ4s5WFg1u7MJRQ==",
+      "version": "3.87.0",
+      "resolved": "https://registry.npmjs.org/@v4fire/core/-/core-3.87.0.tgz",
+      "integrity": "sha512-NbfSuOWxMldX6IsJ3vuklPB5h13O0Idxnjfwd0j3zCQk2x429TIlCXZuFOJsTdYu6eCBlUc2hfwO1BNtktOHCA==",
       "dev": true,
       "requires": {
         "@babel/core": "7.17.5",
@@ -29344,7 +29367,7 @@
         "tsconfig": "7.0.0",
         "tsconfig-paths": "3.13.0",
         "tslib": "2.3.1",
-        "typedoc": "0.22.12",
+        "typedoc": "0.22.13",
         "typescript": "4.6.2",
         "upath": "2.0.1",
         "w3c-xmlserializer": "2.0.0"
@@ -38871,9 +38894,9 @@
       }
     },
     "jsonc-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.0.0.tgz",
-      "integrity": "sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.1.0.tgz",
+      "integrity": "sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==",
       "dev": true,
       "optional": true
     },
@@ -39575,9 +39598,9 @@
       }
     },
     "marked": {
-      "version": "4.0.17",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.17.tgz",
-      "integrity": "sha512-Wfk0ATOK5iPxM4ptrORkFemqroz0ZDxp5MWfYA7H/F+wO17NRWV5Ypxi6p3g2Xmw2bKeiYOl6oVnLHKxBA0VhA==",
+      "version": "4.0.18",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
+      "integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==",
       "dev": true,
       "optional": true
     },
@@ -45778,17 +45801,39 @@
       }
     },
     "typedoc": {
-      "version": "0.22.12",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.22.12.tgz",
-      "integrity": "sha512-FcyC+YuaOpr3rB9QwA1IHOi9KnU2m50sPJW5vcNRPCIdecp+3bFkh7Rq5hBU1Fyn29UR2h4h/H7twZHWDhL0sw==",
+      "version": "0.22.13",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.22.13.tgz",
+      "integrity": "sha512-NHNI7Dr6JHa/I3+c62gdRNXBIyX7P33O9TafGLd07ur3MqzcKgwTvpg18EtvCLHJyfeSthAtCLpM7WkStUmDuQ==",
       "dev": true,
       "optional": true,
       "requires": {
         "glob": "^7.2.0",
         "lunr": "^2.3.9",
-        "marked": "^4.0.10",
-        "minimatch": "^3.0.4",
-        "shiki": "^0.10.0"
+        "marked": "^4.0.12",
+        "minimatch": "^5.0.1",
+        "shiki": "^0.10.1"
+      },
+      "dependencies": {
+        "brace-expansion": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "balanced-match": "^1.0.0"
+          }
+        },
+        "minimatch": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.0.tgz",
+          "integrity": "sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
       }
     },
     "typescript": {
diff --git a/package.json b/package.json
index 25c1fd1f33..1257a43727 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,7 @@
     "@types/glob": "7.2.0",
     "@types/semver": "7.3.10",
     "@types/webpack": "5.28.0",
-    "@v4fire/core": "3.86.2",
+    "@v4fire/core": "3.87.0",
     "@v4fire/linters": "1.9.0",
     "husky": "7.0.4",
     "nyc": "15.1.0",
@@ -154,7 +154,7 @@
     "webpack": "5.70.0"
   },
   "peerDependencies": {
-    "@v4fire/core": "^3.86.2",
+    "@v4fire/core": "^3.87.0",
     "webpack": "^5.70.0"
   }
 }
diff --git a/src/base/b-list/CHANGELOG.md b/src/base/b-list/CHANGELOG.md
index 028effae00..f4399e1a93 100644
--- a/src/base/b-list/CHANGELOG.md
+++ b/src/base/b-list/CHANGELOG.md
@@ -9,6 +9,17 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Added a new prop `orientation`
+* Now the component derives `iAccess`
+
+#### :house: Internal
+
+* Improved component accessibility
+
 ## v3.0.0-rc.211 (2021-07-21)
 
 #### :boom: Breaking Change
diff --git a/src/base/b-list/README.md b/src/base/b-list/README.md
index b8f089efa9..762243b079 100644
--- a/src/base/b-list/README.md
+++ b/src/base/b-list/README.md
@@ -10,13 +10,13 @@ If you need a more complex layout, provide it via a slot or by using `item/itemP
 
 * The component extends [[iData]].
 
-* The component implements [[iVisible]], [[iWidth]], [[iItems]] traits.
+* The component implements [[iAccess]], [[iVisible]], [[iWidth]], [[iItems]] traits.
 
 * The component is used as functional if there is no provided the `dataProvider` prop.
 
 * The component supports tooltips.
 
-* The component uses `aria` attributes.
+* The component is accessible.
 
 * By default, the list will be created using `<ul>` and `<li>` tags.
 
@@ -49,6 +49,43 @@ Also, you can see the parent component and the component traits.
 
 Also, you can see the parent component and the component traits.
 
+## Accessibility
+
+The component supports two standard logical roles.
+
+### List of links
+
+If the component is used as a list of links, then standard HTML link semantics will be used.
+That is, links can be navigated using the Tab key, etc.
+
+### List of tabs
+
+If the component is used as a list of tabs it will implement the ARIA [tablist](https://www.w3.org/TR/wai-aria/#tablist) role.
+All available features included in this [widget](https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/) are supported.
+
+Please note that the component does not support the ability to set the content of the tabs.
+You need to do it yourself using the ARIA [tabpanel](https://www.w3.org/TR/wai-aria/#tabpanel) role.
+
+```
+< b-list :items = [ &
+  {label: 'First tab', id: 'tab-1', controls: 'panel-1'},
+  {label: 'Second tag', id: 'tab-2', controls: 'panel-2'},
+  {label: 'Third tab', id: 'tab-3', controls: 'panel-3'}
+] .
+
+< div id = 'panel-1' | v-aria:tabpanel = {labelledby: 'tab-1'}
+  < p
+    Content for the first panel
+
+< div id = 'panel-2' | v-aria:tabpanel = {labelledby: 'tab-2'}
+  < p
+    Content for the second panel
+
+< div id = 'panel-3' | v-aria:tabpanel = {labelledby: 'tab-3'}
+  < p
+    Content for the third panel
+```
+
 ## Associated types
 
 The component has associated type to specify active component item: **Active**.
@@ -213,13 +250,18 @@ Also, you can see the implemented traits or the parent component.
 
 ### Props
 
+#### [orientation = `horizontal`]
+
+Indicates whether the component orientation is `horizontal`, `vertical`, or unknown/ambiguous.
+This props affects the ARIA component role.
+
 #### [listTag = `'ul'`]
 
-A type of the list' root tag.
+A type of the list root tag.
 
 #### [listElTag = `'li'`]
 
-A type of list' element tags.
+A type of list element tags.
 
 #### [activeProp]
 
diff --git a/src/base/b-list/b-list.ss b/src/base/b-list/b-list.ss
index b1b663dd6c..f76202e5df 100644
--- a/src/base/b-list/b-list.ss
+++ b/src/base/b-list/b-list.ss
@@ -30,9 +30,9 @@
 					< tag &
 						:is = el.href !== undefined ? 'a' : 'button' |
 
+						:id = el.id |
 						:href = el.href |
 						:value = el.value |
-						:aria-selected = el.href === undefined ? isActive(el.value) : undefined |
 
 						:-id = values.get(el.value) |
 						:-hint = el.hint |
@@ -48,7 +48,13 @@
 							}
 						})) |
 
-						:v-attrs = el.attrs
+						:v-attrs = isTablist ?
+							{
+								'v-aria:tab': getAriaConfig('tab', el, i),
+								'v-aria:controls': {for: el.controls},
+								...el.attrs
+							} :
+							el.attrs
 					.
 						- block preIcon
 							< span.&__cell.&__link-icon.&__link-pre-icon v-if = el.preIcon || vdom.getSlot('preIcon')
@@ -101,6 +107,11 @@
 
 		< tag.&__wrapper &
 			:is = listTag |
-			:v-attrs = attrs
+			:v-attrs = isTablist ?
+				{
+					'v-aria:tablist': getAriaConfig('tablist'),
+					...attrs
+				} :
+				attrs
 		.
 			+= self.list('items')
diff --git a/src/base/b-list/b-list.ts b/src/base/b-list/b-list.ts
index 4ecebb9ebd..b6fa42e29d 100644
--- a/src/base/b-list/b-list.ts
+++ b/src/base/b-list/b-list.ts
@@ -15,17 +15,37 @@
 import 'models/demo/list';
 //#endif
 
+import 'core/component/directives/aria';
+
 import symbolGenerator from 'core/symbol';
 import SyncPromise from 'core/promise/sync';
 
 import { isAbsURL } from 'core/url';
 
+import { derive } from 'core/functools/trait';
+
 import iVisible from 'traits/i-visible/i-visible';
 import iWidth from 'traits/i-width/i-width';
 import iItems, { IterationKey } from 'traits/i-items/i-items';
+import iAccess from 'traits/i-access/i-access';
+import type iBlock from 'super/i-block/i-block';
+
+import iData, {
+
+	component,
+	prop,
+	field,
+	system,
+	computed,
+	hook,
+	watch,
+	ModsDecl,
+	ComponentElement
+
+} from 'super/i-data/i-data';
 
-import iData, { component, prop, field, system, computed, hook, watch, ModsDecl } from 'super/i-data/i-data';
 import type { Active, Item, Items } from 'base/b-list/interface';
+import type { Orientation } from 'core/component/directives/aria';
 
 export * from 'super/i-data/i-data';
 export * from 'base/b-list/interface';
@@ -33,6 +53,8 @@ export * from 'base/b-list/interface';
 export const
 	$$ = symbolGenerator();
 
+interface bList extends Trait<typeof iAccess> {}
+
 /**
  * Component to create a list of tabs/links
  */
@@ -47,7 +69,8 @@ export const
 	}
 })
 
-export default class bList extends iData implements iVisible, iWidth, iItems {
+@derive(iAccess)
+class bList extends iData implements iVisible, iWidth, iItems, iAccess {
 	/** @see [[iVisible.prototype.hideIfOffline]] */
 	@prop(Boolean)
 	readonly hideIfOffline: boolean = false;
@@ -80,13 +103,13 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 	readonly itemProps?: iItems['itemProps'];
 
 	/**
-	 * Type of the list' root tag
+	 * Type of the list root tag
 	 */
 	@prop(String)
 	readonly listTag: string = 'ul';
 
 	/**
-	 * Type of list' element tags
+	 * Type of list element tags
 	 */
 	@prop(String)
 	readonly listElTag: string = 'li';
@@ -111,6 +134,13 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 	@prop(Boolean)
 	readonly multiple: boolean = false;
 
+	/**
+	 * Indicates whether the component orientation is `horizontal`, `vertical`, or unknown/ambiguous.
+	 * This props affects the ARIA component role.
+	 */
+	@prop(String)
+	readonly orientation: Orientation = 'horizontal';
+
 	/**
 	 * If true, the active item can be unset by using another click to it.
 	 * By default, if the component is switched to the `multiple` mode, this value is set to `true`,
@@ -130,15 +160,7 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 	 * @see [[bList.attrsProp]]
 	 */
 	get attrs(): Dictionary {
-		const
-			attrs = {...this.attrsProp};
-
-		if (this.items.some((el) => el.href === undefined)) {
-			attrs.role = 'tablist';
-			attrs['aria-multiselectable'] = this.multiple;
-		}
-
-		return attrs;
+		return {...this.attrsProp};
 	}
 
 	/**
@@ -263,15 +285,85 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 
 	protected activeStore!: this['Active'];
 
+	/** @see [[iAccess.focus]] */
+	focus(): Promise<boolean> {
+		const
+			element = <AccessibleElement | null>this.block?.element('link');
+
+		if (element != null) {
+			element.focus();
+			return iAccess.focus(this);
+		}
+
+		return SyncPromise.resolve(false);
+	}
+
+	/** @see [[iAccess.blur]] */
+	blur(): Promise<boolean> {
+		const
+			active = <AccessibleElement | null>document.activeElement;
+
+		if (active != null && this.$el?.contains(active)) {
+			active.blur();
+			return iAccess.blur(this);
+		}
+
+		return SyncPromise.resolve(false);
+	}
+
+	/** @see [[iAccess.disable]] */
+	disable(): Promise<boolean> {
+		const
+			items = this.block?.elements<ComponentElement<iBlock>>('link');
+
+		items?.forEach((item) => {
+			const
+				{component} = item;
+
+			if (component == null) {
+				item.setAttribute('disabled', 'true');
+				return;
+			}
+
+			if (iAccess.is(component)) {
+				return component.disable();
+			}
+
+			void iAccess.disable(component);
+		});
+
+		return iAccess.disable(this);
+	}
+
+	/** @see [[iAccess.enable]] */
+	enable(): Promise<boolean> {
+		const
+			items = this.block?.elements<ComponentElement<iBlock>>('link');
+
+		items?.forEach((item) => {
+			const
+				{component} = item;
+
+			if (component == null) {
+				item.removeAttribute('disabled');
+				return;
+			}
+
+			if (iAccess.is(component)) {
+				return component.enable();
+			}
+
+			void iAccess.enable(component);
+		});
+
+		return iAccess.enable(this);
+	}
+
 	/**
 	 * A link to the active item element.
 	 * If the component is switched to the `multiple` mode, the getter will return an array of elements.
 	 */
-	@computed({
-		cache: true,
-		dependencies: ['active']
-	})
-
+	@computed({dependencies: ['active']})
 	protected get activeElement(): CanPromise<CanUndef<CanArray<HTMLAnchorElement>>> {
 		const
 			{active} = this;
@@ -298,6 +390,14 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 		});
 	}
 
+	/**
+	 * True if the component is used as a tablist
+	 */
+	@computed({dependencies: ['items']})
+	protected get isTablist(): boolean {
+		return this.items.some((el) => el.href === undefined);
+	}
+
 	/**
 	 * Returns true if the specified value is active
 	 * @param value
@@ -385,10 +485,6 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 
 					if (previousLinkEl !== linkEl) {
 						$b.setElMod(previousLinkEl, 'link', 'active', false);
-
-						if (previousLinkEl.hasAttribute('aria-selected')) {
-							previousLinkEl.setAttribute('aria-selected', 'false');
-						}
 					}
 				}
 			}
@@ -400,10 +496,6 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 				for (let i = 0; i < els.length; i++) {
 					const el = els[i];
 					$b.setElMod(el, 'link', 'active', true);
-
-					if (el.hasAttribute('aria-selected')) {
-						el.setAttribute('aria-selected', 'true');
-					}
 				}
 			}, stderr);
 		}
@@ -489,10 +581,6 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 
 					if (needChangeMod) {
 						$b.setElMod(el, 'link', 'active', false);
-
-						if (el.hasAttribute('aria-selected')) {
-							el.setAttribute('aria-selected', 'false');
-						}
 					}
 				}
 			}, stderr);
@@ -621,13 +709,6 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 			item.classes = this.provide.hintClasses(item.hintPos)
 				.concat(item.classes ?? []);
 
-			if (href === undefined) {
-				item.attrs = {
-					...item.attrs,
-					role: 'tab'
-				};
-			}
-
 			normalizedItems.push({...item, value, href});
 		}
 
@@ -707,6 +788,53 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 		}
 	}
 
+	/**
+	 * Returns a dictionary with configurations for the `v-aria` directive used as a tablist
+	 * @param role
+	 */
+	protected getAriaConfig(role: 'tablist'): Dictionary;
+
+	/**
+	 * Returns a dictionary with configurations for the `v-aria` directive used as a tab
+	 *
+	 * @param role
+	 * @param item - tab item data
+	 * @param i - tab item position index
+	 */
+	protected getAriaConfig(role: 'tab', item: this['Item'], i: number): Dictionary;
+
+	protected getAriaConfig(role: 'tab' | 'tablist', item?: this['Item'], i?: number): Dictionary {
+		const tablistConfig = {
+			multiselectable: this.multiple,
+			orientation: this.orientation
+		};
+
+		const tabConfig = {
+			first: i === 0,
+			hasDefaultSelectedTabs: this.active != null,
+			selected: this.isActive(item?.value),
+
+			'@change': bindChangeEvent.bind(this)
+		};
+
+		switch (role) {
+			case 'tablist': return tablistConfig;
+			case 'tab': return tabConfig;
+			default: return {};
+		}
+
+		function bindChangeEvent(this: bList, cb: Function) {
+			this.on('change', () => {
+				if (Object.isSet(this.active)) {
+					cb(this.block?.elements('link', {active: true}));
+
+				} else {
+					cb(this.block?.element('link', {active: true}));
+				}
+			});
+		}
+	}
+
 	protected override onAddData(data: unknown): void {
 		Object.assign(this.db, this.convertDataToDB(data));
 	}
@@ -739,3 +867,5 @@ export default class bList extends iData implements iVisible, iWidth, iItems {
 		this.emit('actionChange', this.active);
 	}
 }
+
+export default bList;
diff --git a/src/base/b-list/interface.ts b/src/base/b-list/interface.ts
index 17dced5469..50cbc1ab1c 100644
--- a/src/base/b-list/interface.ts
+++ b/src/base/b-list/interface.ts
@@ -97,6 +97,16 @@ export interface Item extends Dictionary {
 	 * Map of additional attributes of the item
 	 */
 	attrs?: Dictionary;
+
+	/**
+	 * The id of the item
+	 */
+	id?: string;
+
+	/**
+	 * The id of the element which is controlled by the item in ARIA terms
+	 */
+	controls?: string;
 }
 
 export type Items = Item[];
diff --git a/src/base/b-tree/CHANGELOG.md b/src/base/b-tree/CHANGELOG.md
index 5920f061c2..51d3724336 100644
--- a/src/base/b-tree/CHANGELOG.md
+++ b/src/base/b-tree/CHANGELOG.md
@@ -9,6 +9,17 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Added a new prop `orientation`
+* Now the component derives `iAccess`
+
+#### :house: Internal
+
+* Improved component accessibility
+
 ## v3.0.0-rc.164 (2021-03-22)
 
 #### :house: Internal
diff --git a/src/base/b-tree/README.md b/src/base/b-tree/README.md
index e7d5947246..0e22c962fd 100644
--- a/src/base/b-tree/README.md
+++ b/src/base/b-tree/README.md
@@ -6,10 +6,12 @@ This module provides a component to render a recursive list of elements.
 
 * The component extends [[iData]].
 
-* The component implements the [[iItems]] trait.
+* The component implements the [[iAccess]], [[iItems]] trait.
 
 * By default, the root tag of the component is `<div>`.
 
+* The component is accessible.
+
 ## Features
 
 * Recursive rendering of any components.
@@ -197,11 +199,11 @@ Also, you can see the implemented traits or the parent component.
 
 ### Props
 
-### folded
+#### [folded = `true`]
 
 If true, then all nested elements are folded by default.
 
-### renderFilter
+#### [renderFilter]
 
 A common filter to render items via `asyncRender`.
 It is used to optimize the process of rendering items.
@@ -210,7 +212,7 @@ It is used to optimize the process of rendering items.
 < b-tree :item = 'b-checkbox' | :items = listOfItems | :renderFilter = () => async.idle()
 ```
 
-### nestedRenderFilter
+#### [nestedRenderFilter]
 
 A filter to render nested items via `asyncRender`.
 It is used to optimize the process of rendering child items.
@@ -219,10 +221,23 @@ It is used to optimize the process of rendering child items.
 < b-tree :item = 'b-checkbox' | :items = listOfItems | :nestedRenderFilter = () => async.idle()
 ```
 
-### renderChunks
+#### [renderChunks = `5`]
 
 Number of chunks to render per tick via `asyncRender`.
 
 ```
 < b-tree :item = 'b-checkbox' | :items = listOfItems | :renderChunks = 3
 ```
+
+#### [orientation = `horizontal`]
+
+The component view orientation.
+
+## Accessibility
+
+The component implements an ARIA role [tree](https://www.w3.org/TR/wai-aria/#tree).
+Only basic accessible functionality (without optional keyboard combinations) included in this [widget](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) is supported.
+
+The component includes the following roles:
+- [tree](https://www.w3.org/TR/wai-aria/#tree)
+- [treeitem](https://www.w3.org/TR/wai-aria/#treeitem)
diff --git a/src/base/b-tree/b-tree.ss b/src/base/b-tree/b-tree.ss
index 4849e3a49f..c9c6a114c6 100644
--- a/src/base/b-tree/b-tree.ss
+++ b/src/base/b-tree/b-tree.ss
@@ -12,51 +12,54 @@
 
 - template index() extends ['i-data'].index
 	- block body
-		< template &
-			v-for = (el, i) in asyncRender.iterate(items, renderChunks, renderTaskParams) |
-			:key = getItemKey(el, i)
-		.
-			< .&__node &
-				:-id = dom.getId(el.id) |
-				:-level = level |
-				:class = provide.elClasses({
-					node: {
-						level,
-						folded: getFoldedPropValue(el)
-					}
-				})
+		< .&__root v-aria:tree = getAriaConfig('tree')
+			< template &
+				v-for = (el, i) in asyncRender.iterate(items, renderChunks, renderTaskParams) |
+				:key = getItemKey(el, i)
 			.
-				< .&__item-wrapper
-					< .&__marker
-						- block fold
-							< template v-if = Object.size(field.get('children.length', el)) > 0
-								+= self.slot('fold', {':params': 'getFoldProps(el)'})
-									< .&__fold :v-attrs = getFoldProps(el)
+				< .&__node &
+					:-id = dom.getId(el.id) |
+					:-level = level |
+					:class = provide.elClasses({
+						node: {
+							level,
+							folded: getFoldedPropValue(el)
+						}
+					}) |
 
-					- block item
-						+= self.slot('default', {':item': 'getItemProps(el, i)'})
-							< component.&__item &
-								v-if = item |
-								:is = Object.isFunction(item) ? item(el, i) : item |
-								:v-attrs = getItemProps(el, i)
-							.
+					v-aria:treeitem = getAriaConfig('treeitem', el, i)
+				.
+					< .&__item-wrapper
+						< .&__marker
+							- block fold
+								< template v-if = Object.size(field.get('children.length', el)) > 0
+									+= self.slot('fold', {':params': 'getFoldProps(el)'})
+										< .&__fold :v-attrs = getFoldProps(el)
 
-				- block children
-					< .&__children v-if = Object.size(field.get('children', el)) > 0
-						< b-tree.&__child &
-							:items = el.children |
-							:folded = getFoldedPropValue(el) |
-							:item = item |
-							:v-attrs = nestedTreeProps
-						.
-							< template &
-								#default = o |
-								v-if = vdom.getSlot('default')
-							.
-								+= self.slot('default', {':item': 'o.item'})
+						- block item
+							+= self.slot('default', {':item': 'getItemProps(el, i)'})
+								< component.&__item &
+									v-if = item |
+									:is = Object.isFunction(item) ? item(el, i) : item |
+									:v-attrs = getItemProps(el, i)
+								.
 
-							< template &
-								#fold = o |
-								v-if = vdom.getSlot('fold')
+					- block children
+						< .&__children v-if = Object.size(field.get('children', el)) > 0
+							< b-tree.&__child &
+								:items = el.children |
+								:folded = getFoldedPropValue(el) |
+								:item = item |
+								:v-attrs = nestedTreeProps
 							.
-								+= self.slot('fold', {':params': 'o.params'})
+								< template &
+									#default = o |
+									v-if = vdom.getSlot('default')
+								.
+									+= self.slot('default', {':item': 'o.item'})
+
+								< template &
+									#fold = o |
+									v-if = vdom.getSlot('fold')
+								.
+									+= self.slot('fold', {':params': 'o.params'})
diff --git a/src/base/b-tree/b-tree.ts b/src/base/b-tree/b-tree.ts
index ee70c44885..869f33a71f 100644
--- a/src/base/b-tree/b-tree.ts
+++ b/src/base/b-tree/b-tree.ts
@@ -15,12 +15,20 @@
 import 'models/demo/nested-list';
 //#endif
 
+import 'core/component/directives/aria';
+
 import symbolGenerator from 'core/symbol';
 
+import { derive } from 'core/functools/trait';
+
+import SyncPromise from 'core/promise/sync';
 import iItems, { IterationKey } from 'traits/i-items/i-items';
+import iData, { component, prop, field, TaskParams, TaskI, ComponentElement } from 'super/i-data/i-data';
+import iAccess from 'traits/i-access/i-access';
+import type iBlock from 'super/i-block/i-block';
 
-import iData, { component, prop, field, TaskParams, TaskI } from 'super/i-data/i-data';
 import type { Item, RenderFilter } from 'base/b-tree/interface';
+import type { Orientation } from 'core/component/directives/aria';
 
 export * from 'super/i-data/i-data';
 export * from 'base/b-tree/interface';
@@ -28,11 +36,14 @@ export * from 'base/b-tree/interface';
 export const
 	$$ = symbolGenerator();
 
+interface bTree extends Trait<typeof iAccess> {}
+
 /**
  * Component to render tree of any elements
  */
 @component()
-export default class bTree extends iData implements iItems {
+@derive(iAccess)
+class bTree extends iData implements iItems, iAccess {
 	/** @see [[iItems.Item]] */
 	readonly Item!: Item;
 
@@ -98,6 +109,12 @@ export default class bTree extends iData implements iItems {
 	@prop(Boolean)
 	readonly folded: boolean = true;
 
+	/**
+	 * The component view orientation
+	 */
+	@prop(String)
+	readonly orientation: Orientation = 'vertical';
+
 	/**
 	 * Link to the top level component (internal parameter)
 	 */
@@ -114,6 +131,88 @@ export default class bTree extends iData implements iItems {
 	@field((o) => o.sync.link())
 	items!: this['Items'];
 
+	/** @see [[iAccess.focus]] */
+	focus(): Promise<boolean> {
+		const
+			element = this.dom.findFocusableElement(this.top != null ? this.top.$el : this.$el);
+
+		if (element != null) {
+			element.focus();
+			return iAccess.focus(this);
+		}
+
+		return SyncPromise.resolve(false);
+	}
+
+	/** @see [[iAccess.blur]] */
+	blur(): Promise<boolean> {
+		const
+			active = <AccessibleElement | null>document.activeElement;
+
+		if (active != null && this.$el?.contains(active)) {
+			active.blur();
+			return iAccess.blur(this);
+		}
+
+		return SyncPromise.resolve(false);
+	}
+
+	/** @see [[iAccess.disable]] */
+	disable(): Promise<boolean> {
+		const
+			items = this.block?.elements<ComponentElement<iBlock>>('item'),
+			children = this.block?.elements<ComponentElement<iBlock>>('child');
+
+		items?.forEach(disableElement);
+		children?.forEach(disableElement);
+
+		return iAccess.disable(this);
+
+		function disableElement(element: ComponentElement<iBlock>) {
+			const
+				{component} = element;
+
+			if (component == null) {
+				element.setAttribute('disabled', 'true');
+				return;
+			}
+
+			if (iAccess.is(component)) {
+				return component.disable();
+			}
+
+			void iAccess.disable(component);
+		}
+	}
+
+	/** @see [[iAccess.enable]] */
+	enable(): Promise<boolean> {
+		const
+			items = this.block?.elements<ComponentElement<iBlock>>('item'),
+			children = this.block?.elements<ComponentElement<iBlock>>('child');
+
+		items?.forEach(enableElement);
+		children?.forEach(enableElement);
+
+		return iAccess.enable(this);
+
+		function enableElement(element: ComponentElement<iBlock>) {
+			const
+				{component} = element;
+
+			if (component == null) {
+				element.removeAttribute('disabled');
+				return;
+			}
+
+			if (iAccess.is(component)) {
+				return component.enable();
+			}
+
+			void iAccess.enable(component);
+		}
+	}
+
 	/**
 	 * Parameters for async render tasks
 	 */
@@ -239,6 +338,78 @@ export default class bTree extends iData implements iItems {
 		return this.$el?.querySelector(`[data-id=${itemId}]`) ?? undefined;
 	}
 
+	/**
+	 * Returns a dictionary with configurations for the `v-aria` directive used as a tree
+	 * @param role
+	 */
+	protected getAriaConfig(role: 'tree'): Dictionary
+
+	/**
+	 * Returns a dictionary with configurations for the `v-aria` directive used as a treeitem
+	 *
+	 * @param role
+	 * @param item - tree item data
+	 * @param i - tree item position index
+	 */
+	protected getAriaConfig(role: 'treeitem', item: this['Item'], i: number): Dictionary
+
+	protected getAriaConfig(role: 'tree' | 'treeitem', item?: this['Item'], i?: number): Dictionary {
+		const getFoldedMod = (item?.id != null) ?
+			this.getFoldedModById.bind(this, item.id) :
+			() => '';
+
+		const
+			root = () => this.top?.$el ?? this.$el;
+
+		const treeConfig = {
+			root: this.top == null,
+			orientation: this.orientation,
+			'@change': (cb: Function) => {
+				this.on('fold', (ctx, el: Element, item, value: boolean) => cb(el, !value));
+			}
+		};
+
+		const treeitemConfig = {
+			orientation: this.orientation,
+			firstRootItem: this.top == null && i === 0,
+
+			get expanded() {
+				return getFoldedMod() === 'false';
+			},
+
+			get expandable() {
+				return item?.children != null;
+			},
+
+			toggleFold: toggleFold.bind(this),
+
+			get rootElement() {
+				return root();
+			}
+		};
+
+		switch (role) {
+			case 'tree': return treeConfig;
+			case 'treeitem': return treeitemConfig;
+			default: return {};
+		}
+
+		function toggleFold(this: bTree, target: HTMLElement, value?: boolean) {
+			const
+				mod = this.block?.getElMod(target, 'node', 'folded');
+
+			if (mod == null) {
+				return;
+			}
+
+			const
+				newVal = value ? value : mod === 'false';
+
+			this.block?.setElMod(target, 'node', 'folded', newVal);
+			this.emit('fold', target, item, newVal);
+		}
+	}
+
 	/**
 	 * Handler: fold element has been clicked
 	 *
@@ -256,3 +427,5 @@ export default class bTree extends iData implements iItems {
 		}
 	}
 }
+
+export default bTree;
diff --git a/src/base/b-window/CHANGELOG.md b/src/base/b-window/CHANGELOG.md
index 6fa59df32b..32ca2a33f5 100644
--- a/src/base/b-window/CHANGELOG.md
+++ b/src/base/b-window/CHANGELOG.md
@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :house: Internal
+
+* Improved component accessibility
+
 ## v3.0.0-rc.211 (2021-07-21)
 
 #### :boom: Breaking Change
diff --git a/src/base/b-window/README.md b/src/base/b-window/README.md
index 66652ec797..0a4fcbd5f1 100644
--- a/src/base/b-window/README.md
+++ b/src/base/b-window/README.md
@@ -18,6 +18,8 @@ This module provides a component to create a modal window.
 
 * By default, the root tag of the component is `<div>`.
 
+* The component is accessible.
+
 ## Modifiers
 
 | Name       | Description                              | Values                  | Default   |
@@ -263,3 +265,8 @@ When opening the window, you can specify at which `stage` the component should s
 < span @click = $refs.window.open('loading')
   Open the window
 ```
+
+## Accessibility
+
+The component implements an ARIA role [dialog](https://www.w3.org/TR/wai-aria/#dialog).
+All the accessible functionality included in this [widget](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/) is supported.
diff --git a/src/base/b-window/b-window.ss b/src/base/b-window/b-window.ss
index 480ef0e322..2a788b24bc 100644
--- a/src/base/b-window/b-window.ss
+++ b/src/base/b-window/b-window.ss
@@ -24,7 +24,16 @@
 				opt.ifOnce('opened', m.opened === 'true') && delete watchModsStore.opened
 			.
 
-				< :section.&__window ref = window
+				< :section.&__window &
+					ref = window |
+					:v-attrs = title ?
+						{
+							'v-aria:dialog': {...getAriaConfig(), label: title}
+						} :
+						{
+							'v-aria:dialog.#title': getAriaConfig()
+						}
+				.
 					- if thirdPartySlots
 						< template v-if = slotName
 							: isSlot = /^windowSlot[A-Z]/
@@ -36,7 +45,10 @@
 
 					< template v-else
 						+= self.slot()
-							< h1.&__title v-if = title || vdom.getSlot('title')
+							< h1.&__title &
+								v-if = title || vdom.getSlot('title') |
+								v-id = 'title'
+							.
 								+= self.slot('title', {':title': 'title'})
 									- block title
 										{{ title }}
diff --git a/src/base/b-window/b-window.ts b/src/base/b-window/b-window.ts
index 1b444faaf1..a3624c5d86 100644
--- a/src/base/b-window/b-window.ts
+++ b/src/base/b-window/b-window.ts
@@ -11,6 +11,8 @@
  * @packageDocumentation
  */
 
+import 'core/component/directives/aria';
+
 import symbolGenerator from 'core/symbol';
 import { derive } from 'core/functools/trait';
 
@@ -312,6 +314,16 @@ class bWindow extends iData implements iVisible, iWidth, iOpenToggle, iLockPageS
 		super.beforeDestroy();
 		this.removeRootMod('hidden');
 	}
+
+	/**
+	 * Returns a dictionary with configurations for the `v-aria` directive
+	 */
+	protected getAriaConfig(): Dictionary {
+		return {
+			'@open': (cb) => this.on('open', cb),
+			'@close': (cb) => this.on('close', cb)
+		};
+	}
 }
 
 export default bWindow;
diff --git a/src/core/component/directives/aria/CHANGELOG.md b/src/core/component/directives/aria/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/README.md b/src/core/component/directives/aria/README.md
new file mode 100644
index 0000000000..65eac0d48a
--- /dev/null
+++ b/src/core/component/directives/aria/README.md
@@ -0,0 +1,160 @@
+# core/component/directives/aria
+
+This module provides a directive to add aria attributes and logic to elements via a common API.
+
+```
+< div v-aria = {labelledby: dom.getId('title')}
+
+/// The same as
+
+< div :aria-labelledby = dom.getId('title')
+```
+
+The [ARIA](https://www.w3.org/TR/wai-aria) specification consists of a set of entities called roles.
+For example, [Tablist](https://www.w3.org/TR/wai-aria/#tablist) or [Combobox](https://www.w3.org/TR/wai-aria/#combobox).
+Therefore, the directive also consists of many engines, each of which implements a particular role.
+
+```
+< div v-aria:combobox = {...}
+```
+
+## Why is this directive needed?
+
+Accessibility is an important part of a modern web application.
+However, the implementation of a particular role can be quite a challenge, due to the presence of a large number of nuances.
+On the other hand, there are many unrelated components that can logically implement the same ARIA role.
+Therefore, we need the ability to share this code between components and not enforce coupling between them.
+In addition, ARIA roles are heavily DOM bound, so we need the ability to inject in the component markup.
+It turns out that using the directive is the most optimal solution for this task.
+
+## List of supported roles
+
+All roles supported by the directive are located in the `roles` sub-folder.
+
+Each role is named after the appropriate name from the ARIA specification.
+Each role can accept its own set of options, which are described in its documentation.
+
+* [Combobox](https://www.w3.org/TR/wai-aria/#combobox)
+* [Dialog](https://www.w3.org/TR/wai-aria/#dialog)
+* [Listbox](https://www.w3.org/TR/wai-aria/#listbox)
+* [Option](https://www.w3.org/TR/wai-aria/#option)
+* [Tab](https://www.w3.org/TR/wai-aria/#tab)
+* [Tablist](https://www.w3.org/TR/wai-aria/#tablist)
+* [Tabpanel](https://www.w3.org/TR/wai-aria/#tabpanel)
+* [Tree](https://www.w3.org/TR/wai-aria/#tree)
+* [Treeitem](https://www.w3.org/TR/wai-aria/#treeitem)
+* [Controls](https://www.w3.org/TR/wai-aria/#aria-controls)
+
+## Available options
+
+Any ARIA attributes could be added in options through the short syntax.
+
+```
+< div v-aria = {label: 'foo', desribedby: 'id1', details: 'id2'}
+
+/// The same as
+
+< div :aria-label = 'foo' | :aria-desribedby = 'id1' | :aria-details = 'id2'
+```
+
+The most common are described below.
+
+### [label]
+
+Defines a string value that labels the current element.
+See [this](https://www.w3.org/TR/wai-aria/#aria-label) for more information.
+
+```
+< input type = text | v-aria = {labelledby: 'Billing Name'}
+```
+
+### [labelledby]
+
+Identifies the element (or elements) that labels the current element.
+See [this](https://www.w3.org/TR/wai-aria/#aria-labelledby) for more information.
+
+```
+< #billing
+  Billing
+
+< #name
+  Name
+
+< input type = text | v-aria = {labelledby: 'billing name'}
+
+< #address
+  Address
+
+< input type = text | v-aria = {labelledby: 'billing address'}
+```
+
+### [describedby]
+
+Identifies the element (or elements) that describes the object.
+See [this](https://www.w3.org/TR/wai-aria/#aria-describedby) for more information.
+
+```
+< button v-aria = {describedby: 'trash-desc'}
+  Move to trash
+
+< p#trash-desc
+  Items in the trash will be permanently removed after 30 days.
+```
+
+### Adding handlers for a role
+
+Some roles need to handle component state changes or respond to certain events (add, remove, or change certain attributes).
+Such handlers are specified as regular directive parameters, but with the special character `@` added to the beginning of the parameter names.
+The value of such parameters can be different types of data.
+
+#### Listening a component event
+
+If you pass a string as the value of a handler parameter, then that string will be treated as the name of the component event.
+When such an event fires, the corresponding role method will be called, where the `@` symbol is replaced with `on` and
+everything is translated into camelCase. For instance, the `@change` key means calling the `onChange` method on the role.
+The called method will receive the event parameters as arguments.
+
+```
+< div v-aria:somerole = {'@change': 'myComponentEvent'}
+```
+
+#### Handling a promise
+
+If you pass a promise as the value of a handler parameter, then when this promise is resolved, the corresponding role method
+will be called, where the `@` character is replaced with `on`, and everything is converted to camelCase. For instance,
+the `@change` key means calling the `onChange` method on the role. The called method will receive the unwrapped promise value
+as an argument.
+
+```
+< div v-aria:somerole = {'@change': myComponentPromise}
+```
+
+#### Providing a callback
+
+If you pass a function, it will be called immediately and will receive as a parameter a reference to the corresponding role method,
+where the `@` character is replaced with `on` and everything is converted to camelCase. For instance,
+the `@change` key means calling the `onChange` method on the role. This approach is the most flexible, because allows you
+to register any handlers in this way.
+
+```
+< div v-aria:somerole = {'@change': (cb) => on('event', cb)}
+
+// Similar to
+
+< div v-aria:somerole = {'@change': 'event'}
+```
+
+## Modifiers
+
+### `#`
+
+This modifier represents a snippet for more convenient setting of the `labelledby` attribute.
+Note that the identifier passed in this way is automatically associated with the component within which the directive is used.
+
+```
+< div v-aria.#title
+
+/// The same as
+
+< div v-aria = {labelledby: dom.getId('title')}
+```
diff --git a/src/core/component/directives/aria/adapter.ts b/src/core/component/directives/aria/adapter.ts
new file mode 100644
index 0000000000..cc1b3873cd
--- /dev/null
+++ b/src/core/component/directives/aria/adapter.ts
@@ -0,0 +1,180 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import Async from 'core/async';
+import type iBlock from 'super/i-block/i-block';
+
+import * as roles from 'core/component/directives/aria/roles';
+import type { DirectiveOptions } from 'core/component/directives/aria/interface';
+import type { ARIARole, RoleOptions } from 'core/component/directives/aria/roles';
+
+/**
+ * An adapter to create an ARIA role instance based on the passed directive params and to add common attributes
+ */
+export default class ARIAAdapter {
+	/**
+	 * Parameters passed from the associated directive
+	 */
+	protected readonly params: DirectiveOptions;
+
+	/** @see [[Async]] */
+	protected readonly async: Async = new Async();
+
+	/**
+	 * An instance of the associated ARIA role
+	 */
+	protected role: ARIARole | null = null;
+
+	/**
+	 * A context of the associated directive
+	 */
+	protected get ctx(): iBlock['unsafe'] {
+		return Object.cast<iBlock['unsafe']>(this.params.vnode.fakeContext);
+	}
+
+	/**
+	 * @param params - parameters passed from the associated directive
+	 */
+	constructor(params: DirectiveOptions) {
+		this.params = params;
+		this.createRole();
+		this.init();
+	}
+
+	/**
+	 * Initializes the adapter according to the associated directive parameters
+	 */
+	init(): void {
+		this.role?.init();
+		this.attachRoleHandlers();
+		this.setRoleAttributes();
+	}
+
+	/**
+	 * Destroys the adapter and cancels all tied threads
+	 */
+	destroy(): void {
+		this.async.clearAll().locked = true;
+	}
+
+	/**
+	 * Creates an ARIA role based on the associated directive parameters.
+	 * If the role is not explicitly specified in the parameters, then the common strategy will be used.
+	 * The method returns an instance of the created role or null.
+	 */
+	protected createRole(): ARIARole | null {
+		const
+			{el, binding} = this.params,
+			{value, modifiers, arg: role} = binding;
+
+		if (role == null) {
+			return null;
+		}
+
+		const params: RoleOptions<ARIARole['Params']> = {
+			el,
+			modifiers,
+			params: value,
+			ctx: this.ctx,
+			async: this.async
+		};
+
+		return this.role = new roles[role.capitalize()](params);
+	}
+
+	/**
+	 * Sets the ARIA attributes passed in the associated directive parameters
+	 */
+	protected setRoleAttributes(): void {
+		const
+			{binding} = this.params;
+
+		for (const mod in binding.modifiers) {
+			if (!mod.startsWith('#')) {
+				continue;
+			}
+
+			this.setAttribute('aria-labelledby', this.ctx.dom.getId(mod.slice(1)), this.role?.el);
+			break;
+		}
+
+		if (Object.isDictionary(binding.value)) {
+			Object.forEach(binding.value, (param, key) => {
+				const
+					roleParams = this.role?.Params;
+
+				if (param == null || roleParams?.hasOwnProperty(key)) {
+					return;
+				}
+
+				this.setAttribute(`aria-${key}`.dasherize(), param, this.role?.el);
+			});
+		}
+	}
+
+	/**
+	 * Attaches the handlers specified in the parameters of the associated directive to the created ARIA role.
+	 * Any handler can be specified as a function, a promise, or a string.
+	 *
+	 * To specify a handler, use the `@` character at the beginning of the parameter key.
+	 * For example, `@open` will be converted to the role `onOpen` handler.
+	 */
+	protected attachRoleHandlers(): void {
+		const {
+			role,
+			async: $a,
+			params: {binding}
+		} = this;
+
+		if (role == null || !Object.isDictionary(binding.value)) {
+			return;
+		}
+
+		Object.forEach(binding.value, (val, key) => {
+			if (val == null || !key.startsWith('@')) {
+				return;
+			}
+
+			const
+				handlerName = `on-${key.slice(1)}`.camelize(false);
+
+			if (!Object.isFunction(role[handlerName])) {
+				throw new ReferenceError(`The associated ARIA role does not have a handler named "${handlerName}"`);
+			}
+
+			const
+				handler = role[handlerName].bind(this.role);
+
+			if (Object.isFunction(val)) {
+				val($a.proxy(handler, {single: false}));
+
+			} else if (Object.isPromiseLike(val)) {
+				$a.promise(val).then(handler, stderr);
+
+			} else if (Object.isString(val)) {
+				$a.on(this.ctx, val, (ctx, ...args) => handler(...args));
+			}
+		});
+	}
+
+	/**
+	 * Sets a new value of the specified attribute to the node on which the ARIA directive is initialized
+	 *
+	 * @param name - the attribute name
+	 * @param value - the attribute value or a list of values
+	 * @param [el] - the element to set an attribute
+	 */
+	protected setAttribute(name: string, value: CanUndef<CanArray<unknown>>, el: Element = this.params.el): void {
+		if (value == null) {
+			return;
+		}
+
+		el.setAttribute(name, Object.isArray(value) ? value.join(' ') : String(value));
+		this.async.worker(() => el.removeAttribute(name));
+	}
+}
diff --git a/src/core/component/directives/aria/index.ts b/src/core/component/directives/aria/index.ts
new file mode 100644
index 0000000000..84a524b473
--- /dev/null
+++ b/src/core/component/directives/aria/index.ts
@@ -0,0 +1,37 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * [[include:core/component/directives/aria/README.md]]
+ * @packageDocumentation
+ */
+
+import { ComponentEngine, VNode, VNodeDirective } from 'core/component/engines';
+import ARIAAdapter from 'core/component/directives/aria/adapter';
+
+export * from 'core/component/directives/aria/interface';
+
+const
+	ariaInstances = new WeakMap<Element, ARIAAdapter>();
+
+ComponentEngine.directive('aria', {
+	inserted(el: HTMLElement, binding: VNodeDirective, vnode: VNode): void {
+		const
+			{value, arg, modifiers} = binding;
+
+		if (value == null && arg == null && modifiers == null) {
+			return;
+		}
+
+		ariaInstances.set(el, new ARIAAdapter({el, binding, vnode}));
+	},
+
+	unbind(el: HTMLElement) {
+		ariaInstances.get(el)?.destroy();
+	}
+});
diff --git a/src/core/component/directives/aria/interface.ts b/src/core/component/directives/aria/interface.ts
new file mode 100644
index 0000000000..0b65b21e32
--- /dev/null
+++ b/src/core/component/directives/aria/interface.ts
@@ -0,0 +1,17 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { VNode, VNodeDirective } from 'core/component/engines';
+
+export interface DirectiveOptions {
+	el: HTMLElement;
+	binding: VNodeDirective;
+	vnode: VNode;
+}
+
+export type Orientation = 'vertical' | 'horizontal';
diff --git a/src/core/component/directives/aria/roles/README.md b/src/core/component/directives/aria/roles/README.md
new file mode 100644
index 0000000000..ce9f63bec9
--- /dev/null
+++ b/src/core/component/directives/aria/roles/README.md
@@ -0,0 +1,63 @@
+# core/component/directives/aria/roles
+
+This module re-exports implementations of various ARIA roles for the `v-aria` directive,
+and also provides a basic set of types and interfaces for adding new roles.
+
+## List of supported roles
+
+Each role is named after the appropriate name from the ARIA specification.
+Each role can accept its own set of options, which are described in its documentation.
+
+* [Combobox](https://www.w3.org/TR/wai-aria/#combobox)
+* [Dialog](https://www.w3.org/TR/wai-aria/#dialog)
+* [Listbox](https://www.w3.org/TR/wai-aria/#listbox)
+* [Option](https://www.w3.org/TR/wai-aria/#option)
+* [Tab](https://www.w3.org/TR/wai-aria/#tab)
+* [Tablist](https://www.w3.org/TR/wai-aria/#tablist)
+* [Tabpanel](https://www.w3.org/TR/wai-aria/#tabpanel)
+* [Tree](https://www.w3.org/TR/wai-aria/#tree)
+* [Treeitem](https://www.w3.org/TR/wai-aria/#treeitem)
+* [Controls](https://www.w3.org/TR/wai-aria/#aria-controls)
+
+## Adding handlers for a role
+
+Some roles need to handle component state changes or respond to certain events (add, remove, or change certain attributes).
+Such handlers are specified as regular directive parameters, but with the special character `@` added to the beginning of the parameter names.
+The value of such parameters can be different types of data.
+
+### Listening a component event
+
+If you pass a string as the value of a handler parameter, then that string will be treated as the name of the component event.
+When such an event fires, the corresponding role method will be called, where the `@` symbol is replaced with `on` and
+everything is translated into camelCase. For instance, the `@change` key means calling the `onChange` method on the role.
+The called method will receive the event parameters as arguments.
+
+```
+< div v-aria:somerole = {'@change': 'myComponentEvent'}
+```
+
+### Handling a promise
+
+If you pass a promise as the value of a handler parameter, then when this promise is resolved, the corresponding role method
+will be called, where the `@` character is replaced with `on`, and everything is converted to camelCase. For instance,
+the `@change` key means calling the `onChange` method on the role. The called method will receive the unwrapped promise value
+as an argument.
+
+```
+< div v-aria:somerole = {'@change': myComponentPromise}
+```
+
+### Providing a callback
+
+If you pass a function, it will be called immediately and will receive as a parameter a reference to the corresponding role method,
+where the `@` character is replaced with `on` and everything is converted to camelCase. For instance,
+the `@change` key means calling the `onChange` method on the role. This approach is the most flexible, because allows you
+to register any handlers in this way.
+
+```
+< div v-aria:somerole = {'@change': (cb) => on('event', cb)}
+
+// Similar to
+
+< div v-aria:somerole = {'@change': 'event'}
+```
diff --git a/src/core/component/directives/aria/roles/combobox/CHANGELOG.md b/src/core/component/directives/aria/roles/combobox/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/combobox/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/combobox/README.md b/src/core/component/directives/aria/roles/combobox/README.md
new file mode 100644
index 0000000000..5868058a06
--- /dev/null
+++ b/src/core/component/directives/aria/roles/combobox/README.md
@@ -0,0 +1,41 @@
+# core/component/directives/aria/roles/combobox
+
+This module provides an engine for `v-aria` directive.
+
+The engine to set `combobox` role attribute.
+The `combobox` role identifies an element as an input that controls another element, such as a `listbox`, that can dynamically pop up to help the user set the value of that input.
+
+For more information about attributes go to [combobox](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role`).
+For recommendations how to make accessible widget go to [combobox](`https://www.w3.org/WAI/ARIA/apg/patterns/combobox/`).
+
+## API
+
+The role introduces several additional settings.
+
+### [multiselectable = `false`]
+
+Whether the widget supports a feature of multiple active options
+
+### [@change]
+
+A handler for changing the active option.
+
+### [@open]
+
+A handler for opening the option list.
+
+### [@close]
+
+A handler for closing the option list.
+
+## Usage
+
+```
+< div v-aria:combobox = { &
+    isMultiple: multiple,
+    '@change': (cb) => on('actionChange', cb),
+    '@open': 'open',
+    '@close': 'close'
+  }
+.
+```
diff --git a/src/core/component/directives/aria/roles/combobox/index.ts b/src/core/component/directives/aria/roles/combobox/index.ts
new file mode 100644
index 0000000000..faa36b18ad
--- /dev/null
+++ b/src/core/component/directives/aria/roles/combobox/index.ts
@@ -0,0 +1,69 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type iBlock from 'super/i-block/i-block';
+
+import { ComboboxParams } from 'core/component/directives/aria/roles/combobox/interface';
+import { ARIARole, RoleOptions } from 'core/component/directives/aria/roles/interface';
+
+export class Combobox extends ARIARole {
+	override Params: ComboboxParams = new ComboboxParams();
+	override Ctx!: iBlock['unsafe'];
+	override el: HTMLElement;
+
+	constructor(options: RoleOptions<ComboboxParams>) {
+		super(options);
+
+		const
+			{el} = this;
+
+		this.el = this.ctx?.dom.findFocusableElement() ?? el;
+	}
+
+	/** @inheritDoc */
+	init(): void {
+		this.setAttribute('role', 'combobox');
+		this.setAttribute('aria-expanded', 'false');
+
+		if (this.el.tabIndex < 0) {
+			this.setAttribute('tabindex', '0');
+		}
+	}
+
+	/**
+	 * Sets or deletes the id of active descendant element
+	 */
+	protected setARIAActive(el?: Element): void {
+		this.setAttribute('aria-activedescendant', el?.id ?? '');
+	}
+
+	/**
+	 * Handler: the option list is expanded
+	 * @param el
+	 */
+	protected onOpen(el: Element): void {
+		this.setAttribute('aria-expanded', 'true');
+		this.setARIAActive(el);
+	}
+
+	/**
+	 * Handler: the option list is closed
+	 */
+	protected onClose(): void {
+		this.setAttribute('aria-expanded', 'false');
+		this.setARIAActive();
+	}
+
+	/**
+	 * Handler: active option element was changed
+	 * @param el
+	 */
+	protected onChange(el: Element): void {
+		this.setARIAActive(el);
+	}
+}
diff --git a/src/core/component/directives/aria/roles/combobox/interface.ts b/src/core/component/directives/aria/roles/combobox/interface.ts
new file mode 100644
index 0000000000..0bd1395729
--- /dev/null
+++ b/src/core/component/directives/aria/roles/combobox/interface.ts
@@ -0,0 +1,21 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { HandlerAttachment } from 'core/component/directives/aria/roles/interface';
+
+const defaultFn = (): void => undefined;
+
+export interface ComboboxParams {
+	multiselectable: boolean;
+}
+
+export class ComboboxParams {
+	'@change': HandlerAttachment = defaultFn;
+	'@open': HandlerAttachment = defaultFn;
+	'@close': HandlerAttachment = defaultFn;
+}
diff --git a/src/core/component/directives/aria/roles/combobox/test/unit/combobox.ts b/src/core/component/directives/aria/roles/combobox/test/unit/combobox.ts
new file mode 100644
index 0000000000..3a12f4a5c3
--- /dev/null
+++ b/src/core/component/directives/aria/roles/combobox/test/unit/combobox.ts
@@ -0,0 +1,138 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:combobox', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	const
+		selector = '[data-id="target"]';
+
+	/**
+	 * Initial attributes
+	 */
+	test('role is set', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('role'))
+		).toBe('combobox');
+	});
+
+	test('aria-expanded is set to false', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-expanded'))
+		).toBe('false');
+	});
+
+	test('aria-multiselectable is set to false', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-multiselectable'))
+		).toBe('false');
+	});
+
+	test('aria-multiselectable is set to true', async ({page}) => {
+		const target = await init(page, {multiple: true});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-multiselectable'))
+		).toBe('true');
+	});
+
+	test('element\'s tabindex is 0', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const input = <HTMLElement>ctx.unsafe.block?.element('input');
+				return input.tabIndex;
+			})
+		).toBe(0);
+	});
+
+	/**
+	 * Handling events
+	 */
+	test('select is opened with no preselected option', async ({page}) => {
+		const target = await init(page);
+
+		await page.click(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-expanded'))
+		).toBe('true');
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-activedescendant'))
+		).toBe('');
+	});
+
+	test('select is opened with preselected option', async ({page}) => {
+		const target = await init(page, {value: 1});
+
+		await page.focus('input');
+
+		const id = await target.evaluate((ctx) => ctx.unsafe.dom.getId('1'));
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-expanded'))
+		).toBe('true');
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-activedescendant'))
+		).toBe(id);
+	});
+
+	test('select is opened and closed', async ({page}) => {
+		const target = await init(page, {value: 1});
+
+		await page.focus('input');
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-expanded'))
+		).toBe('true');
+
+		await page.click('body');
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-expanded'))
+		).toBe('false');
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block?.element('input')?.getAttribute('aria-activedescendant'))
+		).toBe('');
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-select', {
+			attrs: {
+				'data-id': 'target',
+				items: [
+					{label: 'foo', value: 0},
+					{label: 'bar', value: 1}
+				],
+				...attrs
+			}
+		});
+	}
+});
diff --git a/src/core/component/directives/aria/roles/controls/CHANGELOG.md b/src/core/component/directives/aria/roles/controls/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/controls/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/controls/README.md b/src/core/component/directives/aria/roles/controls/README.md
new file mode 100644
index 0000000000..64b07d3195
--- /dev/null
+++ b/src/core/component/directives/aria/roles/controls/README.md
@@ -0,0 +1,117 @@
+# core/component/directives/aria/roles/controls
+
+This module provides an engine for `v-aria` directive.
+
+The engine is used to set `aria-controls` attribute.
+The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
+
+For more information go to [controls](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls`).
+
+## API
+
+Directive can be added to any tag that includes tag with needed role. Role should be passed as a modifier.
+ID or IDs are passed as value.
+ID could be single or multiple written in string with space between.
+
+There are two ways to use this engine:
+1. To add role as a modifier to which passed IDs in `for` value should be added. `for` could be `string` or `string[]`.
+If element controls several elements `for` should be passed as a string with IDs separated with space.
+(!) Notice that this role attribute should already be added to the element. The engine does not set passed role to any element.
+
+Example:
+```
+< div id = 'tab' | v-aria:tablist | v-aria:controls.tab = {for: 'id1 id2 id3'}
+  < div v-aria:tab
+    Tab
+
+< div id = 'id1' | v-aria:tabpanel = {labelledby: 'tab'}
+  Content
+
+< div id = 'id2' | v-aria:tabpanel = {labelledby: 'tab'}
+  Content
+
+< div id = 'id3' | v-aria:tabpanel = {labelledby: 'tab'}
+  Content
+```
+
+2. To pass value `for` as an array of tuples.
+First id in a tuple is an id of an element to add the aria attributes.
+The second one is an id of an element to set as value in aria-controls attribute.
+(!) Notice that id attribute should already be added to the element. The engine does not set passed ids to any element.
+
+Example:
+```
+< div v-aria:tablist | v-aria:controls = {for: [['tab-1', 'panel-1'], ['tab-2', 'panel-2']]}
+  < div id = 'tab-1' | v-aria:tab
+    First tab
+
+  < div id = 'tab-2' | v-aria:tab
+    Second tab
+
+< div id = 'panel-1' | v-aria:tabpanel = {labelledby: 'tab-1'}
+  Content for the first panel
+
+< div id = 'panel-2' | v-aria:tabpanel = {labelledby: 'tab-2'}
+  Content for the second panel
+```
+
+## Usage
+
+Example with `b-list`:
+
+```
+< b-list :items = [ &
+  {label: 'First tab', id: 'tab-1', controls: 'panel-1'},
+  {label: 'Second tag', id: 'tab-2', controls: 'panel-2'},
+  {label: 'Third tab', id: 'tab-3', controls: 'panel-3'}
+] .
+
+< div id = 'panel-1' | v-aria:tabpanel = {labelledby: 'tab-1'}
+  < p
+    Content for the first panel
+
+< div id = 'panel-2' | v-aria:tabpanel = {labelledby: 'tab-2'}
+  < p
+    Content for the second panel
+
+< div id = 'panel-3' | v-aria:tabpanel = {labelledby: 'tab-3'}
+  < p
+    Content for the third panel
+```
+
+Example with custom tab list:
+
+```
+< div.custom-page
+  < div v-aria.tablist = {label: 'Sample Tabs'}
+    < span &
+      id = 'tab-1' |
+      v-aria.tab = {...config} |
+      v-aria.controls = {for: 'panel-1'}
+        First Tab
+
+    < span &
+      id = 'tab-2' |
+      v-aria.tab = {...config} |
+      v-aria.controls = {for: 'panel-2'}
+        Second Tab
+
+    < span &
+      id = 'tab-3' |
+      v-aria.tab = {...config} |
+      v-aria.controls = {for: 'panel-3'}
+        Third Tab
+
+  < div id = 'panel-1' | v-aria.tabpanel = {labelledby = 'tab-1'}
+    < p
+      Content for the first panel
+
+  < div id = 'panel-2' | v-aria.tabpanel = {labelledby = 'tab-2'}
+    < p
+      Content for the second panel
+
+  < div id = 'panel-3' | v-aria.tabpanel = {labelledby = 'tab-3'}
+    < p
+     Content for the third panel
+
+```
diff --git a/src/core/component/directives/aria/roles/controls/index.ts b/src/core/component/directives/aria/roles/controls/index.ts
new file mode 100644
index 0000000000..0fdc19af68
--- /dev/null
+++ b/src/core/component/directives/aria/roles/controls/index.ts
@@ -0,0 +1,78 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import { ControlsParams } from 'core/component/directives/aria/roles/controls/interface';
+import { ARIARole } from 'core/component/directives/aria/roles/interface';
+
+export class Controls extends ARIARole {
+	override Params: ControlsParams = new ControlsParams();
+
+	/** @inheritDoc */
+	init(): void {
+		const
+			{ctx, modifiers, el} = this,
+			{for: forId} = this.params;
+
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (forId == null) {
+			Object.throw('Controls aria directive expects the id of controlling elements to be passed as "for" prop');
+			return;
+		}
+
+		const
+			isForPropArray = Object.isArray(forId),
+			isForPropArrayOfTuples = isForPropArray && Object.isArray(forId[0]);
+
+		if (modifiers != null && Object.size(modifiers) > 0) {
+			ctx?.$nextTick().then(() => {
+				const
+					roleName = Object.keys(modifiers)[0],
+					elems = el.querySelectorAll(`[role=${roleName}]`);
+
+				if (isForPropArray && forId.length !== elems.length) {
+					Object.throw('Controls aria directive expects prop "for" length to be equal to amount of elements with specified role or string type');
+					return;
+				}
+
+				elems.forEach((el, i) => {
+					if (Object.isString(forId)) {
+						this.setAttribute('aria-controls', forId, el);
+						return;
+					}
+
+					const
+						id = forId[i];
+
+					if (Object.isString(id)) {
+						this.setAttribute('aria-controls', id, el);
+					}
+				});
+			});
+
+			return;
+		}
+
+		if (isForPropArrayOfTuples) {
+			forId.forEach((param) => {
+				const
+					[elId, controlsId] = param,
+					element = el.querySelector(`#${elId}`);
+
+				if (element != null) {
+					this.setAttribute('aria-controls', controlsId, element);
+				}
+			});
+
+			return;
+		}
+
+		if (Object.isString(forId)) {
+			this.setAttribute('aria-controls', forId, el);
+		}
+	}
+}
diff --git a/src/core/component/directives/aria/roles/controls/interface.ts b/src/core/component/directives/aria/roles/controls/interface.ts
new file mode 100644
index 0000000000..c73270ecbb
--- /dev/null
+++ b/src/core/component/directives/aria/roles/controls/interface.ts
@@ -0,0 +1,11 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+export class ControlsParams {
+	for: CanArray<string> | Array<[string, string]> = 'for';
+}
diff --git a/src/core/component/directives/aria/roles/controls/test/unit/controls.ts b/src/core/component/directives/aria/roles/controls/test/unit/controls.ts
new file mode 100644
index 0000000000..deefaee410
--- /dev/null
+++ b/src/core/component/directives/aria/roles/controls/test/unit/controls.ts
@@ -0,0 +1,158 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:controls', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	/**
+	 * With modifiers
+	 */
+	test('modifiers. "for" is a string', async ({page}) => {
+		const target = await init(page, {for: 'id3'});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2] = Array.from(ctx.unsafe.block.elements('link'));
+
+				return el1.getAttribute('aria-controls') === 'id3' && el2.getAttribute('aria-controls') === 'id3';
+			})
+		).toBe(true);
+	});
+
+	test('modifiers. "for" is an array', async ({page}) => {
+		const target = await init(page, {for: ['id3', 'id4']});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('link'));
+
+				return [el1.getAttribute('aria-controls'), el2.getAttribute('aria-controls')];
+			})
+		).toEqual(['id3', 'id4']);
+	});
+
+	test('modifiers. "for" is an array with wrong length', async ({page}) => {
+		const target = await init(page, {for: ['id3', 'id4', 'id5']});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('link'));
+
+				return [el1.hasAttribute('aria-controls'), el2.hasAttribute('aria-controls')];
+			})
+		).toEqual([false, false]);
+	});
+
+	test('modifiers. no "for" value passed', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('link'));
+
+				return [el1.hasAttribute('aria-controls'), el2.hasAttribute('aria-controls')];
+			})
+		).toEqual([false, false]);
+	});
+
+	/**
+	 * With 'for' param as an array of tuples
+	 */
+	test('tuples', async ({page}) => {
+		const target = await init(page, {for: [['id1', 'id3'], ['id2', 'id4']]}, 'v-aria:controls');
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('link'));
+
+				return [el1.getAttribute('aria-controls'), el2.getAttribute('aria-controls')];
+			})
+		).toEqual(['id3', 'id4']);
+	});
+
+	test('tuples. wrong ids', async ({page}) => {
+		const target = await init(page, {for: [['id5', 'id6'], ['id3', 'id8']]}, 'v-aria:controls');
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('link'));
+
+				return [el1.hasAttribute('aria-controls'), el2.hasAttribute('aria-controls')];
+			})
+		).toEqual([false, false]);
+	});
+
+	test('no params passed', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('link'));
+
+				return [el1.hasAttribute('aria-controls'), el2.hasAttribute('aria-controls')];
+			})
+		).toEqual([false, false]);
+	});
+
+	/**
+	 * @param page
+	 * @param ariaConfig
+	 * @param directive
+	 */
+	async function init(
+		page: Page,
+		ariaConfig: Dictionary = {},
+		directive: string = 'v-aria:controls.tab'
+	): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-list', {
+			attrs: {
+				[directive]: ariaConfig,
+				items: [
+					{label: 'foo', value: 0, id: 'id1'},
+					{label: 'bla', value: 1, id: 'id2'}
+				]
+			}
+		});
+	}
+});
diff --git a/src/core/component/directives/aria/roles/dialog/CHANGELOG.md b/src/core/component/directives/aria/roles/dialog/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/dialog/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/dialog/README.md b/src/core/component/directives/aria/roles/dialog/README.md
new file mode 100644
index 0000000000..1582842862
--- /dev/null
+++ b/src/core/component/directives/aria/roles/dialog/README.md
@@ -0,0 +1,14 @@
+# core/component/directives/aria/roles/dialog
+
+This module provides an engine for `v-aria` directive.
+
+The engine to set `dialog` role attribute.
+The `dialog` role is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page.
+
+For more information go to [dialog](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role`).
+
+## Usage
+
+```
+< div v-aria:dialog
+```
diff --git a/src/core/component/directives/aria/roles/dialog/index.ts b/src/core/component/directives/aria/roles/dialog/index.ts
new file mode 100644
index 0000000000..87fd660024
--- /dev/null
+++ b/src/core/component/directives/aria/roles/dialog/index.ts
@@ -0,0 +1,84 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import { ARIARole, KeyCodes } from 'core/component/directives/aria/roles/interface';
+import { DialogParams } from 'core/component/directives/aria/roles/dialog/interface';
+import type iBlock from 'super/i-block/i-block';
+
+export class Dialog extends ARIARole {
+	override Params: DialogParams = new DialogParams();
+	override Ctx!: iBlock['unsafe'];
+
+	protected previousFocusedElement: Nullable<AccessibleElement>;
+	protected focusableElements: AccessibleElement[] = [];
+
+	/** @inheritDoc */
+	async init(): Promise<void> {
+		this.setAttribute('role', 'dialog');
+		this.setAttribute('aria-modal', 'true');
+
+		if (this.ctx == null) {
+			return;
+		}
+
+		this.focusableElements = [...this.ctx.dom.findFocusableElements(this.el)];
+
+		this.async.on(this.el, 'keydown', this.onKeydown.bind(this));
+
+		await this.ctx.nextTick();
+
+		const
+			{label, labelledby} = this.params;
+
+		if (label == null && labelledby == null && !this.el.hasAttribute('aria-labelledby')) {
+			throw new TypeError('The `dialog` role expects a `label` or `labelledby` value to be passed');
+		}
+	}
+
+	/**
+	 * Handler: the dialog has been opened
+	 */
+	protected async onOpen(): Promise<void> {
+		await this.ctx?.nextTick();
+
+		if (this.previousFocusedElement == null) {
+			this.previousFocusedElement = <AccessibleElement | null>document.activeElement;
+		}
+
+		this.ctx?.dom.removeAllFromTabSequence(document.body);
+		this.ctx?.dom.restoreAllToTabSequence(this.el);
+		this.ctx?.dom.findFocusableElement(this.el)?.focus();
+	}
+
+	/**
+	 * Handler: the dialog has been closed
+	 */
+	protected async onClose(): Promise<void> {
+		await this.ctx?.nextTick();
+
+		this.ctx?.dom.restoreAllToTabSequence(document.body);
+
+		this.previousFocusedElement?.focus();
+		this.previousFocusedElement = null;
+	}
+
+	/**
+	 * Handler: a keyboard event has occurred
+	 */
+	protected onKeydown(e: KeyboardEvent): void {
+		if (e.key === KeyCodes.TAB) {
+
+			if (document.activeElement === this.focusableElements.at(-1)) {
+				this.focusableElements[0]?.focus();
+
+				e.stopPropagation();
+				e.preventDefault();
+			}
+		}
+	}
+}
diff --git a/src/core/component/directives/aria/roles/dialog/interface.ts b/src/core/component/directives/aria/roles/dialog/interface.ts
new file mode 100644
index 0000000000..fd7bdb5bf7
--- /dev/null
+++ b/src/core/component/directives/aria/roles/dialog/interface.ts
@@ -0,0 +1,19 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { HandlerAttachment } from 'core/component/directives/aria/roles/interface';
+
+export interface DialogParams {
+	label?: string;
+	labelledby?: string;
+}
+
+export class DialogParams {
+	'@open': HandlerAttachment = () => undefined;
+	'@close': HandlerAttachment = () => undefined;
+}
diff --git a/src/core/component/directives/aria/roles/dialog/test/unit/dialog.ts b/src/core/component/directives/aria/roles/dialog/test/unit/dialog.ts
new file mode 100644
index 0000000000..982dc235cb
--- /dev/null
+++ b/src/core/component/directives/aria/roles/dialog/test/unit/dialog.ts
@@ -0,0 +1,109 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+import type { ComponentElement } from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:dialog', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('role is set', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate(() => {
+				const
+					elem = <ComponentElement<iBlock>>document.querySelector('#window');
+
+				return elem.component?.unsafe.block?.element('window')?.getAttribute('role');
+			})
+		).toBe('dialog');
+	});
+
+	test('aria-modal is set', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate(() => {
+				const
+					elem = <ComponentElement<iBlock>>document.querySelector('#window');
+
+				return elem.component?.unsafe.block?.element('window')?.getAttribute('aria-modal');
+			})
+		).toBe('true');
+	});
+
+	test('aria-label is set', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate(() => {
+				const
+					elem = <ComponentElement<iBlock>>document.querySelector('#window');
+
+				return elem.component?.unsafe.block?.element('window')?.getAttribute('aria-label');
+			})
+		).toBe('Title');
+	});
+
+	test('tab indexes are correct', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate(async (ctx) => {
+				const
+					openBtn = <HTMLElement>document.querySelector('#openBtn'),
+					closeBtn = <HTMLElement>document.querySelector('#closeBtn'),
+					res: Array<Nullable<string>> = [];
+
+				openBtn.click();
+				await ctx.nextTick();
+
+				res.push(openBtn.getAttribute('tabindex'));
+				res.push(closeBtn.getAttribute('tabindex'));
+
+				return res;
+			})
+		).toEqual(['-1', '0']);
+	});
+
+	test('previous focused element get focus', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate(async (ctx) => {
+				const
+					openBtn = <HTMLElement>document.querySelector('#openBtn'),
+					closeBtn = <HTMLElement>document.querySelector('#closeBtn');
+
+				openBtn.focus();
+				openBtn.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true}));
+				await ctx.nextTick();
+
+				closeBtn.focus();
+				closeBtn.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true}));
+				await ctx.nextTick();
+
+				return document.activeElement?.id;
+			})
+		).toEqual('openBtn');
+	});
+
+	/**
+	 * @param page
+	 */
+	async function init(page: Page): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-dummy-dialog');
+	}
+});
diff --git a/src/core/component/directives/aria/roles/index.ts b/src/core/component/directives/aria/roles/index.ts
new file mode 100644
index 0000000000..09323dfc6a
--- /dev/null
+++ b/src/core/component/directives/aria/roles/index.ts
@@ -0,0 +1,25 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * [[include:core/component/directives/aria/roles/README.md]]
+ * @packageDocumentation
+ */
+
+export * from 'core/component/directives/aria/roles/dialog';
+export * from 'core/component/directives/aria/roles/tablist';
+export * from 'core/component/directives/aria/roles/tab';
+export * from 'core/component/directives/aria/roles/tabpanel';
+export * from 'core/component/directives/aria/roles/controls';
+export * from 'core/component/directives/aria/roles/combobox';
+export * from 'core/component/directives/aria/roles/listbox';
+export * from 'core/component/directives/aria/roles/option';
+export * from 'core/component/directives/aria/roles/tree';
+export * from 'core/component/directives/aria/roles/treeitem';
+
+export { ARIARole, RoleOptions } from 'core/component/directives/aria/roles/interface';
diff --git a/src/core/component/directives/aria/roles/interface.ts b/src/core/component/directives/aria/roles/interface.ts
new file mode 100644
index 0000000000..e42449f22f
--- /dev/null
+++ b/src/core/component/directives/aria/roles/interface.ts
@@ -0,0 +1,97 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type Async from 'core/async';
+import type { ComponentInterface } from 'core/component';
+
+export abstract class ARIARole {
+	/**
+	 * Type: parameters passed from the associated directive
+	 */
+	readonly Params!: AbstractParams;
+
+	/**
+	 * Type: a component context within which the associated directive is used
+	 */
+	readonly Ctx!: ComponentInterface;
+
+	/**
+	 * An element to which the associated directive is applied
+	 */
+	readonly el: AccessibleElement;
+
+	/**
+	 * A component context within which the associated directive is used
+	 */
+	readonly ctx?: this['Ctx'];
+
+	/**
+	 * Parameters passed from the associated directive
+	 */
+	readonly params: this['Params'];
+
+	/**
+	 * Modifiers passed from the associated directive
+	 */
+	readonly modifiers?: Dictionary<boolean>;
+
+	/** @see [[Async]] */
+	protected async: Async;
+
+	constructor({el, ctx, modifiers, params = {}, async}: RoleOptions<ARIARole['Params']>) {
+		this.el = el;
+		this.ctx = ctx;
+		this.modifiers = modifiers;
+		this.params = params;
+		this.async = async;
+	}
+
+	/**
+	 * Initializes the role
+	 */
+	abstract init(): void;
+
+	/**
+	 * Sets a new value of the specified attribute to the passed element
+	 *
+	 * @param name - the attribute name
+	 * @param value - the attribute value or a list of values
+	 * @param [el] - the element to set an attribute
+	 */
+	protected setAttribute(name: string, value: CanUndef<CanArray<unknown>>, el: Element = this.el): void {
+		if (value == null) {
+			return;
+		}
+
+		el.setAttribute(name, Object.isArray(value) ? value.join(' ') : String(value));
+		this.async.worker(() => el.removeAttribute(name));
+	}
+}
+
+interface AbstractParams {}
+
+export interface RoleOptions<P extends AbstractParams, C extends ComponentInterface = ComponentInterface> {
+	el: AccessibleElement;
+	ctx?: C;
+	params?: P;
+	modifiers?: Dictionary<boolean>;
+	async: Async;
+}
+
+export type HandlerAttachment = ((cb: Function) => void) | Promise<any> | string;
+
+export const enum KeyCodes {
+	ENTER = 'Enter',
+	END = 'End',
+	HOME = 'Home',
+	LEFT = 'ArrowLeft',
+	UP = 'ArrowUp',
+	RIGHT = 'ArrowRight',
+	DOWN = 'ArrowDown',
+	TAB = 'Tab'
+}
diff --git a/src/core/component/directives/aria/roles/listbox/CHANGELOG.md b/src/core/component/directives/aria/roles/listbox/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/listbox/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/listbox/README.md b/src/core/component/directives/aria/roles/listbox/README.md
new file mode 100644
index 0000000000..46beafb742
--- /dev/null
+++ b/src/core/component/directives/aria/roles/listbox/README.md
@@ -0,0 +1,17 @@
+# core/component/directives/aria/roles/listbox
+
+This module provides an engine for `v-aria` directive.
+
+The engine to set `listbox` role attribute.
+The `listbox` role is used for lists from which a user may select one or more items which are static and may contain images.
+
+For more information go to [listbox](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role`).
+For recommendations how to make accessible widget go to [listbox](`https://www.w3.org/WAI/ARIA/apg/patterns/listbox/`).
+
+Widget `listbox` also contains elements with role `option` (see specified engine)
+
+## Usage
+
+```
+< div v-aria:listbox = {...}
+```
diff --git a/src/core/component/directives/aria/roles/listbox/index.ts b/src/core/component/directives/aria/roles/listbox/index.ts
new file mode 100644
index 0000000000..620774aca8
--- /dev/null
+++ b/src/core/component/directives/aria/roles/listbox/index.ts
@@ -0,0 +1,143 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type iBlock from 'super/i-block/i-block';
+
+import { ARIARole, KeyCodes } from 'core/component/directives/aria/roles/interface';
+import { ListboxParams } from 'core/component/directives/aria/roles/listbox/interface';
+
+export class Listbox extends ARIARole {
+	override Params: ListboxParams = new ListboxParams();
+	override Ctx!: iBlock['unsafe'];
+
+	options: CanUndef<AccessibleElement[]>;
+
+	/** @inheritDoc */
+	init(): void {
+		const
+			{standAlone, label, labelledby} = this.params;
+
+		if (standAlone) {
+			if (this.ctx == null) {
+				return;
+			}
+
+			if (label == null && labelledby == null) {
+				throw new TypeError('The `listbox` role expects a `label` or `labelledby` value to be passed');
+			}
+
+			void this.ctx.lfc.execCbAfterBlockReady(() => {
+				const
+					options = this.ctx?.block?.elements('item');
+
+				if (options != null) {
+					this.options = Array.from(<NodeListOf<AccessibleElement>>options);
+				}
+
+				this.options?.forEach((el) => {
+					el.setAttribute('tabindex', '0');
+					this.ctx?.dom.removeAllFromTabSequence(el);
+				});
+			});
+		}
+
+		this.setAttribute('role', 'listbox');
+		this.setAttribute('tabindex', standAlone ? '0' : '-1');
+
+		this.async.on(this.el, 'keydown', this.onKeydown.bind(this));
+	}
+
+	/**
+	 * Sets or deletes the id of active descendant element
+	 */
+	protected setARIAActive(el: Element | null): void {
+		this.setAttribute('aria-activedescendant', el?.id ?? '');
+	}
+
+	/**
+	 * Changes focus from the current focused element to the passed one
+	 * @param el
+	 */
+	protected focusNext(el: AccessibleElement): void {
+		this.ctx?.dom.removeAllFromTabSequence(this.el);
+		this.ctx?.dom.restoreAllToTabSequence(el);
+
+		el.focus();
+	}
+
+	/**
+	 * Moves focus to the next or previous focusable element via the step parameter
+	 * @param step
+	 */
+	protected moveFocus(step: 1 | -1): void {
+		const
+			nextEl = this.ctx?.dom.getNextFocusableElement(step);
+
+		if (nextEl?.getAttribute('role') !== 'option') {
+			return;
+		}
+
+		this.focusNext(nextEl);
+		this.setARIAActive(nextEl);
+	}
+
+	/**
+	 * Handler: a keyboard event has occurred
+	 */
+	protected onKeydown(e: KeyboardEvent): void {
+		const
+			isHorizontal = this.params.orientation === 'horizontal';
+
+		switch (e.key) {
+			case KeyCodes.LEFT:
+				if (isHorizontal) {
+					this.moveFocus(-1);
+				}
+
+				return;
+
+			case KeyCodes.UP:
+				if (isHorizontal) {
+					return;
+				}
+
+				this.moveFocus(-1);
+				break;
+
+			case KeyCodes.RIGHT:
+				if (isHorizontal) {
+					this.moveFocus(1);
+					break;
+				}
+
+				return;
+
+			case KeyCodes.DOWN:
+				if (isHorizontal) {
+					return;
+				}
+
+				this.moveFocus(1);
+				break;
+
+			case KeyCodes.HOME:
+				this.options?.[0]?.focus();
+				break;
+
+			case KeyCodes.END:
+				this.options?.at(-1)?.focus();
+				break;
+
+			default:
+				return;
+		}
+
+		e.stopPropagation();
+		e.preventDefault();
+	}
+}
diff --git a/src/core/component/directives/aria/roles/listbox/interface.ts b/src/core/component/directives/aria/roles/listbox/interface.ts
new file mode 100644
index 0000000000..ae93cea58d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/listbox/interface.ts
@@ -0,0 +1,22 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { HandlerAttachment } from 'core/component/directives/aria/roles/interface';
+import type { Orientation } from 'core/component/directives/aria';
+
+export interface ListboxParams {
+	multiselectable?: boolean;
+	orientation?: Orientation;
+	label?: string;
+	labelledby?: string;
+}
+
+export class ListboxParams {
+	standAlone: boolean = true;
+	'@change'?: HandlerAttachment = () => undefined;
+}
diff --git a/src/core/component/directives/aria/roles/listbox/test/unit/listbox.ts b/src/core/component/directives/aria/roles/listbox/test/unit/listbox.ts
new file mode 100644
index 0000000000..0b17523edb
--- /dev/null
+++ b/src/core/component/directives/aria/roles/listbox/test/unit/listbox.ts
@@ -0,0 +1,246 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:listbox', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	const
+		selector = '[data-id="target"]';
+
+	test('role is set', async ({page}) => {
+		const target = await init(page);
+
+		await page.click(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const el = ctx.unsafe.block?.element('wrapper');
+
+				return el?.getAttribute('role');
+			})
+		).toBe('listbox');
+	});
+
+	test('tabindex is -1', async ({page}) => {
+		const target = await init(page, {}, 'b-select');
+
+		await page.click(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const el = ctx.unsafe.block?.element('dropdown');
+
+				return el?.getAttribute('tabindex');
+			})
+		).toBe('-1');
+	});
+
+	test.describe('stand alone listbox', () => {
+
+		test('tabindex is 0', async ({page}) => {
+			const target = await init(page, {standAlone: true, label: 'foo'});
+
+			await page.click(selector);
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const el = ctx.unsafe.block?.element('wrapper');
+
+					return el?.getAttribute('tabindex');
+				})
+			).toBe('0');
+		});
+
+		test('item is selected and unselected', async ({page}) => {
+			const target = await init(page, {standAlone: true, label: 'foo'});
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const list = <AccessibleElement>ctx.unsafe.block?.element('wrapper');
+
+					list.focus();
+					list.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
+
+					const el = ctx.unsafe.block?.element('wrapper');
+
+					return el?.getAttribute('aria-activedescendant');
+				})
+			).toBe('id1');
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const el = ctx.unsafe.block?.element('item');
+
+					document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: ' '}));
+
+					return el?.getAttribute('aria-selected');
+				})
+			).toBe('true');
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const el = ctx.unsafe.block?.element('item');
+
+					document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: ' '}));
+
+					return el?.getAttribute('aria-selected');
+				})
+			).toBe('false');
+		});
+
+		test('item is selected and unselected with multiple mod', async ({page}) => {
+			const target = await init(page, {standAlone: true, label: 'foo', multiple: true});
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const list = <AccessibleElement>ctx.unsafe.block?.element('wrapper');
+
+					list.focus();
+					list.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
+					document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: ' '}));
+
+					return document.activeElement?.getAttribute('aria-selected');
+				})
+			).toBe('true');
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const list = <AccessibleElement>ctx.unsafe.block?.element('wrapper');
+
+					return list.getAttribute('aria-activedescendant');
+				})
+			).toBe('id1');
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const list = <AccessibleElement>ctx.unsafe.block?.element('wrapper');
+					list.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
+
+					document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: ' '}));
+
+					return document.activeElement?.getAttribute('aria-selected');
+				})
+			).toBe('true');
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const list = <AccessibleElement>ctx.unsafe.block?.element('wrapper');
+
+					return list.getAttribute('aria-activedescendant');
+				})
+			).toBe('id2');
+
+			test.expect(
+				await target.evaluate(() => {
+					document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: ' '}));
+
+					return document.activeElement?.getAttribute('aria-selected');
+				})
+			).toBe('false');
+		});
+
+		test('keyboard support with the vertical orientation', async ({page}) => {
+			const target = await init(page, {standAlone: true, label: 'foo'});
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const
+						list = <AccessibleElement>ctx.unsafe.block?.element('wrapper'),
+						res: Array<CanUndef<string>> = [];
+
+					const dis = (key) => {
+						document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key, bubbles: true}));
+						res.push(document.activeElement?.id);
+					};
+
+					list.focus();
+					list.dispatchEvent(new KeyboardEvent('keydown', {key: 'End'}));
+
+					res.push(document.activeElement?.id);
+
+					dis('Home');
+
+					dis('ArrowDown');
+
+					dis('ArrowUp');
+
+					dis('ArrowLeft');
+
+					dis('ArrowRight');
+
+					return res;
+				})
+			).toEqual(['id3', 'id1', 'id2', 'id1', 'id1', 'id1']);
+		});
+
+		test('keyboard support with the horizontal orientation', async ({page}) => {
+			const target = await init(page, {standAlone: true, label: 'foo', orientation: 'horizontal'});
+
+			test.expect(
+				await target.evaluate((ctx) => {
+					const
+						list = <AccessibleElement>ctx.unsafe.block?.element('wrapper'),
+						res: Array<CanUndef<string>> = [];
+
+					const dis = (key) => {
+						document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key, bubbles: true}));
+						res.push(document.activeElement?.id);
+					};
+
+					list.focus();
+					list.dispatchEvent(new KeyboardEvent('keydown', {key: 'End'}));
+
+					res.push(document.activeElement?.id);
+
+					dis('Home');
+
+					dis('ArrowRight');
+
+					dis('ArrowLeft');
+
+					dis('ArrowDown');
+
+					dis('ArrowUp');
+
+					return res;
+				})
+			).toEqual(['id3', 'id1', 'id2', 'id1', 'id1', 'id1']);
+		});
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 * @param component
+	 */
+	async function init(
+		page: Page,
+		attrs: Dictionary = {},
+		component: string = 'b-dummy-listbox'
+	): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, component, {
+			attrs: {
+				'data-id': 'target',
+				items: [
+					{value: 1, label: 'item1', id: 'id1'},
+					{value: 2, label: 'item2', id: 'id2'},
+					{value: 3, label: 'item3', id: 'id3'}
+				],
+				...attrs
+			}
+		});
+	}
+});
diff --git a/src/core/component/directives/aria/roles/option/CHANGELOG.md b/src/core/component/directives/aria/roles/option/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/option/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/option/README.md b/src/core/component/directives/aria/roles/option/README.md
new file mode 100644
index 0000000000..66d3f7a53f
--- /dev/null
+++ b/src/core/component/directives/aria/roles/option/README.md
@@ -0,0 +1,29 @@
+# core/component/directives/aria/roles/option
+
+This module provides an engine for `v-aria` directive.
+
+The engine to set `option` role attribute.
+The option role is used for selectable items in a `listbox`.
+
+For more information go to [option](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role`).
+
+## API
+
+The role introduces several additional settings.
+
+### [selected = `false`]
+
+Whether the option is selected.
+
+### [@change]
+
+A handler for changing the active option.
+
+## Usage
+
+```
+< div v-aria:option = { &
+    selected: el.active
+    '@change': (cb) => on('actionChange', () => cb(el.active))
+  }
+```
diff --git a/src/core/component/directives/aria/roles/option/index.ts b/src/core/component/directives/aria/roles/option/index.ts
new file mode 100644
index 0000000000..8efe6ccb96
--- /dev/null
+++ b/src/core/component/directives/aria/roles/option/index.ts
@@ -0,0 +1,31 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import { OptionParams } from 'core/component/directives/aria/roles/option/interface';
+import { ARIARole } from 'core/component/directives/aria/roles/interface';
+
+export class Option extends ARIARole {
+	override Params: OptionParams = new OptionParams();
+
+	/** @inheritDoc */
+	init(): void {
+		this.setAttribute('role', 'option');
+
+		if (this.el.getAttribute('id') == null) {
+			throw new TypeError('The `option` role requires the element to have an `id` attribute');
+		}
+	}
+
+	/**
+	 * Handler: selected option changes
+	 * @param isSelected
+	 */
+	protected onChange(isSelected: boolean): void {
+		this.setAttribute('aria-selected', String(isSelected));
+	}
+}
diff --git a/src/core/component/directives/aria/roles/option/interface.ts b/src/core/component/directives/aria/roles/option/interface.ts
new file mode 100644
index 0000000000..8ba454895c
--- /dev/null
+++ b/src/core/component/directives/aria/roles/option/interface.ts
@@ -0,0 +1,17 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { HandlerAttachment } from 'core/component/directives/aria/roles/interface';
+
+export interface OptionParams {
+	selected: boolean;
+}
+
+export class OptionParams {
+	'@change': HandlerAttachment = () => undefined;
+}
diff --git a/src/core/component/directives/aria/roles/option/test/unit/option.ts b/src/core/component/directives/aria/roles/option/test/unit/option.ts
new file mode 100644
index 0000000000..f4b912d6d0
--- /dev/null
+++ b/src/core/component/directives/aria/roles/option/test/unit/option.ts
@@ -0,0 +1,116 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:option', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	const
+		selector = '[data-id="target"]';
+
+	test('role is set', async ({page}) => {
+		const target = await init(page);
+
+		await page.click(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('item'));
+
+				return [el1.getAttribute('role'), el2.getAttribute('role')];
+			})
+		).toEqual(['option', 'option']);
+	});
+
+	test('has no preselected value', async ({page}) => {
+		const target = await init(page);
+
+		await page.click(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('item'));
+
+				return [el1.getAttribute('aria-selected'), el2.getAttribute('aria-selected')];
+			})
+		).toEqual(['false', 'false']);
+	});
+
+	test('options with preselected value', async ({page}) => {
+		const target = await init(page, {value: 0});
+
+		await page.click(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('item'));
+
+				return [el1.getAttribute('aria-selected'), el2.getAttribute('aria-selected')];
+			})
+		).toEqual(['true', 'false']);
+	});
+
+	test('selected option changed', async ({page}) => {
+		const target = await init(page, {value: 0});
+
+		await page.click(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const input = ctx.unsafe.block.element('input');
+				const [el1, el2]: HTMLElement[] = Array.from(ctx.unsafe.block.elements('item'));
+
+				input?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true}));
+
+				input?.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', bubbles: true}));
+
+				return [el1.getAttribute('aria-selected'), el2.getAttribute('aria-selected')];
+			})
+		).toEqual(['false', 'true']);
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-select', {
+			attrs: {
+				'data-id': 'target',
+				items: [
+					{label: 'foo', value: 0, attrs: {id: 'item1'}},
+					{label: 'bar', value: 1, attrs: {id: 'item2'}}
+				],
+				...attrs
+			}
+		});
+	}
+});
diff --git a/src/core/component/directives/aria/roles/tab/CHANGELOG.md b/src/core/component/directives/aria/roles/tab/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tab/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/tab/README.md b/src/core/component/directives/aria/roles/tab/README.md
new file mode 100644
index 0000000000..6cd9e8c72f
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tab/README.md
@@ -0,0 +1,55 @@
+# core/component/directives/aria/roles/tab
+
+This module provides an implementation of the ARIA [tab](https://www.w3.org/TR/wai-aria/#tab) role.
+An element with this role should be used in conjunction with elements with the roles [tablist](https://www.w3.org/TR/wai-aria/#tablist) and [tabpanel](https://www.w3 .org/TR /wai-aria/#tabpanel).
+The role expects the component within which the directive is used to implement the [[iAccess]] characteristic.
+
+For more information see [this](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role`).
+
+```
+< div v-aria:tablist
+  < template v-for = (tab, i) of tabs
+    < div :id = 'tab-' + i | v-aria:tab = { &
+      controls: 'content-' + i,
+
+      first: i === 0,
+      selected: tab.active,
+      hasDefaultSelectedTabs: tab.some((tab) => Boolean(tab.active)),
+
+      '@change': (cb) => cb(tab.active)
+    } .
+
+< template v-for = (content, i) of tabsContent
+  < div :id = 'content-' + i | v-aria:tabpanel = {labelledby: 'tab-' + i}
+    {{ content }}
+```
+
+## Available options
+
+Any ARIA attributes could be added in options through the short syntax.
+
+```
+< div v-aria = {label: 'foo', desribedby: 'id1', details: 'id2'}
+
+/// The same as
+
+< div :aria-label = 'foo' | :aria-desribedby = 'id1' | :aria-details = 'id2'
+```
+
+Also, the role introduces several additional settings.
+
+### [first = `false`]
+
+Whether the tab is the first in the tablist.
+
+### [selected = `false`]
+
+Whether the tab is selected.
+
+### [hasDefaultSelectedTabs = `false`]
+
+Whether there is at least one selected tab by default.
+
+### [@change]
+
+A handler for changing the active tab.
diff --git a/src/core/component/directives/aria/roles/tab/index.ts b/src/core/component/directives/aria/roles/tab/index.ts
new file mode 100644
index 0000000000..8af9e3ae99
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tab/index.ts
@@ -0,0 +1,183 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ *
+ * This software or document includes material copied from or derived from ["Example of Tabs with Manual Activation", https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html].
+ * Copyright © [2022] W3C® (MIT, ERCIM, Keio, Beihang).
+ */
+
+/**
+ * [[include:core/component/directives/aria/roles/tab/README.md]]
+ * @packageDocumentation
+ */
+
+import type iBlock from 'super/i-block/i-block';
+import iAccess from 'traits/i-access/i-access';
+
+import { TabParams } from 'core/component/directives/aria/roles/tab/interface';
+import { ARIARole, KeyCodes } from 'core/component/directives/aria/roles/interface';
+
+export * from 'core/component/directives/aria/roles/tab/interface';
+
+export class Tab extends ARIARole {
+	override Params: TabParams = new TabParams();
+	override Ctx!: iBlock['unsafe'];
+
+	/** @inheritDoc */
+	init(): void {
+		if (!iAccess.is(this.ctx)) {
+			throw new TypeError('The `tab` role requires that a component in whose context the directive is used implement the `iAccess` interface');
+		}
+
+		const {
+			el,
+			params: {
+				first,
+				hasDefaultSelectedTabs
+			}
+		} = this;
+
+		this.setAttribute('role', 'tab');
+
+		if (first && !hasDefaultSelectedTabs) {
+			if (el.tabIndex < 0) {
+				this.setAttribute('tabindex', '0');
+			}
+
+		} else if (hasDefaultSelectedTabs && this.params.selected) {
+			if (el.tabIndex < 0) {
+				this.setAttribute('tabindex', '0');
+			}
+
+		} else {
+			this.setAttribute('tabindex', '-1');
+		}
+
+		this.async.on(el, 'keydown', this.onKeydown.bind(this));
+	}
+
+	/**
+	 * The tab list element
+	 */
+	protected get tablist(): Element | null {
+		return this.el.closest('[role="tablist"]');
+	}
+
+	/**
+	 * Moves focus to the first tab in the tablist
+	 */
+	protected moveFocusToFirstTab(): void {
+		const firstTab = this.ctx?.dom.findFocusableElement();
+		firstTab?.focus();
+	}
+
+	/**
+	 * Moves focus to the last tab in the tablist
+	 */
+	protected moveFocusToLastTab(): void {
+		const
+			tabs = this.ctx?.dom.findFocusableElements();
+
+		if (tabs == null) {
+			return;
+		}
+
+		let
+			lastTab: CanUndef<AccessibleElement>;
+
+		for (const tab of tabs) {
+			lastTab = tab;
+		}
+
+		lastTab?.focus();
+	}
+
+	/**
+	 * Moves focus to the next or previous focusable element, according to the step parameter
+	 * @param step
+	 */
+	protected moveFocus(step: 1 | -1): void {
+		const focusable = this.ctx?.dom.getNextFocusableElement(step);
+		focusable?.focus();
+	}
+
+	/**
+	 * Handler: the active tab has been changed
+	 * @param active
+	 */
+	protected onChange(active: Element | NodeListOf<Element>): void {
+		const setAttributes = (selected: boolean) => {
+			this.setAttribute('aria-selected', String(selected));
+			this.setAttribute('tabindex', selected ? '0' : '-1');
+		};
+
+		if (Object.isArrayLike(active)) {
+			for (let i = 0; i < active.length; i++) {
+				setAttributes(this.el === active[i]);
+			}
+
+			return;
+		}
+
+		setAttributes(this.el === active);
+	}
+
+	/**
+	 * Handler: a keyboard event has occurred
+	 */
+	protected onKeydown(e: KeyboardEvent): void {
+		const
+			isVertical = this.tablist?.getAttribute('aria-orientation') === 'vertical';
+
+		switch (e.key) {
+			case KeyCodes.LEFT:
+				if (isVertical) {
+					return;
+				}
+
+				this.moveFocus(-1);
+				break;
+
+			case KeyCodes.UP:
+				if (isVertical) {
+					this.moveFocus(-1);
+					break;
+				}
+
+				return;
+
+			case KeyCodes.RIGHT:
+				if (isVertical) {
+					return;
+				}
+
+				this.moveFocus(1);
+				break;
+
+			case KeyCodes.DOWN:
+				if (isVertical) {
+					this.moveFocus(1);
+					break;
+				}
+
+				return;
+
+			case KeyCodes.HOME:
+				this.moveFocusToFirstTab();
+				break;
+
+			case KeyCodes.END:
+				this.moveFocusToLastTab();
+				break;
+
+			default:
+				return;
+		}
+
+		e.stopPropagation();
+		e.preventDefault();
+	}
+}
diff --git a/src/core/component/directives/aria/roles/tab/interface.ts b/src/core/component/directives/aria/roles/tab/interface.ts
new file mode 100644
index 0000000000..d494f50f65
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tab/interface.ts
@@ -0,0 +1,21 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { HandlerAttachment } from 'core/component/directives/aria/roles/interface';
+import type { Orientation } from 'core/component/directives/aria';
+
+export interface TabParams {
+	selected: boolean;
+	orientation: Orientation;
+}
+
+export class TabParams {
+	first: boolean = false;
+	hasDefaultSelectedTabs: boolean = false;
+	'@change': HandlerAttachment = () => undefined;
+}
diff --git a/src/core/component/directives/aria/roles/tab/test/unit/tab.ts b/src/core/component/directives/aria/roles/tab/test/unit/tab.ts
new file mode 100644
index 0000000000..3a3d0698cf
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tab/test/unit/tab.ts
@@ -0,0 +1,247 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:tab', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	const
+		selector = '[data-id="target"]';
+
+	test('list items must have the `role` attributes', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const tabs = ctx.unsafe.block.elements('link');
+
+				const res: Array<Nullable<string>> = [];
+
+				tabs.forEach((el) => res.push(el.getAttribute('role')));
+
+				return res;
+			})
+		).toEqual(['tab', 'tab', 'tab']);
+	});
+
+	test('list items must have the `aria-controls` attributes', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const tabs = ctx.unsafe.block.elements('link');
+
+				const res: Array<Nullable<string>> = [];
+
+				tabs.forEach((el) => res.push(el.getAttribute('aria-controls')));
+
+				return res;
+			})
+		).toEqual(['id4', 'id5', 'id6']);
+	});
+
+	test('the active element must have the `aria-selected` attribute', async ({page}) => {
+		const target = await init(page, {active: 1});
+
+		await page.focus(selector);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const tabs = ctx.unsafe.block.elements('link');
+
+				const res: Array<Nullable<string>> = [];
+
+				tabs.forEach((el) => res.push(el.getAttribute('aria-selected')));
+
+				return res;
+			})
+		).toEqual(['false', 'true', 'false']);
+	});
+
+	test('if there is no active element, then all elements except the first must have the `tabindex` attribute equal to `-1`', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const tabs: NodeListOf<HTMLElement> = ctx.unsafe.block.elements('link');
+
+				const res: number[] = [];
+
+				tabs.forEach((el) => res.push(el.tabIndex));
+
+				return res;
+			})
+		).toEqual([0, -1, -1]);
+	});
+
+	test('all elements except the active must have the `tabindex` attribute equal to `-1`', async ({page}) => {
+		const target = await init(page, {active: 1});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const tabs: NodeListOf<HTMLElement> = ctx.unsafe.block.elements('link');
+
+				const res: number[] = [];
+
+				tabs.forEach((el) => res.push(el.tabIndex));
+
+				return res;
+			})
+		).toEqual([-1, 0, -1]);
+	});
+
+	test('changing the active element', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				let tabs: NodeListOf<HTMLElement> = ctx.unsafe.block.elements('link');
+
+				tabs[1].click();
+
+				const res: Array<[number, Nullable<string>]> = [];
+
+				tabs = ctx.unsafe.block.elements('link');
+
+				tabs.forEach((el, i) => res[i] = [el.tabIndex, el.ariaSelected]);
+
+				return res;
+			})
+		).toEqual([
+			[-1, 'false'],
+			[0, 'true'],
+			[-1, 'false']
+		]);
+	});
+
+	test('keyboard support with the horizontal orientation', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const
+					res: Array<CanUndef<string>> = [],
+					tab: CanUndef<HTMLElement> = ctx.unsafe.block.element('link');
+
+				tab?.focus();
+				tab?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowLeft'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowUp'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'End'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'Home'}));
+				res.push(document.activeElement?.id);
+
+				return res;
+			})
+		).toEqual(['id2', 'id1', 'id1', 'id1', 'id3', 'id1']);
+	});
+
+	test('keyboard support with the vertical orientation', async ({page}) => {
+		const target = await init(page, {orientation: 'vertical'});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const
+					res: Array<CanUndef<string>> = [],
+					tab: CanUndef<HTMLElement> = ctx.unsafe.block.element('link');
+
+				tab?.focus();
+				tab?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowLeft'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowUp'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'End'}));
+				res.push(document.activeElement?.id);
+
+				document.activeElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'Home'}));
+				res.push(document.activeElement?.id);
+
+				return res;
+			})
+		).toEqual(['id1', 'id1', 'id2', 'id1', 'id3', 'id1']);
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-list', {
+			attrs: {
+				'data-id': 'target',
+
+				items: [
+					{id: 'id1', label: 'Male', value: 0, controls: 'id4'},
+					{id: 'id2', label: 'Female', value: 1, controls: 'id5'},
+					{id: 'id3', label: 'Other', value: 2, controls: 'id6'}
+				],
+
+				...attrs
+			}
+		});
+	}
+});
+
diff --git a/src/core/component/directives/aria/roles/tablist/CHANGELOG.md b/src/core/component/directives/aria/roles/tablist/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tablist/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/tablist/README.md b/src/core/component/directives/aria/roles/tablist/README.md
new file mode 100644
index 0000000000..d5ff567281
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tablist/README.md
@@ -0,0 +1,46 @@
+# core/component/directives/aria/roles/tablist
+
+This module provides an implementation of the ARIA [tablist](https://www.w3.org/TR/wai-aria/#tablist) role.
+An element with this role should be used in conjunction with elements with the roles [tabpanel](https://www.w3.org/TR/wai-aria/#tabpanel) and [tab](https://www.w3.org/TR/wai-aria/#tab).
+
+For more information see [this](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role`).
+
+```
+< div v-aria:tablist
+  < template v-for = (tab, i) of tabs
+    < div :id = 'tab-' + i | v-aria:tab = { &
+      controls: 'content-' + i,
+
+      first: i === 0,
+      selected: tab.active,
+      hasDefaultSelectedTabs: tab.some((tab) => Boolean(tab.active)),
+
+      '@change': (cb) => cb(tab.active)
+    } .
+
+< template v-for = (content, i) of tabsContent
+  < div :id = 'content-' + i | v-aria:tabpanel = {labelledby: 'tab-' + i}
+    {{ content }}
+```
+
+## Available options
+
+Any ARIA attributes could be added in options through the short syntax.
+
+```
+< div v-aria = {label: 'foo', desribedby: 'id1', details: 'id2'}
+
+/// The same as
+
+< div :aria-label = 'foo' | :aria-desribedby = 'id1' | :aria-details = 'id2'
+```
+
+Also, the role introduces several additional settings.
+
+### [multiselectable = `false`]
+
+Indicates that the user may select more than one item from the current selectable descendants.
+
+### [orientation = `'horizontal'`]
+
+Indicates whether the element orientation is `horizontal`, `vertical`, or unknown/ambiguous.
diff --git a/src/core/component/directives/aria/roles/tablist/index.ts b/src/core/component/directives/aria/roles/tablist/index.ts
new file mode 100644
index 0000000000..89c28955e8
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tablist/index.ts
@@ -0,0 +1,26 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * [[include:core/component/directives/aria/roles/tablist/README.md]]
+ * @packageDocumentation
+ */
+
+import { ARIARole } from 'core/component/directives/aria/roles/interface';
+import type { TablistParams } from 'core/component/directives/aria/roles/tablist/interface';
+
+export * from 'core/component/directives/aria/roles/tablist/interface';
+
+export class Tablist extends ARIARole {
+	override Params!: TablistParams ;
+
+	/** @inheritDoc */
+	init(): void {
+		this.setAttribute('role', 'tablist');
+	}
+}
diff --git a/src/core/component/directives/aria/roles/tablist/interface.ts b/src/core/component/directives/aria/roles/tablist/interface.ts
new file mode 100644
index 0000000000..7259d16cd9
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tablist/interface.ts
@@ -0,0 +1,12 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+export interface TablistParams {
+	multiselectable: boolean;
+	orientation: string;
+}
diff --git a/src/core/component/directives/aria/roles/tablist/test/unit/tablist.ts b/src/core/component/directives/aria/roles/tablist/test/unit/tablist.ts
new file mode 100644
index 0000000000..0de5ef8459
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tablist/test/unit/tablist.ts
@@ -0,0 +1,69 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:tablist', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('tablist must have the `role` attribute', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const el = ctx.unsafe.block?.element('wrapper');
+
+				return el?.getAttribute('role');
+			})
+		).toBe('tablist');
+	});
+
+	test('when passing the `multiselectable` parameter, a special attribute must be set', async ({page}) => {
+		const target = await init(page, {multiple: true});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const el = ctx.unsafe.block?.element('wrapper');
+				return el?.getAttribute('aria-multiselectable');
+			})
+		).toBe('true');
+	});
+
+	test('when passing the `orientation` parameter, a special attribute must be set', async ({page}) => {
+		const target = await init(page, {orientation: 'vertical'});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const el = ctx.unsafe.block?.element('wrapper');
+				return el?.getAttribute('aria-orientation');
+			})
+		).toBe('vertical');
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-list', {
+			attrs: {
+				items: [
+					{label: 'foo', value: 0},
+					{label: 'bar', value: 1}
+				],
+				...attrs
+			}
+		});
+	}
+});
diff --git a/src/core/component/directives/aria/roles/tabpanel/CHANGELOG.md b/src/core/component/directives/aria/roles/tabpanel/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tabpanel/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/tabpanel/README.md b/src/core/component/directives/aria/roles/tabpanel/README.md
new file mode 100644
index 0000000000..cf39f626e1
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tabpanel/README.md
@@ -0,0 +1,46 @@
+# core/component/directives/aria/roles/tabpanel
+
+This module provides an implementation of the ARIA [tabpanel](https://www.w3.org/TR/wai-aria/#tabpanel) role.
+An element with this role should be used in conjunction with elements with the roles [tablist](https://www.w3.org/TR/wai-aria/#tablist) and [tab](https://www.w3.org/TR/wai-aria/#tab).
+
+For more information see [this](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role`).
+
+```
+< div v-aria:tablist
+  < template v-for = (tab, i) of tabs
+    < div :id = 'tab-' + i | v-aria:tab = { &
+      controls: 'content-' + i,
+
+      first: i === 0,
+      selected: tab.active,
+      hasDefaultSelectedTabs: tab.some((tab) => Boolean(tab.active)),
+
+      '@change': (cb) => cb(tab.active)
+    } .
+
+< template v-for = (content, i) of tabsContent
+  < div :id = 'content-' + i | v-aria:tabpanel = {labelledby: 'tab-' + i}
+    {{ content }}
+```
+
+## Available options
+
+Any ARIA attributes could be added in options through the short syntax.
+
+```
+< div v-aria = {label: 'foo', desribedby: 'id1', details: 'id2'}
+
+/// The same as
+
+< div :aria-label = 'foo' | :aria-desribedby = 'id1' | :aria-details = 'id2'
+```
+
+Also, the role introduces several additional settings.
+
+### [label]
+
+A string value that labels the element it is applied to.
+
+### [labelledby]
+
+An element (or elements) that labels the element it is applied to.
diff --git a/src/core/component/directives/aria/roles/tabpanel/index.ts b/src/core/component/directives/aria/roles/tabpanel/index.ts
new file mode 100644
index 0000000000..61c1f9551f
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tabpanel/index.ts
@@ -0,0 +1,31 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * [[include:core/component/directives/aria/roles/tabpanel/README.md]]
+ * @packageDocumentation
+ */
+
+import { ARIARole } from 'core/component/directives/aria/roles/interface';
+import type { TabpanelParams } from 'core/component/directives/aria/roles/tabpanel/interface';
+
+export class Tabpanel extends ARIARole {
+	override Params!: TabpanelParams;
+
+	/** @inheritDoc */
+	init(): void {
+		const
+			{label, labelledby} = this.params;
+
+		if (label == null && labelledby == null) {
+			throw new TypeError('The `tabpanel` role expects a `label` or `labelledby` value to be passed');
+		}
+
+		this.setAttribute('role', 'tabpanel');
+	}
+}
diff --git a/src/core/component/directives/aria/roles/tabpanel/interface.ts b/src/core/component/directives/aria/roles/tabpanel/interface.ts
new file mode 100644
index 0000000000..c8b51237d8
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tabpanel/interface.ts
@@ -0,0 +1,12 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+export interface TabpanelParams {
+	label?: string;
+	labelledby?: string;
+}
diff --git a/src/core/component/directives/aria/roles/tabpanel/test/unit/tabpanel.ts b/src/core/component/directives/aria/roles/tabpanel/test/unit/tabpanel.ts
new file mode 100644
index 0000000000..134b5ae3fb
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tabpanel/test/unit/tabpanel.ts
@@ -0,0 +1,49 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:tabpanel', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('tabpanel must have the `role` attribute', async ({page}) => {
+		const target = await init(page, {label: 'foo'});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('role'))
+		).toBe('tabpanel');
+	});
+
+	test('tabpanel must have the `label` or `labelledby` params to be passed', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('role'))
+		).toBe(null);
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-dummy', {
+			attrs: {
+				'v-aria:tabpanel': {
+					...attrs
+				}
+			}
+		});
+	}
+});
diff --git a/src/core/component/directives/aria/roles/tree/CHANGELOG.md b/src/core/component/directives/aria/roles/tree/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tree/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/tree/README.md b/src/core/component/directives/aria/roles/tree/README.md
new file mode 100644
index 0000000000..a6efa75bc9
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tree/README.md
@@ -0,0 +1,38 @@
+# core/component/directives/aria/roles/tree
+
+This module provides an engine for `v-aria` directive.
+
+The engine to set `tree` role attribute.
+A `tree` is a widget that allows the user to select one or more items from a hierarchically organized collection.
+
+For more information go to [tree](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role`).
+For recommendations how to make accessible widget go to [tree](`https://www.w3.org/WAI/ARIA/apg/patterns/treeview/`).
+
+## API
+
+The role introduces several additional settings.
+
+### [root = `false`]
+
+Whether the current tree is the root tree
+
+### [orientation]
+
+Whether the widget orientation is `horizontal` or `vertical`.
+
+### [@change]
+
+A handler for expanding the tree item.
+
+The role expects the component to realize`iAccess` trait.
+
+## Usage
+
+```
+< div v-aria:tree = { &
+    isRoot: boolean = false;
+    orientation: string = 'false';
+    '@change': HandlerAttachment = () => undefined;
+  }
+.
+```
diff --git a/src/core/component/directives/aria/roles/tree/index.ts b/src/core/component/directives/aria/roles/tree/index.ts
new file mode 100644
index 0000000000..c43f440008
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tree/index.ts
@@ -0,0 +1,42 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import { TreeParams } from 'core/component/directives/aria/roles/tree/interface';
+import { ARIARole } from 'core/component/directives/aria/roles/interface';
+
+export class Tree extends ARIARole {
+	override Params: TreeParams = new TreeParams();
+
+	/** @inheritDoc */
+	init(): void {
+		const
+			{orientation, root} = this.params;
+
+		this.setRootRole();
+
+		if (root) {
+			this.setAttribute('aria-orientation', orientation);
+		}
+	}
+
+	/**
+	 * Sets the role to the element depending on whether the tree is root or nested
+	 */
+	protected setRootRole(): void {
+		this.setAttribute('role', this.params.root ? 'tree' : 'group');
+	}
+
+	/**
+	 * Handler: treeitem was expanded or closed
+	 * @param el
+	 * @param isExpanded
+	 */
+	protected onChange(el: Element, isExpanded: boolean): void {
+		this.setAttribute('aria-expanded', String(isExpanded), el);
+	}
+}
diff --git a/src/core/component/directives/aria/roles/tree/interface.ts b/src/core/component/directives/aria/roles/tree/interface.ts
new file mode 100644
index 0000000000..c2a7958c23
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tree/interface.ts
@@ -0,0 +1,16 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { HandlerAttachment } from 'core/component/directives/aria/roles/interface';
+import type { Orientation } from 'core/component/directives/aria';
+
+export class TreeParams {
+	root: boolean = false;
+	orientation: Orientation = 'vertical';
+	'@change': HandlerAttachment = () => undefined;
+}
diff --git a/src/core/component/directives/aria/roles/tree/test/unit/tree.ts b/src/core/component/directives/aria/roles/tree/test/unit/tree.ts
new file mode 100644
index 0000000000..e040da54ed
--- /dev/null
+++ b/src/core/component/directives/aria/roles/tree/test/unit/tree.ts
@@ -0,0 +1,102 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:option', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('role is set', async ({page}) => {
+		const target = await init(page);
+
+		await page.waitForSelector('[role="group"]');
+
+		test.expect(
+			await target.evaluate(() => {
+				const
+					roots = document.querySelectorAll('[role="tree"]'),
+					groups = document.querySelectorAll('[role="group"]');
+
+				return [roots.length, groups.length];
+			})
+		).toEqual([1, 2]);
+	});
+
+	test('orientation is set', async ({page}) => {
+		const target = await init(page, {orientation: 'horizontal'});
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const el = ctx.unsafe.block?.element('root');
+
+				return el?.getAttribute('aria-orientation');
+			})
+		).toBe('horizontal');
+	});
+
+	test('treeitem is expanded', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const
+					fold: CanUndef<HTMLElement> = ctx.unsafe.block?.element('fold'),
+					items = ctx.unsafe.block?.elements('node'),
+					expandableItem = items?.[1];
+
+				const
+					res: Array<CanUndef<Nullable<string>>> = [];
+
+				fold?.click();
+				res.push(expandableItem?.getAttribute('aria-expanded'));
+
+				fold?.click();
+				res.push(expandableItem?.getAttribute('aria-expanded'));
+
+				return res;
+			})
+		).toEqual(['true', 'false']);
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-tree', {
+			attrs: {
+				item: 'b-checkbox',
+				items: [
+					{id: 'bar', label: 'bar', attrs: {id: 'bar'}},
+					{
+						id: 'foo',
+						label: 'foo',
+						children: [
+							{id: 'fooone', label: 'foo1'},
+							{id: 'footwo', label: 'foo2'},
+							{
+								id: 'foothree',
+								label: 'foo3',
+								children: [{id: 'foothreeone', label: 'foo4'}]
+							},
+							{id: 'foosix', label: 'foo5'}
+						]
+					}
+				],
+				...attrs
+			}
+		});
+	}
+});
+
diff --git a/src/core/component/directives/aria/roles/treeitem/CHANGELOG.md b/src/core/component/directives/aria/roles/treeitem/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/aria/roles/treeitem/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/aria/roles/treeitem/README.md b/src/core/component/directives/aria/roles/treeitem/README.md
new file mode 100644
index 0000000000..9b248467cc
--- /dev/null
+++ b/src/core/component/directives/aria/roles/treeitem/README.md
@@ -0,0 +1,53 @@
+# core/component/directives/aria/roles/treeitem
+
+This module provides an engine for `v-aria` directive.
+
+The engine to set `treeitem` role attribute.
+A `treeitem` is an item in a `tree`.
+
+For more information go to [treeitem](`https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treeitem_role`).
+For recommendations how to make accessible widget go to [treeitem](`https://www.w3.org/WAI/ARIA/apg/patterns/treeview/`).
+
+## API
+
+The role introduces several additional settings.
+
+### [firstRootItem = `false`]
+
+Whether the tree item is the first one in the root tree.
+
+### [expandable = `false`]
+
+Whether the tree item has children.
+
+### [expanded = `false`]
+
+Whether the tree item is expanded.
+
+### [orientation]
+
+Whether the widget orientation is `horizontal` or `vertical`.
+
+### [rootElement]
+
+the link to the root tree element.
+
+### [toggleFold]
+
+The function to toggle the expandable item.
+
+The engine expects the component to realize`iAccess` trait.
+
+## Usage
+
+```
+< div v-aria:treeitem = { &
+    isFirstRootItem: el === top;
+    isExpandable: el.children != null;
+    isExpanded: !el.folded;
+    orientation: 'orientation';
+    rootElement?: top;
+    toggleFold: () => ...;
+  }
+.
+```
diff --git a/src/core/component/directives/aria/roles/treeitem/index.ts b/src/core/component/directives/aria/roles/treeitem/index.ts
new file mode 100644
index 0000000000..e6cbfb0bdd
--- /dev/null
+++ b/src/core/component/directives/aria/roles/treeitem/index.ts
@@ -0,0 +1,239 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ *
+ * This software or document includes material copied from or derived from ["Example of Tabs with Manual Activation", https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html].
+ * Copyright © [2022] W3C® (MIT, ERCIM, Keio, Beihang).
+ */
+
+import type iBlock from 'super/i-block/i-block';
+
+import { TreeitemParams } from 'core/component/directives/aria/roles/treeitem/interface';
+import { ARIARole, KeyCodes } from 'core/component/directives/aria/roles/interface';
+
+export class Treeitem extends ARIARole {
+	override Params: TreeitemParams = new TreeitemParams();
+	override Ctx!: iBlock['unsafe'];
+
+	/** @inheritDoc */
+	init(): void {
+		this.async.on(this.el, 'keydown', this.onKeyDown.bind(this));
+
+		const
+			muted = this.ctx?.dom.removeAllFromTabSequence(this.el),
+			{firstRootItem, expandable, expanded} = this.params;
+
+		if (firstRootItem) {
+			if (muted) {
+				this.ctx?.dom.restoreAllToTabSequence(this.el);
+
+			} else {
+				this.setAttribute('tabindex', '0');
+			}
+		}
+
+		this.setAttribute('role', 'treeitem');
+
+		this.ctx?.$nextTick(() => {
+			if (expandable) {
+				this.setAttribute('aria-expanded', String(expanded));
+			}
+		});
+	}
+
+	/**
+	 * The root tree element
+	 */
+	protected get root(): Nullable<Element> {
+		return this.params.rootElement?.querySelector('[role="tree"]');
+	}
+
+	/**
+	 * Changes focus from the current focused element to the passed one
+	 * @param el
+	 */
+	protected focusNext(el: AccessibleElement): void {
+		this.ctx?.dom.removeAllFromTabSequence(this.el);
+		this.ctx?.dom.restoreAllToTabSequence(el);
+
+		el.focus();
+	}
+
+	/**
+	 * Moves focus to the next or previous focusable element via the step parameter
+	 * @param step
+	 */
+	protected moveFocus(step: 1 | -1): void {
+		const
+			nextEl = this.ctx?.dom.getNextFocusableElement(step);
+
+		if (nextEl != null) {
+			this.focusNext(nextEl);
+		}
+	}
+
+	/**
+	 * Expands the treeitem
+	 */
+	protected openFold(): void {
+		this.params.toggleFold(this.el, false);
+	}
+
+	/**
+	 * Closes the treeitem
+	 */
+	protected closeFold(): void {
+		this.params.toggleFold(this.el, true);
+	}
+
+	/**
+	 * Moves focus to the parent treeitem
+	 */
+	protected focusParent(): void {
+		const
+			parent = this.el.parentElement?.closest('[role="treeitem"]');
+
+		if (parent == null) {
+			return;
+		}
+
+		const
+			focusableParent = this.ctx?.dom.findFocusableElement(parent);
+
+		if (focusableParent != null) {
+			this.focusNext(focusableParent);
+		}
+	}
+
+	/**
+	 * Moves focus to the first visible treeitem
+	 */
+	protected setFocusToFirstItem(): void {
+		const
+			firstItem = this.ctx?.dom.findFocusableElement(this.params.rootElement);
+
+		if (firstItem != null) {
+			this.focusNext(firstItem);
+		}
+	}
+
+	/**
+	 * Moves focus to the last visible treeitem
+	 */
+	protected setFocusToLastItem(): void {
+		const
+			items = this.ctx?.dom.findFocusableElements(this.params.rootElement);
+
+		if (items == null) {
+			return;
+		}
+
+		let
+			lastItem: CanUndef<AccessibleElement>;
+
+		for (const item of items) {
+			lastItem = item;
+		}
+
+		if (lastItem != null) {
+			this.focusNext(lastItem);
+		}
+	}
+
+	/**
+	 * Handler: keyboard event
+	 */
+	protected onKeyDown(e: KeyboardEvent): void {
+		if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+			return;
+		}
+
+		const
+			{expandable, expanded, toggleFold} = this.params;
+
+		const
+			isHorizontal = this.root?.getAttribute('aria-orientation') === 'horizontal';
+
+		const open = () => {
+			if (expandable) {
+				if (expanded) {
+					this.moveFocus(1);
+
+				} else {
+					this.openFold();
+				}
+			}
+		};
+
+		const close = () => {
+			if (expandable && expanded) {
+				this.closeFold();
+
+			} else {
+				this.focusParent();
+			}
+		};
+
+		switch (e.key) {
+			case KeyCodes.UP:
+				if (isHorizontal) {
+					close();
+					break;
+				}
+
+				this.moveFocus(-1);
+				break;
+
+			case KeyCodes.DOWN:
+				if (isHorizontal) {
+					open();
+					break;
+				}
+
+				this.moveFocus(1);
+				break;
+
+			case KeyCodes.RIGHT:
+				if (isHorizontal) {
+					this.moveFocus(1);
+					break;
+				}
+
+				open();
+				break;
+
+			case KeyCodes.LEFT:
+				if (isHorizontal) {
+					this.moveFocus(-1);
+					break;
+				}
+
+				close();
+				break;
+
+			case KeyCodes.ENTER:
+				if (expandable) {
+					toggleFold(this.el);
+				}
+
+				break;
+
+			case KeyCodes.HOME:
+				this.setFocusToFirstItem();
+				break;
+
+			case KeyCodes.END:
+				this.setFocusToLastItem();
+				break;
+
+			default:
+				return;
+		}
+
+		e.stopPropagation();
+		e.preventDefault();
+	}
+}
diff --git a/src/core/component/directives/aria/roles/treeitem/interface.ts b/src/core/component/directives/aria/roles/treeitem/interface.ts
new file mode 100644
index 0000000000..59349b6421
--- /dev/null
+++ b/src/core/component/directives/aria/roles/treeitem/interface.ts
@@ -0,0 +1,17 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+type FoldToggle = (el: Element, value?: boolean) => void;
+
+export class TreeitemParams {
+	firstRootItem: boolean = false;
+	expandable: boolean = false;
+	expanded: boolean = false;
+	rootElement?: Element = undefined;
+	toggleFold: FoldToggle = () => undefined;
+}
diff --git a/src/core/component/directives/aria/roles/treeitem/test/unit/treeitem.ts b/src/core/component/directives/aria/roles/treeitem/test/unit/treeitem.ts
new file mode 100644
index 0000000000..f44947bbf7
--- /dev/null
+++ b/src/core/component/directives/aria/roles/treeitem/test/unit/treeitem.ts
@@ -0,0 +1,197 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria:treeitem', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('role is set', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const el = ctx.unsafe.block?.element('node');
+
+				return el?.getAttribute('role');
+			})
+		).toBe('treeitem');
+	});
+
+	test('aria-expanded is set', async ({page}) => {
+		const target = await init(page);
+
+		await page.waitForSelector('[role="group"]');
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				const
+					items = ctx.unsafe.block?.elements('node'),
+					expandableItem = items?.[1];
+
+				return expandableItem?.getAttribute('aria-expanded');
+			})
+		).toBe('false');
+	});
+
+	test('keyboard keys handle on vertical orientation', async ({page}) => {
+		const target = await init(page);
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const
+					input = document.querySelector('input'),
+					items = ctx.unsafe.block.elements('node'),
+					labels = document.querySelectorAll('label');
+
+				const
+					res: Array<Nullable<boolean | string>> = [];
+
+				const
+					eq = (index: number) => document.activeElement?.id === labels[index].getAttribute('for'),
+					att = (): Nullable<string> => items[1].getAttribute('aria-expanded'),
+					dis = (key: string) => document.activeElement?.dispatchEvent(
+							new KeyboardEvent('keydown', {key, bubbles: true})
+						);
+
+				input?.focus();
+
+				input?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', bubbles: true}));
+				res.push(eq(1));
+
+				dis('ArrowUp');
+				res.push(eq(0));
+				dis('Enter');
+				res.push(items[0].getAttribute('aria-expanded'));
+
+				dis('ArrowDown');
+				dis('Enter');
+				res.push(att());
+
+				dis('Enter');
+				res.push(att());
+
+				dis('ArrowRight');
+				res.push(att());
+
+				dis('ArrowRight');
+				res.push(eq(2));
+
+				dis('ArrowLeft');
+				res.push(eq(1));
+
+				dis('ArrowLeft');
+				res.push(att());
+
+				dis('Home');
+				res.push(eq(0));
+
+				dis('End');
+				res.push(eq(3));
+
+				return res;
+			})
+		).toEqual([true, true, null, 'true', 'false', 'true', true, true, 'false', true, true]);
+	});
+
+	test('keyboard keys handle on horizontal orientation', async ({page}) => {
+		const target = await init(page, {orientation: 'horizontal'});
+
+		await page.waitForSelector('[role="group"]');
+
+		test.expect(
+			await target.evaluate((ctx) => {
+				if (ctx.unsafe.block == null) {
+					return;
+				}
+
+				const
+					input = document.querySelector('input'),
+					items = ctx.unsafe.block.elements('node'),
+					labels = document.querySelectorAll('label');
+
+				const
+					res: Array<Nullable<boolean | string>> = [];
+
+				const
+					eq = (index: number) => document.activeElement?.id === labels[index].getAttribute('for'),
+					att = (): Nullable<string> => items[1].getAttribute('aria-expanded'),
+					dis = (key: string) => document.activeElement?.dispatchEvent(
+						new KeyboardEvent('keydown', {key, bubbles: true})
+					);
+
+				input?.focus();
+
+				input?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true}));
+				res.push(eq(1));
+
+				dis('ArrowLeft');
+				res.push(eq(0));
+
+				dis('ArrowRight');
+				dis('Enter');
+				res.push(att());
+
+				dis('Enter');
+				res.push(att());
+
+				dis('ArrowDown');
+				res.push(att());
+
+				dis('ArrowDown');
+				res.push(eq(2));
+
+				dis('ArrowUp');
+				res.push(eq(1));
+
+				dis('ArrowUp');
+				res.push(att());
+
+				dis('Home');
+				res.push(eq(0));
+
+				dis('End');
+				res.push(eq(3));
+
+				return res;
+			})
+		).toEqual([true, true, 'true', 'false', 'true', true, true, 'false', true, true]);
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-tree', {
+			attrs: {
+				item: 'b-checkbox',
+				items: [
+					{id: 'bar', label: 'bar'},
+					{
+						id: 'foo',
+						label: 'foo',
+						children: [{id: 'fooone', label: 'foo1'}]
+					},
+					{id: 'bla', label: 'bla'}
+				],
+				...attrs
+			}
+		});
+	}
+});
diff --git a/src/core/component/directives/aria/test/unit/simple.ts b/src/core/component/directives/aria/test/unit/simple.ts
new file mode 100644
index 0000000000..592cef7b24
--- /dev/null
+++ b/src/core/component/directives/aria/test/unit/simple.ts
@@ -0,0 +1,75 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type iBlock from 'super/i-block/i-block';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-aria', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('one aria attribute is added', async ({page}) => {
+		const target = await init(page, {'v-aria': {label: 'bla'}});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('aria-label'))
+		).toBe('bla');
+	});
+
+	test('two aria attributes are added', async ({page}) => {
+		const target = await init(page, {'v-aria': {describedby: 'bla', label: 'foo'}});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('aria-describedby'))
+		).toBe('bla');
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('aria-label'))
+		).toBe('foo');
+	});
+
+	test('aria-labelledby is added by string', async ({page}) => {
+		const target = await init(page, {'v-aria': {labelledby: 'bla'}});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('aria-labelledby'))
+		).toBe('bla');
+	});
+
+	test('aria-labelledby is added by array', async ({page}) => {
+		const target = await init(page, {'v-aria': {labelledby: ['bla', 'bar', 'foo']}});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('aria-labelledby'))
+		).toBe('bla bar foo');
+	});
+
+	test('aria-labelledby sugar syntax', async ({page}) => {
+		const target = await init(page, {'v-aria.#bla': {}});
+
+		const id = await target.evaluate((ctx) => ctx.$root.unsafe.dom.getId('bla'));
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.getAttribute('aria-labelledby'))
+		).toBe(id);
+	});
+
+	/**
+	 * @param page
+	 * @param attrs
+	 */
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<iBlock>> {
+		return Component.createComponent(page, 'b-dummy', {
+			attrs
+		});
+	}
+});
diff --git a/src/core/component/directives/id/CHANGELOG.md b/src/core/component/directives/id/CHANGELOG.md
new file mode 100644
index 0000000000..6e314edf2d
--- /dev/null
+++ b/src/core/component/directives/id/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/core/component/directives/id/README.md b/src/core/component/directives/id/README.md
new file mode 100644
index 0000000000..8f53efd3dd
--- /dev/null
+++ b/src/core/component/directives/id/README.md
@@ -0,0 +1,50 @@
+# core/component/directives/id
+
+This module provides a directive to easily add an id attribute to an element.
+
+```
+< div v-id = 'title'
+```
+
+## Why is this directive needed?
+
+A page cannot have two or more elements with the same id attribute at the same time. But when we design or edit a
+component markup and add such an attribute, we cannot be sure that the name is not already used by other components.
+To solve this problem, any component has the `dom.getId` method.
+
+```
+< div :id = dom.getId('title')
+```
+
+This method returns the passed identifier, plus the unique ID of the component within which the method is called.
+Thus, we only need to guarantee the uniqueness of the identifier within one template, and not all components.
+The problem is solved, but now our template has become more "dirty" due to the addition of syntactic noise with the
+method call and other stuff. This directive just solves this problem.
+
+```
+< div v-id = 'title'
+```
+
+The same as
+
+```
+< div :id = dom.getId('title')
+```
+
+## Modifiers
+
+### preserve
+
+This modifier means that if the element already has an id attribute, then the directive will leave it and won't overwrite it
+
+```
+< div id = my-div1 | v-id = 'title1'
+< div id = my-div2 | v-id.preserve = 'title2'
+```
+
+Will turn into
+
+```html
+<div id="title1"></div>
+<div id="my-div2"></div>
+```
diff --git a/src/core/component/directives/id/index.ts b/src/core/component/directives/id/index.ts
new file mode 100644
index 0000000000..49e1214828
--- /dev/null
+++ b/src/core/component/directives/id/index.ts
@@ -0,0 +1,44 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * [[include:core/component/directives/id/README.md]]
+ * @packageDocumentation
+ */
+
+import { ComponentEngine, VNode, VNodeDirective } from 'core/component/engines';
+import type iBlock from 'super/i-block/i-block';
+
+ComponentEngine.directive('id', {
+	inserted(el: HTMLElement, binding: VNodeDirective, vnode: VNode): void {
+		const
+			ctx = Object.cast<iBlock['unsafe']>(vnode.fakeContext);
+
+		if (el.hasAttribute('id') && binding.modifiers?.preserve != null) {
+			el.setAttribute('data-v-id-preserve', 'true');
+			return;
+		}
+
+		el.setAttribute('id', ctx.dom.getId(binding.value));
+	},
+
+	update(el: HTMLElement, binding: VNodeDirective, vnode: VNode) {
+		const
+			ctx = Object.cast<iBlock['unsafe']>(vnode.fakeContext);
+
+		if (el.hasAttribute('data-v-id-preserve')) {
+			return;
+		}
+
+		el.setAttribute('id', ctx.dom.getId(binding.value));
+	},
+
+	unbind(el: HTMLElement) {
+		el.removeAttribute('data-v-id-preserve');
+	}
+});
diff --git a/src/core/component/directives/id/test/unit/functional.ts b/src/core/component/directives/id/test/unit/functional.ts
new file mode 100644
index 0000000000..9f1a0108c9
--- /dev/null
+++ b/src/core/component/directives/id/test/unit/functional.ts
@@ -0,0 +1,55 @@
+// @ts-check
+
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+import type { JSHandle, Page } from 'playwright';
+import type bDummy from 'dummies/b-dummy/b-dummy';
+
+import test from 'tests/config/unit/test';
+import Component from 'tests/helpers/component';
+
+test.describe('v-id', () => {
+	test.beforeEach(async ({demoPage}) => {
+		await demoPage.goto();
+	});
+
+	test('should add an id to the element', async ({page}) => {
+		const
+			target = await init(page),
+			id = await target.evaluate((ctx) => ctx.$root.unsafe.dom.getId('dummy'));
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.id)
+		).toBe(id);
+	});
+
+	test('should not preserve the original element id', async ({page}) => {
+		const
+			target = await init(page),
+			id = await target.evaluate((ctx) => ctx.$root.unsafe.dom.getId('dummy'));
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.id)
+		).toBe(id);
+	});
+
+	test('should preserve the original element id', async ({page}) => {
+		const target = await init(page, {'v-id.preserve': 'dummy', id: 'foo'});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.$el?.id)
+		).toBe('foo');
+	});
+
+	async function init(page: Page, attrs: Dictionary = {}): Promise<JSHandle<bDummy>> {
+		return Component.createComponent(page, 'b-dummy', {
+			attrs: {'v-id': 'dummy', ...attrs}
+		});
+	}
+});
diff --git a/src/core/component/directives/index.ts b/src/core/component/directives/index.ts
index ca12cad9c1..f788c4e911 100644
--- a/src/core/component/directives/index.ts
+++ b/src/core/component/directives/index.ts
@@ -23,3 +23,5 @@ import 'core/component/directives/update-on';
 //#endif
 
 import 'core/component/directives/hook';
+
+import 'core/component/directives/id';
diff --git a/src/core/component/render-function/CHANGELOG.md b/src/core/component/render-function/CHANGELOG.md
index 1c8c43aa5d..78b125050e 100644
--- a/src/core/component/render-function/CHANGELOG.md
+++ b/src/core/component/render-function/CHANGELOG.md
@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :bug: Bug Fix
+
+* Fixed `v-attrs` regexp for parsing incoming modifiers
+
 ## v3.12.1 (2021-11-26)
 
 #### :bug: Bug Fix
diff --git a/src/core/component/render-function/const.ts b/src/core/component/render-function/const.ts
index 833defaf0c..54503e5348 100644
--- a/src/core/component/render-function/const.ts
+++ b/src/core/component/render-function/const.ts
@@ -7,4 +7,4 @@
  */
 
 export const
-	vAttrsRgxp = /(v-(.*?))(?::(.*?))?(\..*)?$/;
+	vAttrsRgxp = /(v-(.*?)(?::(.*?))?)(?:\.(.*))?$/;
diff --git a/src/dummies/b-dummy-dialog/CHANGELOG.md b/src/dummies/b-dummy-dialog/CHANGELOG.md
new file mode 100644
index 0000000000..19fb3e32d3
--- /dev/null
+++ b/src/dummies/b-dummy-dialog/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-0?-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/dummies/b-dummy-dialog/README.md b/src/dummies/b-dummy-dialog/README.md
new file mode 100644
index 0000000000..9e61d67d58
--- /dev/null
+++ b/src/dummies/b-dummy-dialog/README.md
@@ -0,0 +1,3 @@
+# dummies/b-dummy-dialog
+
+Dummy component to test `aria/roles/dialog`.
diff --git a/src/dummies/b-dummy-dialog/b-dummy-dialog.ss b/src/dummies/b-dummy-dialog/b-dummy-dialog.ss
new file mode 100644
index 0000000000..8a351f47c0
--- /dev/null
+++ b/src/dummies/b-dummy-dialog/b-dummy-dialog.ss
@@ -0,0 +1,31 @@
+- namespace [%fileName%]
+
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+- include 'super/i-block'|b as placeholder
+
+- template index() extends ['i-block'].index
+
+	- block body
+		- super
+
+		< b-window ref = window | :id = 'window' | :title = 'Title' | @keydown = onKeyDown
+			Window content
+
+			< div
+				< button @click = $refs.window.close() | :id = 'closeBtn'
+					Close the window
+
+				< button :id = 'btn1'
+					 Do something
+				< button :id = 'btn2'
+					 Do something#2
+
+		< button @click = $refs.window.open() | :id = 'openBtn'
+			Open the window
diff --git a/src/dummies/b-dummy-dialog/b-dummy-dialog.styl b/src/dummies/b-dummy-dialog/b-dummy-dialog.styl
new file mode 100644
index 0000000000..3bca376090
--- /dev/null
+++ b/src/dummies/b-dummy-dialog/b-dummy-dialog.styl
@@ -0,0 +1,15 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+@import "super/i-block/i-block.styl"
+
+$p = {
+
+}
+
+b-dummy-dialog extends i-block
diff --git a/src/dummies/b-dummy-dialog/b-dummy-dialog.ts b/src/dummies/b-dummy-dialog/b-dummy-dialog.ts
new file mode 100644
index 0000000000..41ece1eba6
--- /dev/null
+++ b/src/dummies/b-dummy-dialog/b-dummy-dialog.ts
@@ -0,0 +1,26 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * [[include:dummies/b-dummy-text/README.md]]
+ * @packageDocumentation
+ */
+
+import { component } from 'super/i-input-text/i-input-text';
+import iBlock from 'super/i-block/i-block';
+
+@component({
+	functional: {
+		functional: true,
+		dataProvider: undefined
+	}
+})
+
+export default class bDummyDialog extends iBlock {
+
+}
diff --git a/src/dummies/b-dummy-dialog/index.js b/src/dummies/b-dummy-dialog/index.js
new file mode 100644
index 0000000000..d568c46519
--- /dev/null
+++ b/src/dummies/b-dummy-dialog/index.js
@@ -0,0 +1,9 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+package('b-dummy-dialog');
diff --git a/src/dummies/b-dummy-listbox/CHANGELOG.md b/src/dummies/b-dummy-listbox/CHANGELOG.md
new file mode 100644
index 0000000000..19fb3e32d3
--- /dev/null
+++ b/src/dummies/b-dummy-listbox/CHANGELOG.md
@@ -0,0 +1,16 @@
+Changelog
+=========
+
+> **Tags:**
+> - :boom:       [Breaking Change]
+> - :rocket:     [New Feature]
+> - :bug:        [Bug Fix]
+> - :memo:       [Documentation]
+> - :house:      [Internal]
+> - :nail_care:  [Polish]
+
+## v3.?.? (2022-0?-??)
+
+#### :rocket: New Feature
+
+* Initial release
diff --git a/src/dummies/b-dummy-listbox/README.md b/src/dummies/b-dummy-listbox/README.md
new file mode 100644
index 0000000000..dd54c4352f
--- /dev/null
+++ b/src/dummies/b-dummy-listbox/README.md
@@ -0,0 +1,3 @@
+# dummies/b-dummy-listbox
+
+Dummy component to test `aria/roles/listbox`.
diff --git a/src/dummies/b-dummy-listbox/b-dummy-listbox.ss b/src/dummies/b-dummy-listbox/b-dummy-listbox.ss
new file mode 100644
index 0000000000..f9058fb476
--- /dev/null
+++ b/src/dummies/b-dummy-listbox/b-dummy-listbox.ss
@@ -0,0 +1,30 @@
+- namespace [%fileName%]
+
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+- include 'super/i-block'|b as placeholder
+
+- template index() extends ['i-block'].index
+
+	- block body
+		- super
+
+		< ul.&__wrapper v-aria:listbox = {...getAriaConfig('listbox'), label: 'test'}
+
+			< template v-for = (el, i) in items | :key = getItemKey(el, i)
+				< li.&__item &
+					:id = el.id |
+					:value = el.value |
+
+					v-aria:option = getAriaConfig('option', el) |
+					@click = onItemClick |
+					@keydown = onItemKeydown
+				.
+						< span.&__cell.&__link-value
+							{{ el.label }}
diff --git a/src/dummies/b-dummy-listbox/b-dummy-listbox.styl b/src/dummies/b-dummy-listbox/b-dummy-listbox.styl
new file mode 100644
index 0000000000..63b00dd127
--- /dev/null
+++ b/src/dummies/b-dummy-listbox/b-dummy-listbox.styl
@@ -0,0 +1,15 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+@import "super/i-block/i-block.styl"
+
+$p = {
+
+}
+
+b-dummy-listbox extends i-block
diff --git a/src/dummies/b-dummy-listbox/b-dummy-listbox.ts b/src/dummies/b-dummy-listbox/b-dummy-listbox.ts
new file mode 100644
index 0000000000..8ecbd8f390
--- /dev/null
+++ b/src/dummies/b-dummy-listbox/b-dummy-listbox.ts
@@ -0,0 +1,135 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+/**
+ * [[include:dummies/b-dummy-control-list/README.md]]
+ * @packageDocumentation
+ */
+
+import { derive } from 'core/functools/trait';
+
+import iBlock, { component, prop } from 'super/i-block/i-block';
+import iAccess from 'traits/i-access/i-access';
+import type iItems from 'traits/i-items/i-items';
+import type { Item } from 'base/b-list/interface';
+import type { Orientation } from 'core/component/directives/aria';
+
+export * from 'super/i-block/i-block';
+
+interface bDummyListbox extends Trait<typeof iAccess> {
+}
+
+@component({
+	functional: {
+		functional: true,
+		dataProvider: undefined
+	}
+})
+
+@derive(iAccess)
+class bDummyListbox extends iBlock implements iAccess, iItems {
+	readonly Item!: Item;
+
+	readonly Items!: Array<this['Item']>;
+
+	@prop(Boolean)
+	readonly multiple: boolean = false;
+
+	@prop(String)
+	readonly orientation: Orientation = 'vertical';
+
+	@prop(Array)
+	readonly items: this['Items'] = [];
+
+	protected activeStore: CanUndef<Set<string> | string>;
+
+	setActive(value: string): void {
+		if (this.multiple) {
+			if (Object.isSet(this.activeStore)) {
+				if (this.activeStore.has(value)) {
+					this.activeStore.delete(value);
+
+				} else {
+					this.activeStore.add(value);
+				}
+
+			} else {
+				this.activeStore = new Set();
+				this.activeStore.add(value);
+			}
+
+		} else if (this.activeStore !== value) {
+			this.activeStore = value;
+
+		} else {
+			this.activeStore = undefined;
+		}
+
+		const
+			items = this.block?.elements('item');
+
+		items?.forEach((el) => {
+			if (el.getAttribute('value') === value) {
+				const
+					mod = this.block?.getElMod(el, 'item', 'active') ?? 'false';
+
+				this.block?.setElMod(el, 'item', 'active', mod === 'false');
+
+			} else if (!Object.isSet(this.activeStore)) {
+				this.block?.setElMod(el, 'item', 'active', false);
+			}
+		});
+	}
+
+	isActive(value: string): boolean {
+		if (Object.isSet(this.activeStore)) {
+			return this.activeStore.has(value);
+		}
+
+		return this.activeStore === value;
+	}
+
+	protected getAriaConfig(role: 'listbox' | 'option', item?: this['Item']): Dictionary {
+		const onChange = (cb) => {
+			this.on('change', () => cb(this.isActive(String(item?.value))));
+		};
+
+		const listboxConfig = {
+			standAlone: true,
+			multiselectable: this.multiple,
+			orientation: this.orientation
+		};
+
+		const optionConfig = {
+			'@change': onChange
+		};
+
+		switch (role) {
+			case 'listbox': return listboxConfig;
+			case 'option': return optionConfig;
+			default: return {};
+		}
+	}
+
+	protected onItemClick(e: Event): void {
+		const
+			target = <Element>e.target,
+			value = String(target.getAttribute('value'));
+
+		this.setActive(value);
+		this.emit('change', this.activeStore);
+	}
+
+	protected onItemKeydown(e: KeyboardEvent): void {
+		if (e.key === ' ') {
+			this.onItemClick(e);
+		}
+	}
+}
+
+export default bDummyListbox;
diff --git a/src/dummies/b-dummy-listbox/index.js b/src/dummies/b-dummy-listbox/index.js
new file mode 100644
index 0000000000..cd6eb97e9f
--- /dev/null
+++ b/src/dummies/b-dummy-listbox/index.js
@@ -0,0 +1,10 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+package('b-dummy-listbox')
+	.extends('i-block');
diff --git a/src/form/b-button/CHANGELOG.md b/src/form/b-button/CHANGELOG.md
index 567364f2d1..e7f3ee866c 100644
--- a/src/form/b-button/CHANGELOG.md
+++ b/src/form/b-button/CHANGELOG.md
@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-0?-??)
+
+#### :house: Internal
+
+* Now element's `id` attribute is added with `v-id` directive
+
 ## v3.0.0-rc.211 (2021-07-21)
 
 #### :rocket: New Feature
diff --git a/src/form/b-button/b-button.ss b/src/form/b-button/b-button.ss
index 27480985c3..235ae8da1e 100644
--- a/src/form/b-button/b-button.ss
+++ b/src/form/b-button/b-button.ss
@@ -89,7 +89,7 @@
 			< . &
 				ref dropdown |
 				v-if = hasDropdown |
-				:id = dom.getId('dropdown') |
+				v-id = 'dropdown' |
 				:class = provide.elClasses({dropdown: {pos: dropdown}})
 			.
 				< .&__dropdown-content
diff --git a/src/form/b-checkbox/CHANGELOG.md b/src/form/b-checkbox/CHANGELOG.md
index f39903c9e3..e63c710489 100644
--- a/src/form/b-checkbox/CHANGELOG.md
+++ b/src/form/b-checkbox/CHANGELOG.md
@@ -9,6 +9,16 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :bug: Bug Fix
+
+* The `for` attribute has been added to the label to link to the checkbox
+
+#### :house: Internal
+
+* Improved component accessibility
+
 ## v3.0.0-rc.199 (2021-06-16)
 
 #### :boom: Breaking Change
diff --git a/src/form/b-checkbox/b-checkbox.ss b/src/form/b-checkbox/b-checkbox.ss
index a670526800..2011b4fd2f 100644
--- a/src/form/b-checkbox/b-checkbox.ss
+++ b/src/form/b-checkbox/b-checkbox.ss
@@ -37,6 +37,9 @@
 								< _.&__check
 
 					- block label
-						< span.&__label v-if = label || vdom.getSlot('label')
+						< label.&__label &
+							v-if = label || vdom.getSlot('label') |
+							:for = id || dom.getId('hidden-input')
+						.
 							+= self.slot('label', {':label': 'label'})
 								{{ t(label) }}
diff --git a/src/form/b-checkbox/b-checkbox.styl b/src/form/b-checkbox/b-checkbox.styl
index 70b1c55b59..320bbca008 100644
--- a/src/form/b-checkbox/b-checkbox.styl
+++ b/src/form/b-checkbox/b-checkbox.styl
@@ -17,13 +17,16 @@ b-checkbox extends i-input
 	contain paint
 	position relative
 
+	&__wrapper,
+	&__checkbox,
+	&__label
+		cursor pointer
+
 	&__wrapper
 		display flex
-		cursor pointer
 
 	&__checkbox
 		display block
-		cursor pointer
 
 	&__label
 		user-select none
diff --git a/src/form/b-checkbox/b-checkbox.ts b/src/form/b-checkbox/b-checkbox.ts
index a34a2657b6..e8f2109db0 100644
--- a/src/form/b-checkbox/b-checkbox.ts
+++ b/src/form/b-checkbox/b-checkbox.ts
@@ -15,6 +15,8 @@
 import 'models/demo/checkbox';
 //#endif
 
+import 'core/component/directives/aria';
+
 import symbolGenerator from 'core/symbol';
 import SyncPromise from 'core/promise/sync';
 
@@ -156,6 +158,9 @@ export default class bCheckbox extends iInput implements iSize {
 		return this.defaultProp;
 	}
 
+	@system((ctx) => ctx.sync.link((v: Dictionary) => ({...v, id: ctx.id ?? ctx.dom.getId('hidden-input')})))
+	override attrs?: Dictionary;
+
 	/**
 	 * True if the checkbox is checked
 	 */
@@ -196,7 +201,7 @@ export default class bCheckbox extends iInput implements iSize {
 	@system()
 	protected override valueStore!: this['Value'];
 
-	protected override readonly $refs!: {input: HTMLInputElement};
+	protected override readonly $refs!: { input: HTMLInputElement };
 
 	/**
 	 * Checks the checkbox
@@ -316,6 +321,13 @@ export default class bCheckbox extends iInput implements iSize {
 	 */
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars-experimental
 	protected onClick(e: Event): void {
+		const
+			target = <HTMLElement>e.target;
+
+		if (target.tagName === 'LABEL') {
+			e.preventDefault();
+		}
+
 		void this.focus();
 
 		if (this.value === undefined || this.value === false || this.changeable) {
diff --git a/src/form/b-checkbox/test/unit/simple.ts b/src/form/b-checkbox/test/unit/simple.ts
index cd0feea7c0..f422aa1dda 100644
--- a/src/form/b-checkbox/test/unit/simple.ts
+++ b/src/form/b-checkbox/test/unit/simple.ts
@@ -179,6 +179,23 @@ test.describe('b-checkbox simple usage', () => {
 		).toBeUndefined();
 	});
 
+	test('checking with id prop', async ({page}) => {
+		const target = await init(page, {value: 'bar', id: 'foo'});
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block!.element('hidden-input')?.id)
+		).toBe('foo');
+	});
+
+	test('checking without id prop', async ({page}) => {
+		const target = await init(page, {value: 'bar'});
+		const id = await target.evaluate((ctx) => ctx.unsafe.dom.getId(''));
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block!.element('hidden-input')?.id)
+		).toBe(`${id}hidden-input`);
+	});
+
 	test('checkbox with a `label` prop', async ({page}) => {
 		const target = await init(page, {
 			label: 'Foo'
@@ -197,6 +214,21 @@ test.describe('b-checkbox simple usage', () => {
 		test.expect(
 			await target.evaluate((ctx) => ctx.value)
 		).toBe(true);
+
+		const id = await target.evaluate((ctx) => ctx.unsafe.dom.getId(''));
+
+		test.expect(
+			await target.evaluate((ctx) => ctx.unsafe.block!.element('label')?.getAttribute('for'))
+		).toBe(`${id}hidden-input`);
+
+		const target2 = await init(page, {
+			label: 'Foo',
+			id: 'bla'
+		});
+
+		test.expect(
+			await target2.evaluate((ctx) => ctx.unsafe.block!.element('label')?.getAttribute('for'))
+		).toBe('bla');
 	});
 
 	/**
diff --git a/src/form/b-select/CHANGELOG.md b/src/form/b-select/CHANGELOG.md
index 0db12f6a78..ca67cb2ba4 100644
--- a/src/form/b-select/CHANGELOG.md
+++ b/src/form/b-select/CHANGELOG.md
@@ -9,6 +9,22 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Now the component derives `iAccess`
+
+#### :bug: Bug Fix
+
+* Fixed a bug due to which the component did not emit `iOpen` events
+
+#### :house: Internal
+
+* Improved component accessibility
+
+* Changed keyboard keys handling according to ARIA specification
+
 ## v3.5.3 (2021-10-06)
 
 #### :bug: Bug Fix
diff --git a/src/form/b-select/README.md b/src/form/b-select/README.md
index e6c7fe2d46..01a493279f 100644
--- a/src/form/b-select/README.md
+++ b/src/form/b-select/README.md
@@ -17,6 +17,8 @@ The select can contain multiple values.
 
 * The component has `skeletonMarker`.
 
+* The component is accessible.
+
 ## Modifiers
 
 | Name       | Description                                      | Values    | Default |
@@ -384,3 +386,13 @@ Checks that a component value must be filled.
   size 20px
   background-image url("assets/my-icon.svg")
 ```
+
+## Accessibility
+
+The component implements an ARIA role [combobox](https://www.w3.org/TR/wai-aria/#combobox).
+Only basic accessible functionality (without optional keyboard combinations) included in this [widget](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) is supported.
+
+The component includes the following roles:
+- [combobox](https://www.w3.org/TR/wai-aria/#combobox)
+- [listbox](https://www.w3.org/TR/wai-aria/#listbox)
+- [option](https://www.w3.org/TR/wai-aria/#option)
diff --git a/src/form/b-select/b-select.ss b/src/form/b-select/b-select.ss
index b89db45cd3..cd567ca839 100644
--- a/src/form/b-select/b-select.ss
+++ b/src/form/b-select/b-select.ss
@@ -27,10 +27,6 @@
 				- if tag === 'option'
 					? itemAttrs[':selected'] = 'isSelected(el.value)'
 
-				- else
-					? itemAttrs.role = 'option'
-					? itemAttrs[':aria-selected'] = 'isSelected(el.value)'
-
 				< ${tag} &
 					:-id = values.get(el.value) |
 
@@ -43,7 +39,15 @@
 						}
 					})) |
 
-					:v-attrs = el.attrs |
+					:v-attrs = native ?
+						el.attrs :
+						{
+							'v-aria:option': getAriaConfig('option', el),
+							...el.attrs
+						} |
+
+					v-id.preserve = el.value |
+
 					${itemAttrs}
 				.
 					+= self.slot('default', {':item': 'el'})
@@ -87,12 +91,13 @@
 						.
 
 				- block input
-					< _.&__cell.&__input-wrapper
-						< template v-if = native
+					< template v-if = native
+						< _.&__cell.&__input-wrapper
 							+= self.nativeInput({tag: 'select', model: 'undefined', attrs: {'@change': 'onNativeChange'}})
 								+= self.items('option')
 
-						< template v-else
+					< template v-else
+						< _.&__cell.&__input-wrapper v-aria:combobox = getAriaConfig('combobox')
 							+= self.nativeInput({model: 'textStore', attrs: {'@input': 'onSearchInput'}})
 
 				- block icon
@@ -151,6 +156,7 @@
 				v-if = !native && items.length && (
 					isFunctional ||
 					opt.ifOnce('opened', m.opened !== 'false') && delete watchModsStore.opened
-				)
+				) |
+				v-aria:listbox
 			.
 				+= self.items()
diff --git a/src/form/b-select/b-select.ts b/src/form/b-select/b-select.ts
index 631d29aab8..e14b56a086 100644
--- a/src/form/b-select/b-select.ts
+++ b/src/form/b-select/b-select.ts
@@ -15,6 +15,8 @@
 import 'models/demo/select';
 //#endif
 
+import 'core/component/directives/aria';
+
 import SyncPromise from 'core/promise/sync';
 
 import { derive } from 'core/functools/trait';
@@ -62,6 +64,7 @@ import type {
 	UnsafeBSelect
 
 } from 'form/b-select/interface';
+import iAccess from 'traits/i-access/i-access';
 
 export * from 'form/b-input/b-input';
 export * from 'traits/i-open-toggle/i-open-toggle';
@@ -82,8 +85,8 @@ interface bSelect extends Trait<typeof iOpenToggle> {}
 	}
 })
 
-@derive(iOpenToggle)
-class bSelect extends iInputText implements iOpenToggle, iItems {
+@derive(iOpenToggle, iAccess)
+class bSelect extends iInputText implements iOpenToggle, iItems, iAccess {
 	override readonly Value!: Value;
 	override readonly FormValue!: FormValue;
 
@@ -257,18 +260,9 @@ class bSelect extends iInputText implements iOpenToggle, iItems {
 	}
 
 	override get rootAttrs(): Dictionary {
-		const attrs = {
+		return {
 			...super['rootAttrsGetter']()
 		};
-
-		if (!this.native) {
-			Object.assign(attrs, {
-				role: 'listbox',
-				'aria-multiselectable': this.multiple
-			});
-		}
-
-		return attrs;
 	}
 
 	override get value(): this['Value'] {
@@ -581,9 +575,6 @@ class bSelect extends iInputText implements iOpenToggle, iItems {
 
 					if (this.native) {
 						previousItemEl.selected = false;
-
-					} else {
-						previousItemEl.setAttribute('aria-selected', 'false');
 					}
 				}
 			}
@@ -599,9 +590,6 @@ class bSelect extends iInputText implements iOpenToggle, iItems {
 
 				if (this.native) {
 					el.selected = true;
-
-				} else {
-					el.setAttribute('aria-selected', 'true');
 				}
 			}
 		}).catch(stderr);
@@ -688,9 +676,6 @@ class bSelect extends iInputText implements iOpenToggle, iItems {
 
 					if (this.native) {
 						el.selected = false;
-
-					} else {
-						el.setAttribute('aria-selected', 'false');
 					}
 				}
 			}
@@ -793,6 +778,18 @@ class bSelect extends iInputText implements iOpenToggle, iItems {
 		await on.openedChange(this, e);
 	}
 
+	/** @see [[iAccess.focus]] */
+	override focus(): Promise<boolean> {
+		this.onFocus();
+		return iAccess.focus(this);
+	}
+
+	/** @see [[iAccess.blur]] */
+	override blur(): Promise<boolean> {
+		void this.close();
+		return iAccess.blur(this);
+	}
+
 	/**
 	 * Sets the scroll position to the first marked or selected item
 	 */
@@ -883,11 +880,54 @@ class bSelect extends iInputText implements iOpenToggle, iItems {
 
 	protected override initModEvents(): void {
 		super.initModEvents();
+		iOpenToggle.initModEvents(this);
+
 		this.sync.mod('native', 'native', Boolean);
 		this.sync.mod('multiple', 'multiple', Boolean);
 		this.sync.mod('opened', 'multiple', Boolean);
 	}
 
+	/**
+	 * Returns a dictionary with configurations for the `v-aria` directive used as a combobox
+	 * @param role
+	 */
+	protected getAriaConfig(role: 'combobox'): Dictionary;
+
+	/**
+	 * Returns a dictionary with configurations for the `v-aria` directive used as an option
+	 *
+	 * @param role
+	 * @param item - option item data
+	 */
+	protected getAriaConfig(role: 'option', item: this['Item']): Dictionary;
+
+	protected getAriaConfig(role: 'combobox' | 'option', item?: this['Item']): Dictionary {
+		const isSelected = item?.value != null ?
+			this.isSelected.bind(this, item.value) :
+			() => undefined;
+
+		const comboboxConfig = {
+			multiselectable: this.multiple,
+			'@change': (cb) => this.localEmitter.on('el.mod.set.*.marked.*', ({link}) => cb(link)),
+			'@close': (cb) => this.on('close', cb),
+			'@open': (cb) => this.on('open', () => this.$nextTick(() => cb(this.selectedElement)))
+		};
+
+		const optionConfig = {
+			get selected() {
+				return isSelected();
+			},
+
+			'@change': (cb) => this.on('actionChange', () => cb(isSelected()))
+		};
+
+		switch (role) {
+			case 'combobox': return comboboxConfig;
+			case 'option': return optionConfig;
+			default: return {};
+		}
+	}
+
 	protected override beforeDestroy(): void {
 		super.beforeDestroy();
 
diff --git a/src/form/b-select/modules/handlers.ts b/src/form/b-select/modules/handlers.ts
index f88496340a..3ca6943462 100644
--- a/src/form/b-select/modules/handlers.ts
+++ b/src/form/b-select/modules/handlers.ts
@@ -225,11 +225,21 @@ export async function itemsNavigate<C extends bSelect>(component: C, e: Keyboard
 			break;
 
 		case 'ArrowUp':
+			if (unsafe.mods.opened !== 'true') {
+				await unsafe.open();
+				break;
+			}
+
 			if (currentItemEl?.previousElementSibling != null) {
 				markItem(currentItemEl.previousElementSibling);
+			}
+
+			if (currentItemEl == null) {
+				const
+					items = $b.elements('item'),
+					lastItem = items[items.length - 1];
 
-			} else {
-				await unsafe.close();
+				markItem(lastItem);
 			}
 
 			break;
@@ -245,7 +255,17 @@ export async function itemsNavigate<C extends bSelect>(component: C, e: Keyboard
 				currentItemEl ??= getMarkedOrSelectedItem();
 			}
 
-			markItem(currentItemEl?.nextElementSibling) || markItem($b.element('item'));
+			if (currentItemEl?.nextElementSibling != null) {
+				markItem(currentItemEl.nextElementSibling);
+			}
+
+			if (currentItemEl == null) {
+				const
+					firstItem = $b.elements('item')[0];
+
+				markItem(firstItem);
+			}
+
 			break;
 		}
 
diff --git a/src/pages/p-v4-components-demo/b-v4-component-demo/CHANGELOG.md b/src/pages/p-v4-components-demo/b-v4-component-demo/CHANGELOG.md
index 76418ffae2..a8389d7ed5 100644
--- a/src/pages/p-v4-components-demo/b-v4-component-demo/CHANGELOG.md
+++ b/src/pages/p-v4-components-demo/b-v4-component-demo/CHANGELOG.md
@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-0?-??)
+
+#### :house: Internal
+
+* Now element's `id` attribute is added with `v-id` directive
+
 ## v3.0.0-rc.37 (2020-07-20)
 
 #### :house: Internal
diff --git a/src/pages/p-v4-components-demo/b-v4-component-demo/b-v4-component-demo.ss b/src/pages/p-v4-components-demo/b-v4-component-demo/b-v4-component-demo.ss
index 8808a6aa9f..456c3784e8 100644
--- a/src/pages/p-v4-components-demo/b-v4-component-demo/b-v4-component-demo.ss
+++ b/src/pages/p-v4-components-demo/b-v4-component-demo/b-v4-component-demo.ss
@@ -47,7 +47,7 @@
 							< template v-else
 								< input &
 									:type = 'checkbox' |
-									:id = dom.getId(key) |
+									v-id = key |
 									:checked = debugComponent.mods[key] === getModValue(mod[0]) |
 									:class = provide.elClasses({
 										highlighted: field.get(['highlighting', key, mod[0]].join('.')) || false
diff --git a/src/pages/p-v4-components-demo/index.js b/src/pages/p-v4-components-demo/index.js
index 846862b7ea..dd8f17048b 100644
--- a/src/pages/p-v4-components-demo/index.js
+++ b/src/pages/p-v4-components-demo/index.js
@@ -54,10 +54,12 @@ package('p-v4-components-demo')
 		'b-dummy-state',
 		'b-dummy-control-list',
 		'b-dummy-decorators',
+		'b-dummy-listbox',
+		'b-dummy-dialog',
 
 		components
 	)
 	.libs([
 		'core/cookies',
 		'models/demo/form'
-	])
\ No newline at end of file
+	])
diff --git a/src/super/i-block/modules/dom/index.ts b/src/super/i-block/modules/dom/index.ts
index 3fd5dc7c43..f1ab9d3f48 100644
--- a/src/super/i-block/modules/dom/index.ts
+++ b/src/super/i-block/modules/dom/index.ts
@@ -13,6 +13,8 @@
 
 import { memoize } from 'core/promise/sync';
 import { deprecated } from 'core/functools/deprecation';
+import { intoIter } from 'core/iter';
+import { sequence } from 'core/iter/combinators';
 import { wrapAsDelegateHandler } from 'core/dom';
 
 import type { InViewInitOptions, InViewAdapter } from 'core/dom/in-view';
@@ -27,6 +29,7 @@ import Friend from 'super/i-block/modules/friend';
 
 import { componentRgxp } from 'super/i-block/modules/dom/const';
 import { ElCb, inViewInstanceStore, DOMManipulationOptions } from 'super/i-block/modules/dom/interface';
+import { FOCUSABLE_SELECTOR } from 'traits/i-access/const';
 
 export * from 'super/i-block/modules/dom/const';
 export * from 'super/i-block/modules/dom/interface';
@@ -504,4 +507,193 @@ export default class DOM extends Friend {
 			component: resolvedCtx
 		});
 	}
+
+	/**
+	 * Removes all children of the specified element that can be focused from the Tab toggle sequence.
+	 * In effect, these elements are set to -1 for the tabindex attribute.
+	 *
+	 * @param [searchCtx] - a context to search, if not set, the component root element will be used
+	 * @param [opts] - dictionary with options of including the search context, {includeCtx: true} by default
+	 */
+	removeAllFromTabSequence(
+		searchCtx: CanUndef<Element> = this.ctx.$el,
+		opts: {includeCtx: boolean} = {includeCtx: true}
+	): boolean {
+		let
+			areElementsRemoved = false;
+
+		if (searchCtx == null) {
+			return areElementsRemoved;
+		}
+
+		const
+			ctx = opts.includeCtx ? searchCtx : (searchCtx.nextElementSibling ?? searchCtx);
+
+		const
+			focusableEls = this.findFocusableElements(ctx);
+
+		for (const el of focusableEls) {
+			if (!el.hasAttribute('data-tabindex')) {
+				el.setAttribute('data-tabindex', String(el.tabIndex));
+			}
+
+			el.tabIndex = -1;
+			areElementsRemoved = true;
+		}
+
+		return areElementsRemoved;
+	}
+
+	/**
+	 * Restores all children of the specified element that can be focused to the Tab toggle sequence.
+	 * This method is used to restore the state of elements to the state they had before `removeAllFromTabSequence` was
+	 * applied.
+	 *
+	 * @param [searchCtx] - a context to search, if not set, the component root element will be used
+	 * @param [opts] - dictionary with options of including the search context, {includeCtx: true} by default
+	 */
+	restoreAllToTabSequence(
+		searchCtx: CanUndef<Element> = this.ctx.$el,
+		opts: {includeCtx: boolean} = {includeCtx: true}
+		): boolean {
+		let
+			areElementsRestored = false;
+
+		if (searchCtx == null) {
+			return areElementsRestored;
+		}
+
+		let
+			removedEls = intoIter(searchCtx.querySelectorAll<AccessibleElement>('[data-tabindex]'));
+
+		if (opts.includeCtx && searchCtx.hasAttribute('data-tabindex')) {
+			removedEls = sequence(removedEls, intoIter([<AccessibleElement>searchCtx]));
+		}
+
+		for (const elem of removedEls) {
+			const
+				originalTabIndex = elem.getAttribute('data-tabindex');
+
+			if (originalTabIndex != null) {
+				elem.tabIndex = Number(originalTabIndex);
+				elem.removeAttribute('data-tabindex');
+				areElementsRestored = true;
+			}
+		}
+
+		return areElementsRestored;
+	}
+
+	/**
+	 * Returns the next (or previous) element to which focus will be switched by pressing Tab.
+	 * The method takes a "step" parameter, i.e. you can control the Tab sequence direction. For example,
+	 * by setting the step to `-1` you will get an element that will be switched to focus by pressing Shift+Tab.
+	 *
+	 * @param step
+	 * @param [searchCtx] - a context to search, if not set, document will be used
+	 */
+	getNextFocusableElement<T extends AccessibleElement = AccessibleElement>(
+		step: 1 | -1,
+		searchCtx: Element = document.documentElement
+	): T | null {
+		const
+			{activeElement} = document;
+
+		if (activeElement == null) {
+			return null;
+		}
+
+		const
+			focusableEls = [...this.findFocusableElements<T>(searchCtx, {native: false})],
+			index = focusableEls.indexOf(<T>activeElement);
+
+		if (index < 0) {
+			return null;
+		}
+
+		focusableEls.forEach((el) => {
+			if (el.tabIndex > 0) {
+				Object.throw('The tab sequence has an element with tabindex more than 0. The sequence would be different in different browsers. It is strongly recommended not to use tabindexes more than 0.');
+			}
+		});
+
+		return focusableEls[index + step] ?? null;
+	}
+
+	/**
+	 * Finds the first non-disabled visible focusable element from the passed context to search and returns it.
+	 * The element that is the search context is also taken into account in the search.
+	 *
+	 * @param [searchCtx] - a context to search, if not set, the component root element will be used
+	 */
+	findFocusableElement<T extends AccessibleElement = AccessibleElement>(searchCtx?: Element): T | null {
+		const
+			search = this.findFocusableElements<T>(searchCtx).next();
+
+		if (search.done) {
+			return null;
+		}
+
+		return search.value;
+	}
+
+	/**
+	 * Finds all non-disabled visible focusable elements and returns an iterator with the found ones.
+	 * The element that is the search context is also taken into account in the search.
+	 * Also expects a dictionary with option of filtration  invisible elements.
+	 * If native property is set to true, the method filters invisible elements by css properties
+	 * `disabled`, `visible` and `display`.
+	 * Native in false also adds the filtration by element's current visibility on the screen.
+	 *
+	 * @param [searchCtx] - a context to search, if not set, the component root element will be used
+	 * @param [opts] - dictionary with options of elements' visibility filtration, {native: true} by default
+	 */
+	findFocusableElements<
+		T extends AccessibleElement = AccessibleElement
+		>(searchCtx: CanUndef<Element> = this.ctx.$el, opts: {native: boolean} = {native: true}): IterableIterator<T> {
+		const
+			accessibleEls = searchCtx?.querySelectorAll<AccessibleElement>(FOCUSABLE_SELECTOR);
+
+		let
+			searchIter = intoIter(accessibleEls ?? []);
+
+		if (searchCtx?.matches(FOCUSABLE_SELECTOR)) {
+			searchIter = sequence(searchIter, intoIter([<AccessibleElement>searchCtx]));
+		}
+
+		const
+			focusableWithoutDisabled = filterDisabledElements(searchIter);
+
+		return {
+			[Symbol.iterator]() {
+				return this;
+			},
+
+			next: focusableWithoutDisabled.next.bind(focusableWithoutDisabled)
+		};
+
+		function* filterDisabledElements(
+			iter: IterableIterator<AccessibleElement>
+		): IterableIterator<AccessibleElement> {
+			for (const el of iter) {
+				const
+					rect = el.getBoundingClientRect();
+
+				if (
+					!el.hasAttribute('disabled') &&
+					el.getAttribute('visibility') !== 'hidden' &&
+					el.getAttribute('display') !== 'none'
+				) {
+					if (!opts.native) {
+						if (rect.height > 0 || rect.width > 0) {
+							yield el;
+						}
+
+					} else {
+						yield el;
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/src/super/i-input/CHANGELOG.md b/src/super/i-input/CHANGELOG.md
index 35945e1404..dfe015cf6d 100644
--- a/src/super/i-input/CHANGELOG.md
+++ b/src/super/i-input/CHANGELOG.md
@@ -9,6 +9,16 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## ## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Now the component derives `iAccess`
+
+#### :house: Internal
+
+* Removed `enable` and `disable` methods
+
 ## v3.0.0-rc.199 (2021-06-16)
 
 #### :boom: Breaking Change
diff --git a/src/super/i-input/README.md b/src/super/i-input/README.md
index 4719bb593f..12a5abf63b 100644
--- a/src/super/i-input/README.md
+++ b/src/super/i-input/README.md
@@ -459,7 +459,7 @@ You can also manage a type of the created tag and other options by using the pre
  *   *) [type=nativeInputType] - value of the `:type` attribute
  *
  *   *) [autofocus] - value of the `:autofocus` attribute
- *   *) [tabIndex] - value of the `:autofocus` attribute
+ *   *) [tabIndex] - value of the `:tabindex` attribute
  *
  *   *) [focusHandler] - value of the `@focus` attribute
  *   *) [blurHandler] - value of the `@blur` attribute
diff --git a/src/super/i-input/i-input.ss b/src/super/i-input/i-input.ss
index 5fb3be3649..8d8c85a2c8 100644
--- a/src/super/i-input/i-input.ss
+++ b/src/super/i-input/i-input.ss
@@ -36,7 +36,7 @@
 		 *   *) [type=nativeInputType] - value of the `:type` attribute
 		 *
 		 *   *) [autofocus] - value of the `:autofocus` attribute
-		 *   *) [tabIndex] - value of the `:autofocus` attribute
+		 *   *) [tabIndex] - value of the `:tabindex` attribute
 		 *
 		 *   *) [focusHandler] - value of the `@focus` attribute
 		 *   *) [blurHandler] - value of the `@blur` attribute
diff --git a/src/super/i-input/i-input.ts b/src/super/i-input/i-input.ts
index a7828e61db..6561e0df24 100644
--- a/src/super/i-input/i-input.ts
+++ b/src/super/i-input/i-input.ts
@@ -15,6 +15,7 @@ import symbolGenerator from 'core/symbol';
 import SyncPromise from 'core/promise/sync';
 
 import { Option } from 'core/prelude/structures';
+import { derive } from 'core/functools/trait';
 
 import iAccess from 'traits/i-access/i-access';
 import iVisible from 'traits/i-visible/i-visible';
@@ -62,6 +63,8 @@ export * from 'super/i-input/interface';
 export const
 	$$ = symbolGenerator();
 
+interface iInput extends Trait<typeof iAccess> {}
+
 /**
  * Superclass for all form components
  */
@@ -76,7 +79,8 @@ export const
 	}
 })
 
-export default abstract class iInput extends iData implements iVisible, iAccess {
+@derive(iAccess)
+abstract class iInput extends iData implements iVisible, iAccess {
 	/**
 	 * Type: component value
 	 */
@@ -664,18 +668,6 @@ export default abstract class iInput extends iData implements iVisible, iAccess
 	@system()
 	private validationMsg?: string;
 
-	/** @see [[iAccess.enable]] */
-	@p({replace: false})
-	enable(): Promise<boolean> {
-		return iAccess.enable(this);
-	}
-
-	/** @see [[iAccess.disable]] */
-	@p({replace: false})
-	disable(): Promise<boolean> {
-		return iAccess.disable(this);
-	}
-
 	/** @see [[iAccess.focus]] */
 	@p({replace: false})
 	@wait('ready', {label: $$.focus})
@@ -1040,3 +1032,5 @@ export default abstract class iInput extends iData implements iVisible, iAccess
 		}
 	}
 }
+
+export default iInput;
diff --git a/src/traits/i-access/CHANGELOG.md b/src/traits/i-access/CHANGELOG.md
index 3d5a9e651b..dda083d6fa 100644
--- a/src/traits/i-access/CHANGELOG.md
+++ b/src/traits/i-access/CHANGELOG.md
@@ -9,6 +9,17 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Added a new method `removeAllFromTabSequence`
+* Added a new method `restoreAllToTabSequence`
+* Added a new method `getNextFocusableElement`
+* Added a new method `findFocusableElement`
+* Added a new method `findFocusableElements`
+* Added a new static method `is`
+
 ## v3.0.0-rc.211 (2021-07-21)
 
 * Now the trait uses `aria` attributes
diff --git a/src/traits/i-access/README.md b/src/traits/i-access/README.md
index a28a6ad64e..69b4b39305 100644
--- a/src/traits/i-access/README.md
+++ b/src/traits/i-access/README.md
@@ -80,7 +80,7 @@ The trait specifies a getter to determine when the component in focus or not.
 
 ### isFocused
 
-True if the component in focus.
+True if the component is in focus.
 The getter has the default implementation via a static method `iAccess.isFocused`.
 
 ```typescript
@@ -98,6 +98,21 @@ export default class bButton implements iAccess {
 
 The trait specifies a bunch of methods to implement.
 
+### is
+
+True if the component realize `iAccess` trait.
+
+```typescript
+import iAccess from 'traits/i-access/i-access';
+
+export default class bButton implements iAccess {
+  /** @see iAccess.is */
+  is(): boolean {
+    return iAccess.is(this);
+  }
+}
+```
+
 ### enable
 
 Enables the component.
@@ -162,6 +177,93 @@ export default class bButton implements iAccess {
 }
 ```
 
+### removeAllFromTabSequence
+
+Removes all children of the specified element that can be focused from the Tab toggle sequence.
+In effect, these elements are set to -1 for the tabindex attribute.
+The method has the default implementation.
+
+```typescript
+import iAccess from 'traits/i-access/i-access';
+
+export default class bButton implements iAccess {
+  /** @see iAccess.removeAllFromTabSequence */
+  removeAllFromTabSequence(): boolean {
+    return iAccess.removeAllFromTabSequence(this);
+  }
+}
+```
+
+### restoreAllToTabSequence
+
+Restores all children of the specified element that can be focused to the Tab toggle sequence.
+This method is used to restore the state of elements to the state they had before `removeAllFromTabSequence` was
+applied.
+The method has the default implementation.
+
+```typescript
+import iAccess from 'traits/i-access/i-access';
+
+export default class bButton implements iAccess {
+  /** @see iAccess.restoreAllToTabSequence */
+  restoreAllToTabSequence(): boolean {
+    return iAccess.restoreAllToTabSequence(this);
+  }
+}
+```
+
+### getNextFocusableElement
+
+Returns the next (or previous) element to which focus will be switched by pressing Tab.
+The method takes a "step" parameter, i.e. you can control the Tab sequence direction. For example,
+by setting the step to `-1` you will get an element that will be switched to focus by pressing Shift+Tab.
+The method has the default implementation.
+
+```typescript
+import iAccess from 'traits/i-access/i-access';
+
+export default class bButton implements iAccess {
+  /** @see iAccess.getNextFocusableElement */
+  getNextFocusableElement(): AccessibleElement | null {
+    return iAccess.getNextFocusableElement(this);
+  }
+}
+```
+
+### findFocusableElement
+
+Finds the first non-disabled visible focusable element from the passed context to search and returns it.
+The element that is the search context is also taken into account in the search.
+The method has the default implementation.
+
+```typescript
+import iAccess from 'traits/i-access/i-access';
+
+export default class bButton implements iAccess {
+  /** @see iAccess.findFocusableElement */
+  findFocusableElement(): AccessibleElement | null {
+    return iAccess.findFocusableElement(this);
+  }
+}
+```
+
+### findFocusableElements
+
+Finds all non-disabled visible focusable elements and returns an iterator with the found ones.
+The element that is the search context is also taken into account in the search.
+The method has the default implementation.
+
+```typescript
+import iAccess from 'traits/i-access/i-access';
+
+export default class bButton implements iAccess {
+  /** @see iAccess.findFocusableElements */
+  findFocusableElements(): IterableIterator<AccessibleElement> {
+    return iAccess.findFocusableElements(this);
+  }
+}
+```
+
 ## Helpers
 
 The trait provides a bunch of helper functions to initialize event listeners.
diff --git a/src/traits/i-access/const.ts b/src/traits/i-access/const.ts
new file mode 100644
index 0000000000..ca78dba7b1
--- /dev/null
+++ b/src/traits/i-access/const.ts
@@ -0,0 +1,16 @@
+/*!
+ * V4Fire Client Core
+ * https://github.com/V4Fire/Client
+ *
+ * Released under the MIT license
+ * https://github.com/V4Fire/Client/blob/master/LICENSE
+ */
+
+export const FOCUSABLE_SELECTOR = [
+	'a',
+	'input',
+	'select',
+	'button',
+	'textarea',
+	'[tabindex]'
+].join();
diff --git a/src/traits/i-access/i-access.ts b/src/traits/i-access/i-access.ts
index 489836c10b..165051a7ee 100644
--- a/src/traits/i-access/i-access.ts
+++ b/src/traits/i-access/i-access.ts
@@ -50,6 +50,19 @@ export default abstract class iAccess {
 	static blur: AddSelf<iAccess['blur'], iBlock> =
 		(component) => SyncPromise.resolve(component.setMod('focused', false));
 
+	/**
+	 * Checks if the passed object realize the current trait
+	 * @param obj
+	 */
+	static is(obj: unknown): obj is iAccess {
+		if (Object.isPrimitive(obj)) {
+			return false;
+		}
+
+		const dict = Object.cast<Dictionary>(obj);
+		return Object.isFunction(dict.focus) && Object.isFunction(dict.initModEvents);
+	}
+
 	/**
 	 * Returns true if the component in focus
 	 * @param component
@@ -147,10 +160,10 @@ export default abstract class iAccess {
 					return;
 				}
 
-				if ($el.hasAttribute('tab-index')) {
-					const
-						el = (<HTMLButtonElement>$el);
+				const
+					el = (<HTMLButtonElement>$el);
 
+				if (el.hasAttribute('tabindex') || el.tabIndex > -1) {
 					if (focused) {
 						el.focus();
 
diff --git a/src/traits/i-open/CHANGELOG.md b/src/traits/i-open/CHANGELOG.md
index f435f65495..68b7bf8e06 100644
--- a/src/traits/i-open/CHANGELOG.md
+++ b/src/traits/i-open/CHANGELOG.md
@@ -9,6 +9,12 @@ Changelog
 > - :house:      [Internal]
 > - :nail_care:  [Polish]
 
+## v3.?.? (2022-??-??)
+
+#### :rocket: New Feature
+
+* Added a new static method `is`
+
 ## v3.0.0-rc.184 (2021-05-12)
 
 #### :rocket: New Feature
diff --git a/src/traits/i-open/README.md b/src/traits/i-open/README.md
index 73d15dc17a..6600e47bcc 100644
--- a/src/traits/i-open/README.md
+++ b/src/traits/i-open/README.md
@@ -133,7 +133,23 @@ export default class bButton implements iOpen {
 
 ## Helpers
 
-The trait provides a bunch of helper functions to initialize event listeners.
+The trait provides a bunch of helper functions to work with it.
+
+### is
+
+Checks if the passed object realize the current trait.
+
+```typescript
+import iOpen from 'traits/i-open/i-open';
+
+export default class bButton {
+  created() {
+    if (iOpen.is(this)) {
+      this.open();
+    }
+  }
+}
+```
 
 ### initCloseHelpers
 
diff --git a/src/traits/i-open/i-open.ts b/src/traits/i-open/i-open.ts
index 63a9e9df7d..adaabb2cff 100644
--- a/src/traits/i-open/i-open.ts
+++ b/src/traits/i-open/i-open.ts
@@ -66,6 +66,19 @@ export default abstract class iOpen {
 		}
 	};
 
+	/**
+	 * Checks if the passed object realize the current trait
+	 * @param obj
+	 */
+	static is(obj: unknown): obj is iOpen {
+		if (Object.isPrimitive(obj)) {
+			return false;
+		}
+
+		const unsafe = Object.cast<Dictionary>(obj);
+		return Object.isFunction(unsafe.open) && Object.isFunction(unsafe.close);
+	}
+
 	/**
 	 * Initialize default event listeners to close a component by a keyboard or mouse
 	 *