Refactor-a11y-option (#618)

* refactor: ♻️ updated styles for better accessiblity

* chore: 🤖 dependency updates

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-select-component",
-  "version": "4.2.9",
+  "version": "4.3.0",
   "description": "Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all",
   "author": "harshzalavadiya",
   "license": "MIT",
@@ -23,28 +23,28 @@
   "dependencies": {},
   "devDependencies": {
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@types/react": "^18.0.10",
-    "@types/react-dom": "^18.0.5",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "eslint": "8.16.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "eslint": "8.20.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-storybook": "^0.5.12",
+    "eslint-plugin-storybook": "^0.6.1",
     "postcss": "^8.4.14",
-    "prettier": "^2.6.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "size-limit": "^7.0.8",
     "storybook-addon-turbo-build": "^1.1.0",
-    "tsup": "^6.0.1",
-    "typescript": "^4.7.2"
+    "tsup": "^6.1.3",
+    "typescript": "^4.7.4"
   },
   "browserslist": [
     "defaults",

src/style.css

@@ -95,11 +95,11 @@
   cursor: pointer;
   display: block;
   padding: var(--rmsc-p);
-  outline: 0;
+  outline-offset: -1px;
+  outline-color: var(--rmsc-primary);
 }
 
-.rmsc .select-item:hover,
-.rmsc .select-item:focus {
+.rmsc .select-item:hover {
   background: var(--rmsc-hover);
 }
 
@@ -126,6 +126,11 @@
   width: 100%;
   outline: 0;
   border: 0;
+  font-size: 1em;
+}
+
+.rmsc .search input:focus {
+  background: var(--rmsc-hover);
 }
 
 .rmsc .search-clear-button {