From 7b8510d47764ec7781d6f1216180eb274afd7809 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 24 Apr 2020 11:21:10 +0200 Subject: [PATCH 1/8] Create email input component See #137 --- resources/views/forms/email.blade.php | 4 ++ tests/Feature/FormViewTests/EmailTest.php | 48 +++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 resources/views/forms/email.blade.php create mode 100644 tests/Feature/FormViewTests/EmailTest.php diff --git a/resources/views/forms/email.blade.php b/resources/views/forms/email.blade.php new file mode 100644 index 00000000..9a0e7981 --- /dev/null +++ b/resources/views/forms/email.blade.php @@ -0,0 +1,4 @@ +@include('kontour::forms.input', [ +'type' => $type ?? 'email', +'name' => $name ?? 'email', +]) \ No newline at end of file diff --git a/tests/Feature/FormViewTests/EmailTest.php b/tests/Feature/FormViewTests/EmailTest.php new file mode 100644 index 00000000..d4d3072c --- /dev/null +++ b/tests/Feature/FormViewTests/EmailTest.php @@ -0,0 +1,48 @@ + new MessageBag, + ])->render(); + + $this->assertRegExp('//', $output); + } + + public function test_input_type_can_be_specified() + { + $output = View::make('kontour::forms.email', [ + 'errors' => new MessageBag, + 'type' => 'text', + ])->render(); + + $this->assertRegExp('//', $output); + } + + public function test_input_name_defaults_to_email() + { + $output = View::make('kontour::forms.email', [ + 'errors' => new MessageBag, + ])->render(); + + $this->assertRegExp('//', $output); + } + + public function test_input_name_can_be_specified() + { + $output = View::make('kontour::forms.email', [ + 'name' => 'test', + 'errors' => new MessageBag, + ])->render(); + + $this->assertRegExp('//', $output); + } +} From a800d53f606c1fce9186570aef3130b8dc327b36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 24 Apr 2020 11:57:03 +0200 Subject: [PATCH 2/8] Test default attributes --- tests/Feature/FormViewTests/EmailTest.php | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/tests/Feature/FormViewTests/EmailTest.php b/tests/Feature/FormViewTests/EmailTest.php index d4d3072c..b183c59f 100644 --- a/tests/Feature/FormViewTests/EmailTest.php +++ b/tests/Feature/FormViewTests/EmailTest.php @@ -8,6 +8,12 @@ class EmailTest extends IntegrationTest { + public static $defaultEmailAttributes = [ + 'autocomplete' => 'email', + 'autocapitalize' => "none", + 'autocorrect' => "off", + ]; + public function test_input_type_defaults_to_email() { $output = View::make('kontour::forms.email', [ @@ -45,4 +51,15 @@ public function test_input_name_can_be_specified() $this->assertRegExp('//', $output); } + + public function test_email_input_has_default_attributes() + { + $output = View::make('kontour::forms.email', [ + 'errors' => new MessageBag, + ])->render(); + + foreach (self::$defaultEmailAttributes as $attribute => $default) { + $this->assertStringContainsString("$attribute=\"$default\"", $output); + } + } } From fac6c03ed7e7d757720b4941a92655bccb4803b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 24 Apr 2020 15:30:11 +0200 Subject: [PATCH 3/8] Merge controll attributes for email input --- resources/views/forms/email.blade.php | 9 ++++---- tests/Feature/FormViewTests/EmailTest.php | 28 +++++++++++++++++++++-- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/resources/views/forms/email.blade.php b/resources/views/forms/email.blade.php index 9a0e7981..e6f6e946 100644 --- a/resources/views/forms/email.blade.php +++ b/resources/views/forms/email.blade.php @@ -1,4 +1,5 @@ -@include('kontour::forms.input', [ -'type' => $type ?? 'email', -'name' => $name ?? 'email', -]) \ No newline at end of file +@include('kontour::forms.input', ['type' => $type ?? 'email', 'name' => $name ?? 'email', +'controlAttributes' => array_merge( +['autocomplete' => 'email', 'autocapitalize' => 'none', 'autocorrect' => 'off'], +$controlAttributes ?? [] +)]) \ No newline at end of file diff --git a/tests/Feature/FormViewTests/EmailTest.php b/tests/Feature/FormViewTests/EmailTest.php index b183c59f..93b3fa3b 100644 --- a/tests/Feature/FormViewTests/EmailTest.php +++ b/tests/Feature/FormViewTests/EmailTest.php @@ -10,8 +10,8 @@ class EmailTest extends IntegrationTest { public static $defaultEmailAttributes = [ 'autocomplete' => 'email', - 'autocapitalize' => "none", - 'autocorrect' => "off", + 'autocapitalize' => 'none', + 'autocorrect' => 'off', ]; public function test_input_type_defaults_to_email() @@ -62,4 +62,28 @@ public function test_email_input_has_default_attributes() $this->assertStringContainsString("$attribute=\"$default\"", $output); } } + + public function test_control_attributes_can_be_set() + { + $output = View::make('kontour::forms.email', [ + 'errors' => new MessageBag, + 'controlAttributes' => [ + 'autocomplete' => 'off', + 'autocapitalize' => 'on', + 'autocorrect' => 'on', + 'required', + 'a' => 'b', + ] + ])->render(); + + $this->assertRegExp('/\s+autocomplete="off"\W/', $output); + $this->assertRegExp('/\s+autocapitalize="on"\W/', $output); + $this->assertRegExp('/\s+autocorrect="on"\W/', $output); + $this->assertRegExp('/\s+required\W/', $output); + $this->assertRegExp('/\s+a="b"\W/', $output); + + foreach (self::$defaultEmailAttributes as $attribute => $default) { + $this->assertStringNotContainsString("$attribute=\"$default\"", $output); + } + } } From 3cc09e7aef78bdcbf9897e15a74f7475d1de6fba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 24 Apr 2020 15:34:05 +0200 Subject: [PATCH 4/8] Use email input in auth forms Closes #137 --- resources/views/auth/login.blade.php | 2 +- resources/views/auth/passwords/email.blade.php | 2 +- resources/views/auth/passwords/reset.blade.php | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index b8f81b4a..1cfee68d 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -11,7 +11,7 @@
{{ __('Login') }}
@csrf - @include('kontour::forms.input', ['name' => 'email', 'type' => 'email', 'controlAttributes' => ['required', 'autocomplete' => 'email']]) + @include('kontour::forms.email', ['controlAttributes' => ['required']]) @include('kontour::forms.input', ['name' => 'password', 'type' => 'password', 'controlAttributes' => ['required', 'autocomplete' => 'current-password']]) @include('kontour::forms.checkbox', ['name' => 'remember', 'label' => __('Remember Me')]) @component('kontour::buttons.generic') diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php index 3fe558a1..c730869a 100644 --- a/resources/views/auth/passwords/email.blade.php +++ b/resources/views/auth/passwords/email.blade.php @@ -13,7 +13,7 @@ @csrf - @include('kontour::forms.input', ['name' => 'email', 'type' => 'email', 'controlAttributes' => ['required', 'autocomplete' => 'email']]) + @include('kontour::forms.email', ['controlAttributes' => ['required']]) @component('kontour::buttons.generic') {{ __('Send Password Reset Link') }} @endcomponent diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php index 311f96e9..09e47e1c 100644 --- a/resources/views/auth/passwords/reset.blade.php +++ b/resources/views/auth/passwords/reset.blade.php @@ -11,7 +11,7 @@ @csrf - @include('kontour::forms.input', ['name' => 'email', 'type' => 'email', 'controlAttributes' => ['required', 'autocomplete' => 'email']]) + @include('kontour::forms.email', ['controlAttributes' => ['required']]) @include('kontour::forms.input', ['name' => 'password', 'type' => 'password', 'controlAttributes' => ['required', 'autocomplete' => 'new-password']]) @include('kontour::forms.input', ['name' => 'password_confirmation', 'type' => 'password', 'controlAttributes' => ['required', 'autocomplete' => 'new-password']]) @component('kontour::buttons.generic') From 6e026d5bf9858ede0ce38eb289b05caf14dff9ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 24 Apr 2020 16:36:27 +0200 Subject: [PATCH 5/8] Merge existing aria-describedby with error Closes #152 --- docs/form-templates.md | 4 ++-- resources/views/forms/partials/inputAttributes.blade.php | 6 +++--- tests/Feature/FormViewTests/InputAttributesTest.php | 9 ++++----- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/form-templates.md b/docs/form-templates.md index 4d505d0f..2a3caefd 100644 --- a/docs/form-templates.md +++ b/docs/form-templates.md @@ -77,12 +77,12 @@ The `autofocusControlId` should be explicitly passed to each input when using ## Common parameters All inputs need at least the `$name` parameter -and optional `$placeholder` and `$ariaDescribedById` parameters. +and optional `$placeholder` parameters. All form views take a `$controlAttributes` `array` that can be used to set any additional HTML attributes on the form control element. This can be useful for setting -`required`, `disabled`, `readonly`, `autocomplete`, +`required`, `disabled`, `readonly`, `autocomplete`, `aria-describedby`, and other attributes specific to the [different input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form__types). diff --git a/resources/views/forms/partials/inputAttributes.blade.php b/resources/views/forms/partials/inputAttributes.blade.php index e658b59c..55455bf2 100644 --- a/resources/views/forms/partials/inputAttributes.blade.php +++ b/resources/views/forms/partials/inputAttributes.blade.php @@ -3,9 +3,9 @@ id="{{ $controlId }}" @if($errors->hasAny($errorsKeys ?? $name)) aria-invalid="true" -aria-describedby="{{ $errorsId }}" -@elseif(isset($ariaDescribedById)) -aria-describedby="{{ $ariaDescribedById }}" + @endif @if(!empty($autofocusControlId) and $autofocusControlId == $controlId) autofocus diff --git a/tests/Feature/FormViewTests/InputAttributesTest.php b/tests/Feature/FormViewTests/InputAttributesTest.php index e1009417..84add51e 100644 --- a/tests/Feature/FormViewTests/InputAttributesTest.php +++ b/tests/Feature/FormViewTests/InputAttributesTest.php @@ -93,24 +93,23 @@ public function test_aria_describedby_can_be_set() 'name' => 'testName', 'controlId' => 'testId', 'errors' => new MessageBag, - 'ariaDescribedById' => 'descriptionId', + 'controlAttributes' => ['aria-describedby' => 'descriptionId'], ])->render(); $this->assertRegExp('/\s+aria-describedby="descriptionId"\W/', $output); } - public function test_error_input_overwriting_aria_describedby() + public function test_error_input_prepending_aria_describedby() { $output = View::make('kontour::forms.partials.inputAttributes', [ 'name' => 'testName', 'controlId' => 'testId', 'errors' => new MessageBag(['testName' => ['A message']]), 'errorsId' => 'errorsId', - 'ariaDescribedById' => 'descriptionId', + 'controlAttributes' => ['aria-describedby' => 'descriptionId'], ])->render(); - $this->assertRegExp('/\s+aria-describedby="errorsId"\W/', $output); - $this->assertNotRegExp('/aria-describedby="descriptionId"/', $output); + $this->assertRegExp('/\s+aria-describedby="errorsId\sdescriptionId"\W/', $output); } public function test_control_attributes() From 7225b45345f3eb1c3a7eb0e87766aac601a854fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 24 Apr 2020 16:53:17 +0200 Subject: [PATCH 6/8] Refactor input attributes --- .../forms/partials/inputAttributes.blade.php | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/resources/views/forms/partials/inputAttributes.blade.php b/resources/views/forms/partials/inputAttributes.blade.php index 55455bf2..079f91e1 100644 --- a/resources/views/forms/partials/inputAttributes.blade.php +++ b/resources/views/forms/partials/inputAttributes.blade.php @@ -1,20 +1,19 @@ @include('kontour::forms.partials.nameAttribute') -id="{{ $controlId }}" -@if($errors->hasAny($errorsKeys ?? $name)) -aria-invalid="true" hasAny($errorsKeys ?? $name)) { + $controlAttributes['aria-invalid'] = "true"; + $controlAttributes['aria-describedby'] = array_merge([$errorsId], [$controlAttributes['aria-describedby'] ?? []]); + } + if(!empty($autofocusControlId) and $autofocusControlId == $controlId) { + $controlAttributes[] = 'autofocus'; + } + if(!empty($placeholder)) { + $controlAttributes['placeholder'] = $placeholder; + } ?> -@endif -@if(!empty($autofocusControlId) and $autofocusControlId == $controlId) -autofocus -@endif -@if(!empty($placeholder)) -placeholder="{{ $placeholder }}" -@endif -@if(isset($controlAttributes) and is_iterable($controlAttributes)) @foreach($controlAttributes as $attributeName => $attributeValue) @include('kontour::partials.attribute') -@endforeach -@endif \ No newline at end of file +@endforeach \ No newline at end of file From 1529dfbe320fad8b96c897ea68c171781eae480f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 24 Apr 2020 17:01:44 +0200 Subject: [PATCH 7/8] Avoid duplicate autofocus attribute --- resources/views/forms/partials/inputAttributes.blade.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/views/forms/partials/inputAttributes.blade.php b/resources/views/forms/partials/inputAttributes.blade.php index 079f91e1..5388ff57 100644 --- a/resources/views/forms/partials/inputAttributes.blade.php +++ b/resources/views/forms/partials/inputAttributes.blade.php @@ -7,7 +7,7 @@ $controlAttributes['aria-invalid'] = "true"; $controlAttributes['aria-describedby'] = array_merge([$errorsId], [$controlAttributes['aria-describedby'] ?? []]); } - if(!empty($autofocusControlId) and $autofocusControlId == $controlId) { + if(!empty($autofocusControlId) and $autofocusControlId == $controlId and !in_array('autofocus', $controlAttributes)) { $controlAttributes[] = 'autofocus'; } if(!empty($placeholder)) { From b2e47e34e543d8585542f5a9a53a399f2a612f46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Nilsved?= Date: Fri, 1 May 2020 16:38:09 +0200 Subject: [PATCH 8/8] Use role="list" to keep list-semantics in safari https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html#a-new-alternative Closes #142 --- resources/views/forms/partials/errors.blade.php | 2 +- resources/views/widgets/crumbtrail.blade.php | 2 +- resources/views/widgets/itemHistory.blade.php | 2 +- resources/views/widgets/menu.blade.php | 4 ++-- resources/views/widgets/message.blade.php | 2 +- resources/views/widgets/personalRecentVisits.blade.php | 2 +- resources/views/widgets/teamRecentVisits.blade.php | 2 +- tests/Feature/UserlandControllerTest.php | 2 +- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/resources/views/forms/partials/errors.blade.php b/resources/views/forms/partials/errors.blade.php index 7eeea903..30c7f073 100644 --- a/resources/views/forms/partials/errors.blade.php +++ b/resources/views/forms/partials/errors.blade.php @@ -1,5 +1,5 @@ @if($errors->hasAny($errorsKeys = $errorsKeys ?? $name)) -
    +
      @foreach(\Illuminate\Support\Arr::wrap($errorsKeys) as $key) @foreach(\Illuminate\Support\Arr::flatten($errors->get($key)) as $message)
    • {{ $message }}
    • diff --git a/resources/views/widgets/crumbtrail.blade.php b/resources/views/widgets/crumbtrail.blade.php index fc660a51..ceecbf31 100644 --- a/resources/views/widgets/crumbtrail.blade.php +++ b/resources/views/widgets/crumbtrail.blade.php @@ -1,5 +1,5 @@