Improve nav samples (#5771)

packages/samples/react/src/components/nav/aria-current.tsx

@@ -2,21 +2,31 @@ import React from 'react';
 import { KolNav } from '@public-ui/react';
 
 import { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const NavAriaCurrent: FC = () => (
-	<KolNav
-		_label="Main navigation"
-		_links={[
-			{
-				_label: 'Homepage',
-				_href: '#/',
-			},
-			{
-				_label: '2 Navigation point',
-				_href: '#/untermenu',
-				_active: true,
-			},
-		]}
-		_ariaCurrentValue="page"
-	/>
+	<>
+		<SampleDescription>
+			<p>
+				Dieses Beispiel zeigt eine Navigation, bei welcher der zweite Link auf die aktuelle Seite verweist. Dadurch wird ihm automatisch das Attribut{' '}
+				<code>aria-current=&quot;page&quot;</code> zugewiesen.
+			</p>
+		</SampleDescription>
+
+		<KolNav
+			class="block w-sm"
+			_label="Main navigation"
+			_links={[
+				{
+					_label: 'Homepage',
+					_href: '#/',
+				},
+				{
+					_label: 'Nav - aria-current (Aktuelle Seite)',
+					_href: '#/nav/aria-current',
+					_active: true,
+				},
+			]}
+		/>
+	</>
 );

packages/samples/react/src/components/nav/basic.tsx

@@ -5,6 +5,7 @@ import { FC } from 'react';
 
 export const NavBasic: FC = () => (
 	<KolNav
+		class="block w-sm"
 		_label="Main navigation"
 		_links={[
 			{
@@ -17,7 +18,6 @@ export const NavBasic: FC = () => (
 				_href: '#/untermenu',
 			},
 			{
-				_active: true,
 				_label: '3 Navigation point',
 				_href: '#abc',
 				_children: [
@@ -31,13 +31,11 @@ export const NavBasic: FC = () => (
 						_target: 'asdasd',
 					},
 					{
-						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#abc',
 						_icons: 'fa-solid fa-cat',
 						_children: [
 							{
-								_active: true,
 								_label: '3.3.1 Navigation point (active)',
 								_href: '#abc',
 							},

packages/samples/react/src/components/nav/horizontal.tsx

@@ -16,7 +16,6 @@ export const NavHorizontal: FC = () => (
 				_href: '#/nav/horizontal',
 			},
 			{
-				_active: true,
 				_label: '3 Navigation point',
 				_href: '#/nav/horizontal',
 				_children: [
@@ -29,12 +28,10 @@ export const NavHorizontal: FC = () => (
 						_target: 'asdasd',
 					},
 					{
-						_active: true,
 						_label: '3.3 Navigation point',
 						_href: '#/nav/horizontal',
 						_children: [
 							{
-								_active: true,
 								_label: '3.3.1 Navigation point (active)',
 								_href: '#abc',
 							},

packages/samples/react/src/components/nav/routes.ts

@@ -1,17 +1,11 @@
 import { Routes } from '../../shares/types';
-
-import { NavActive } from './active';
-
 import { NavAriaCurrent } from './aria-current';
-
 import { NavBasic } from './basic';
-
 import { NavHorizontal } from './horizontal';
 
 export const NAV_ROUTES: Routes = {
 	nav: {
 		basic: NavBasic,
-		active: NavActive,
 		'aria-current': NavAriaCurrent,
 		horizontal: NavHorizontal,
 	},

packages/samples/react/src/scenarios/inputs-get-value.tsx

@@ -70,8 +70,8 @@ export const InputsGetValue: FC = () => {
 			<EventTargetContext.Provider value={eventTarget}>
 				<SampleDescription>
 					<p>
-						This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quout;getValue()&quout; button
-						and prints the current value right next to itself.
+						This sample show how the input components <code>getValue()</code> method works. It&apos;s called when clicking the &quot;getValue()&quot; button and
+						prints the current value right next to itself.
 					</p>
 				</SampleDescription>
 

packages/tools/visual-tests/tests/sample-app.routes.js

@@ -237,11 +237,6 @@ ROUTES.set('modal/basic', {
 		skipFailures: false,
 	},
 });
-ROUTES.set('nav/active', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('nav/aria-current', {
 	axe: {
 		skipFailures: false,