Merge pull request #5077 from marcoscv-work/accessibility2

feat(clayui.com): Add key shortcut keys by platform type and hiding it in mobile
liferay · Sep 7, 2022 · 74e0edd · 74e0edd
2 parents 2cb4508 + e6a5561
commit 74e0edd
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 18 deletions.
diff --git a/clayui.com/src/components/LayoutNav/Search.js b/clayui.com/src/components/LayoutNav/Search.js
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 
 export default (props) => {
+	const autocompleteRef = useRef();
 	useEffect(() => {
 		if (window.docsearch) {
 			window.docsearch({
@@ -14,27 +15,41 @@ export default (props) => {
 				inputSelector: '#algolia-doc-search',
 			});
 		}
+
+		const platform = (
+			navigator?.userAgentData?.platform || navigator?.platform
+		).toLowerCase();
+
+		if (platform.includes('mac')) {
+			autocompleteRef.current.setAttribute('data-platform', 'mac');
+		} else if (platform.includes('linux')) {
+			autocompleteRef.current.setAttribute('data-platform', 'linux');
+		}
 	}, []);
 
 	return (
-		<div className="page-autocomplete">
-			<div className="input-group">
-				<input
-					className="form-control"
-					id="algolia-doc-search"
-					name="q"
-					placeholder={props.placeholder}
-					required
-					type="text"
-				/>
+		<div className="platform" ref={autocompleteRef}>
+			<div className="page-autocomplete">
+				<div className="input-group">
+					<input
+						className="form-control"
+						id="algolia-doc-search"
+						name="q"
+						placeholder={props.placeholder}
+						required
+						type="text"
+					/>
 
-				<span className="input-group-addon">
-					<kbd className="mr-2">K</kbd>
+					<span aria-hidden="true" className="input-group-addon">
+						<span className="c-kbd c-kbd-sm d-md-block d-none mr-2">
+							<kbd className="c-kbd">K</kbd>
+						</span>
 
-					<svg className="lexicon-icon">
-						<use xlinkHref="/images/icons/icons.svg#search" />
-					</svg>
-				</span>
+						<svg className="lexicon-icon">
+							<use xlinkHref="/images/icons/icons.svg#search" />
+						</svg>
+					</span>
+				</div>
 			</div>
 		</div>
 	);

diff --git a/clayui.com/src/styles/_autocomplete.scss b/clayui.com/src/styles/_autocomplete.scss
@@ -16,6 +16,20 @@
 			top: 50%;
 			z-index: 9;
 
+			> .c-kbd {
+				&:before {
+					content: 'ctrl + ';
+				}
+
+				@at-root [data-platform='mac'] &:before {
+					content: 'ctrl + ⌥ + ';
+				}
+
+				@at-root [data-platform='linux'] &:before {
+					content: 'alt + ';
+				}
+			}
+
 			.lexicon-icon {
 				margin-top: 0;
 			}
@@ -25,7 +39,11 @@
 			background-color: white;
 			border-radius: 4px;
 			padding-left: 0.875rem;
-			padding-right: $base-size * 2.5;
+			padding-right: $base-size * 4;
+
+			@at-root [data-platform='mac'] & {
+				padding-right: $base-size * 5;
+			}
 
 			&::-moz-placeholder {
 				opacity: 1;