diff --git a/resources/css/kontour.css b/resources/css/kontour.css index 57622c7c..3d89ecd6 100644 --- a/resources/css/kontour.css +++ b/resources/css/kontour.css @@ -1 +1 @@ -html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:absolute;max-width:33%;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only,.sr-only-focusable{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal} \ No newline at end of file +html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}*,body{margin:0;background-color:#fff;color:#000}*+*{margin-top:1rem}a,abbr,acronym,audio *,b,bdo,big,br,cite,code,del,dfn,dt+*,em,figure *,h2+*,h3+*,h4+*,h5+*,h6+*,header+:last-child,hgroup h1+*,i,ins,kbd,label,label+*,legend+*,li+*,map,map *,object *,picture *,q,samp,select *,small,span,strong,sub,sup,table *,time,tt,var,video *{margin-top:0}img{max-width:100%;height:auto}dl>*{-webkit-column-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}dl>div{margin-top:0;padding-bottom:1rem}dt{-webkit-column-break-after:avoid;-moz-column-break-after:avoid;break-after:avoid}dd{-webkit-column-break-before:avoid;-moz-column-break-before:avoid;break-before:avoid}body{font-family:system-ui,sans-serif;line-height:1.6}header{border-bottom:1px solid #e6e6e6}body>main{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6}body>footer{background:#f2f2f2}[aria-current=page],[aria-current=page] a{text-decoration:none}[data-kontour-section=kontourHeader]>:first-child{font-size:1.5em;color:grey;text-decoration:none}[data-kontour-section=kontourNav]>button rect{fill:currentColor}[data-kontour-section=kontourNav] [aria-expanded=true] svg .bottom,[data-kontour-section=kontourNav] [aria-expanded=true] svg .top{visibility:hidden}[data-kontour-widget] header{color:grey}[data-kontour-widget] a{color:inherit}[data-kontour-section=kontourStickyActions]{background-color:#f2f2f2;color:#000;padding:1rem}body{min-height:100vh;display:-webkit-box;display:flex;flex-wrap:wrap}body>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}body>header{flex-basis:100%;min-height:4rem;max-height:-webkit-max-content;max-height:-moz-max-content;max-height:max-content}body>main{-webkit-box-flex:1000;flex-grow:1000;flex-basis:45ch;min-height:calc(100vh - 10rem)}body>footer{flex-basis:100%}#skip-to-content{position:fixed;max-width:33%;top:.5rem;left:0;right:0;margin-left:auto;margin-right:auto;background:#fff;padding:1ch;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content:center;text-align:center}#skip-to-content,[data-kontour-section=kontourHeader]{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-section=kontourHeader]{flex-wrap:wrap;-webkit-box-pack:end;justify-content:flex-end;padding:0}[data-kontour-section=kontourHeader] *{margin-top:0}[data-kontour-section=kontourHeader]>*{padding:.5rem}[data-kontour-section=kontourHeader]>:first-child{margin-right:auto}[data-kontour-menu-expanded] [data-kontour-section=kontourHeader]>:first-child{margin-left:4rem}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]{flex-basis:100%}[data-kontour-section=kontourNav]>button{width:4rem;padding:1ch;line-height:0}[data-kontour-menu-expanded] [data-kontour-section=kontourNav]>button{position:absolute;top:0;left:0}[data-kontour-section=kontourNav]>button+*{margin-top:0}[data-kontour-section=kontourWidgets]{-webkit-box-flex:500;flex-grow:500;flex-basis:0;display:-webkit-box;display:flex;flex-wrap:wrap;align-content:flex-start;padding:0}[data-kontour-section=kontourWidgets]>*{-webkit-box-flex:1;flex-grow:1;margin-top:0;padding:1rem}[data-kontour-section=kontourFooter]{display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:baseline;align-items:baseline;align-content:center;padding:.5rem}[data-kontour-section=kontourFooter]>*{margin:.25rem;padding:.25rem;text-align:center}header[data-kontour-section=kontourToolHeader]+*{margin-top:1rem}[data-kontour-section=kontourStickyActions]{position:-webkit-sticky;position:sticky;top:0;bottom:0}.error,.list-unstyled,[data-kontour-widget] ol,[data-kontour-widget] ul,[id*=error],[id*=Error],ol[data-kontour-widget],ul[data-kontour-widget]{list-style:none;padding:0}.button-reset,[data-kontour-section=kontourNav]>button,[data-kontour-widget=userAccount] button{border:none;background:none;color:inherit}.columns-narrow{-webkit-column-width:20ch;-moz-column-width:20ch;column-width:20ch}.columns-readable{-webkit-column-width:45ch;-moz-column-width:45ch;column-width:45ch}button,input,select,textarea{font-size:inherit;line-height:inherit}[type=email],[type=password],[type=text],fieldset,textarea{width:100%;max-width:65ch}[type=email],[type=password]{max-width:35ch}input,select,textarea{border-width:1px;padding:.1em}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{border-color:red;border-style:solid}[data-kontour-unload-prevented=true] input[data-kontour-dirty=true],[data-kontour-unload-prevented=true] select[data-kontour-dirty=true],[data-kontour-unload-prevented=true] textarea[data-kontour-dirty=true]{border-color:orange;border-style:solid}.error,[id*=error],[id*=Error]{margin-top:0;color:red}fieldset{border:1px solid #e6e6e6}[data-checked-radio] label{display:block}.button,.button-destructive,.button-link,.button-primary,[data-kontour-button=create],[data-kontour-button=destroy],[data-kontour-button=link],[data-kontour-button=update],[data-kontour-button]{color:#00f;background:transparent;display:inline-block;border:1px solid;border-radius:.1em;text-decoration:none;padding-top:.1em;padding-bottom:.1em}.button-destructive:focus,.button-link:focus,.button-primary:focus,.button:focus,[data-kontour-button=create]:focus,[data-kontour-button=destroy]:focus,[data-kontour-button=link]:focus,[data-kontour-button=update]:focus,[data-kontour-button]:focus{outline:none;box-shadow:0 0 0 .2rem #99f}.button-destructive:active,.button-link:active,.button-primary:active,.button:active,[data-kontour-button=create]:active,[data-kontour-button=destroy]:active,[data-kontour-button=link]:active,[data-kontour-button=update]:active,[data-kontour-button]:active{color:#00f;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive:disabled,.button-link:disabled,.button-primary:disabled,.button.disabled,.button:disabled,.disabled.button-destructive,.disabled.button-link,.disabled.button-primary,.disabled[data-kontour-button=create],.disabled[data-kontour-button=destroy],.disabled[data-kontour-button=link],.disabled[data-kontour-button=update],.disabled[data-kontour-button],[data-kontour-button=create]:disabled,[data-kontour-button=destroy]:disabled,[data-kontour-button=link]:disabled,[data-kontour-button=update]:disabled,[data-kontour-button]:disabled,fieldset:disabled .button,fieldset:disabled .button-destructive,fieldset:disabled .button-link,fieldset:disabled .button-primary,fieldset:disabled [data-kontour-button=create],fieldset:disabled [data-kontour-button=destroy],fieldset:disabled [data-kontour-button=link],fieldset:disabled [data-kontour-button=update],fieldset:disabled [data-kontour-button]{pointer-events:none;background-color:grey;border-color:transparent;box-shadow:none}.button-primary,[data-kontour-button=create],[data-kontour-button=update]{color:#fff;background-color:#00f;border-color:#00f}.button-primary:active,[data-kontour-button=create]:active,[data-kontour-button=update]:active{color:#fff}.button-destructive,[data-kontour-button=destroy]{color:red;border-color:red}.button-destructive:focus,[data-kontour-button=destroy]:focus{box-shadow:0 0 0 .2rem #f99}.button-destructive:active,[data-kontour-button=destroy]:active{color:red;box-shadow:inset 0 2px 4px rgba(0,0,0,.05)}.button-destructive.button-primary,.button-destructive[data-kontour-button=create],.button-destructive[data-kontour-button=update],.button-primary[data-kontour-button=destroy],[data-kontour-button=create][data-kontour-button=destroy],[data-kontour-button=update][data-kontour-button=destroy]{background-color:red;border-color:red;color:#fff}.button-destructive.button-primary:active,.button-destructive[data-kontour-button=create]:active,.button-destructive[data-kontour-button=update]:active,.button-primary[data-kontour-button=destroy]:active,[data-kontour-button=create][data-kontour-button=destroy]:active,[data-kontour-button=update][data-kontour-button=destroy]:active{color:#fff}.button-link,[data-kontour-button=link]{border-color:transparent;background-color:transparent;text-decoration:underline}.button-link:focus,[data-kontour-button=link]:focus{text-decoration:none}.button-link:active,[data-kontour-button=link]:active{box-shadow:none;text-decoration:none}.button-link:disabled,[data-kontour-button=link]:disabled{text-decoration:none}[data-kontour-widget=crumbtrail]>*{display:-webkit-box;display:flex;flex-wrap:wrap;list-style:none;padding:0}[data-kontour-widget=crumbtrail] li{white-space:pre-line}[data-kontour-widget=crumbtrail] *+li:before{content:"\2192";padding-left:.5rem;padding-right:.5rem}[data-kontour-widget=menu] small{color:grey}[data-kontour-widget=menu] li ul{margin-top:0;padding-left:1ch}[data-kontour-widget=menu] [aria-current]>a{position:relative}[data-kontour-widget=menu] [aria-current]>a:before{content:" \2023";position:absolute;left:calc(100% + .5ch)}[data-kontour-widget=userAccount]{color:grey;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center}[data-kontour-widget=userAccount] form{line-height:0}[data-kontour-widget=userAccount] button{width:3ch;padding:0;margin-left:.5ch}[data-kontour-widget=userAccount] polygon{fill:currentColor}[data-kontour-widget=message] [data-kontour-message-level=info],[data-kontour-widget=message] [data-kontour-message-level=success]{color:green}[data-kontour-widget=message] [data-kontour-message-level=warning]{color:orange}[data-kontour-widget=message] [data-kontour-message-level=error]{color:red}[data-kontour-widget$=RecentVisits] a{white-space:nowrap;overflow:hidden;text-overflow:fade;display:inline-block;max-width:30ch}.sr-only:not(:focus):not(:active){position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap}.sr-only-focusable:not(:focus-within):not(:active){position:absolute;-webkit-clip-path:inset(50%);clip-path:inset(50%)} \ No newline at end of file diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss index d64151e9..434b8a72 100644 --- a/resources/sass/_layout.scss +++ b/resources/sass/_layout.scss @@ -30,8 +30,9 @@ body { } #skip-to-content { - position: absolute; + position: fixed; max-width: 33%; + top: $kontour-spacing-base/2; left: 0; right: 0; margin-left: auto; diff --git a/resources/sass/_screenreaders.scss b/resources/sass/_screenreaders.scss index d425be17..071bf24a 100644 --- a/resources/sass/_screenreaders.scss +++ b/resources/sass/_screenreaders.scss @@ -1,25 +1,35 @@ // Utilities for screenreaders -.sr-only { +/* + * Visually hide an element, until it receives focus. + * + * This has good browser compatibility but doesn't work when + * the element has any focusable descendants. + * + * Supports IE9+ + */ +.sr-only:not(:focus):not(:active) { position: absolute; + clip: rect(0 0 0 0); + clip-path: inset(50%); width: 1px; height: 1px; + margin: -1px; padding: 0; + border: 0; overflow: hidden; - clip: rect(0, 0, 0, 0); white-space: nowrap; - border: 0; } -.sr-only-focusable { - @extend .sr-only; - - &:focus { - position: static; - width: auto; - height: auto; - overflow: visible; - clip: auto; - white-space: normal; - } +/* + * Visually hide any element until it, or anything inside, receives focus. + * + * This can be useful to hide a non-interactive element grouping + * some interactive elements, revealing them all together. + * + * Warning: Has no effect in IE or pre-chromium Edge! + */ +.sr-only-focusable:not(:focus-within):not(:active) { + position: absolute; + clip-path: inset(50%); } diff --git a/resources/views/layouts/master.blade.php b/resources/views/layouts/master.blade.php index 750071e9..1cfc0e9d 100644 --- a/resources/views/layouts/master.blade.php +++ b/resources/views/layouts/master.blade.php @@ -4,7 +4,7 @@ @extends('kontour::layouts.html') @section('body') - +
@section('kontourHeader') diff --git a/tests/Browser/SkipToContentTest.php b/tests/Browser/SkipToContentTest.php index bf34a14f..07290e2d 100644 --- a/tests/Browser/SkipToContentTest.php +++ b/tests/Browser/SkipToContentTest.php @@ -22,12 +22,12 @@ public function test_skip_to_content() $routeManager = $this->app->make(\Kontenta\Kontour\Contracts\AdminRouteManager::class); $browser->loginAs($this->user, 'admin')->visit($routeManager->indexUrl()); - $this->assertEquals('absolute', $browser->element($this->element)->getCSSValue('position')); + $this->assertEquals('inset(50%)', $browser->element($this->element)->getCSSValue('clip-path')); $browser->keys('', '{tab}') ->assertFocused($this->element); - $this->assertEquals('absolute', $browser->element($this->element)->getCSSValue('position')); + $this->assertEquals('none', $browser->element($this->element)->getCSSValue('clip-path')); $browser->keys($this->element, '{enter}') ->assertNotFocused($this->element)