diff --git a/assets-src/styles/sass/30-base/_icons.scss b/assets-src/styles/sass/30-base/_icons.scss index 873185d..8265d51 100644 --- a/assets-src/styles/sass/30-base/_icons.scss +++ b/assets-src/styles/sass/30-base/_icons.scss @@ -1,5 +1,8 @@ /*------------------------------------*\ #Icons + + 1. Make SVG using currentColor pick up correct Windows High Contrast Mode color + See: https://www.smashingmagazine.com/2022/06/guide-windows-high-contrast-mode/ \*------------------------------------*/ /** @@ -8,6 +11,10 @@ Icons are sized relative to font size, thanks to the em unit. .icon { block-size: 0.75em; inline-size: 0.75em; + + svg { + forced-color-adjust: auto; /* 1 */ + } } diff --git a/assets-src/styles/sass/50-core-components/_notes.scss b/assets-src/styles/sass/50-core-components/_notes.scss index 33996ce..1f44250 100644 --- a/assets-src/styles/sass/50-core-components/_notes.scss +++ b/assets-src/styles/sass/50-core-components/_notes.scss @@ -1,46 +1,58 @@ /*------------------------------------*\ #Notes - - 1. The `stack` mixin applies flexbox in the column direction, - so we need to prevent things like buttons and links - from stretching horizontally \*------------------------------------*/ .note { - @include stack; - align-items: flex-start; /* 1 */ - border-width: rem(5); + background-position: rem(24) rem(24); + background-repeat: no-repeat; + background-size: rem(32); + border: solid 1px; + border-inline-start-width: 4px; + padding: rem(24); + padding-inline-start: rem(72); > * { max-inline-size: rem($text-measure); + + &:first-child { + margin-block-start: 0; + } + + &:last-child, + li:last-child { + margin-block-end: 0; + } } } .note--error { - border-color: $error-border-color; + background-color: $error-bg-color; + background-image: url(../svg/note-bg-error.svg); + border-color: $error-border-color; + color: $error-color; } .note--info { - border-color: $info-border-color; + background-color: $info-bg-color; + background-image: url(../svg/note-bg-info.svg); + border-color: $info-border-color; + color: $info-color; } .note--success { - border-color: $success-border-color; + background-color: $success-bg-color; + background-image: url(../svg/note-bg-success.svg); + border-color: $success-border-color; + color: $success-color; } .note--warning { - border-color: $warning-border-color; -} - - -.note__heading { - margin-block-start: 0; -} - -.note > *:last-child { - margin-block-end: 0; + background-color: $warning-bg-color; + background-image: url(../svg/note-bg-warning.svg); + border-color: $warning-border-color; + color: $warning-color; } \ No newline at end of file diff --git a/assets-src/svg/note-bg-error.svg b/assets-src/svg/note-bg-error.svg new file mode 100644 index 0000000..d4670e5 --- /dev/null +++ b/assets-src/svg/note-bg-error.svg @@ -0,0 +1 @@ + diff --git a/assets-src/svg/note-bg-info.svg b/assets-src/svg/note-bg-info.svg new file mode 100644 index 0000000..92e6efb --- /dev/null +++ b/assets-src/svg/note-bg-info.svg @@ -0,0 +1 @@ + diff --git a/assets-src/svg/note-bg-success.svg b/assets-src/svg/note-bg-success.svg new file mode 100644 index 0000000..af1bc36 --- /dev/null +++ b/assets-src/svg/note-bg-success.svg @@ -0,0 +1 @@ + diff --git a/assets-src/svg/note-bg-warning.svg b/assets-src/svg/note-bg-warning.svg new file mode 100644 index 0000000..4e5d4aa --- /dev/null +++ b/assets-src/svg/note-bg-warning.svg @@ -0,0 +1 @@ + diff --git a/web/amplify/core-components/notes.html b/web/amplify/core-components/notes.html index 0eb48ed..0b7e6d5 100644 --- a/web/amplify/core-components/notes.html +++ b/web/amplify/core-components/notes.html @@ -124,6 +124,8 @@

Error note heading

Considerations

+

Because the icons are background images, they may not display well in Windows High Contrast Mode. So make sure that the heading text clearly indicates the nature of the note: is it giving a warning? Has there been an error? Or is it confirming something?

+

ARIA live regions

Note the use of role="status" and role="alert". Both create an ARIA live region.

If the content of the note is advisory information not important enough to justify an alert, use role="status". When added to an element, the browser will send out an accessible status event to assistive technologies, which can then notify the user about it.

For error messages, use role="alert". The alert role should read out content that has changed, or bring the user's attention to it immediately, so it should not be used for static content or used regularly. Alerts, by definition, are disruptive. Lots of alerts at once or unnecessary alerts will create a bad user experience.

diff --git a/web/dist/js/countryAutocomplete.js b/web/dist/js/countryAutocomplete.js deleted file mode 100644 index 1d5284a..0000000 --- a/web/dist/js/countryAutocomplete.js +++ /dev/null @@ -1,143 +0,0 @@ -/******/ (function() { // webpackBootstrap -/******/ var __webpack_modules__ = ({ - -/***/ 12: -/***/ (function(module) { - -(function webpackUniversalModuleDefinition(e,t){ true?module.exports=t():0})(window,function(){return function(n){var r={};function o(e){if(r[e])return r[e].exports;var t=r[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=r,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/",o(o.s=37)}([function(e,t,n){var m=n(1),v=n(6),y=n(7),g=n(16),_=n(18),b="prototype",w=function(e,t,n){var r,o,i,u,a=e&w.F,s=e&w.G,l=e&w.S,c=e&w.P,p=e&w.B,f=s?m:l?m[t]||(m[t]={}):(m[t]||{})[b],d=s?v:v[t]||(v[t]={}),h=d[b]||(d[b]={});for(r in s&&(n=t),n)i=((o=!a&&f&&f[r]!==undefined)?f:n)[r],u=p&&o?_(i,m):c&&"function"==typeof i?_(Function.call,i):i,f&&g(f,r,i,e&w.U),d[r]!=i&&y(d,r,u),c&&h[r]!=i&&(h[r]=i)};m.core=v,w.F=1,w.G=2,w.S=4,w.P=8,w.B=16,w.W=32,w.U=64,w.R=128,e.exports=w},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,n){e.exports=!n(4)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},function(e,t,n){"use strict";n.r(t),n.d(t,"h",function(){return r}),n.d(t,"createElement",function(){return r}),n.d(t,"cloneElement",function(){return i}),n.d(t,"Component",function(){return g}),n.d(t,"render",function(){return _}),n.d(t,"rerender",function(){return f}),n.d(t,"options",function(){return E});var s=function s(){},E={},l=[],c=[];function r(e,t){var n,r,o,i,u=c;for(i=arguments.length;2o;)u(r,n=t[o++])&&(~s(i,n)||i.push(n));return i}},function(e,t,n){var r=n(25),o=Math.max,i=Math.min;e.exports=function(e,t){return(e=r(e))<0?o(e+t,0):i(e,t)}},function(e,t){e.exports=!1},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){t.f={}.propertyIsEnumerable},function(e,t,n){var r=n(48);e.exports=function(e,t){return new(r(e))(t)}},function(e,t,n){var r=n(2),o=n(33),i=n(34)("species");e.exports=function(e){var t;return o(e)&&("function"!=typeof(t=e.constructor)||t!==Array&&!o(t.prototype)||(t=undefined),r(t)&&null===(t=t[i])&&(t=undefined)),t===undefined?Array:t}},function(e,t,n){"use strict";var r=n(0),o=n(32)(2);r(r.P+r.F*!n(13)([].filter,!0),"Array",{filter:function(e){return o(this,e,arguments[1])}})},function(e,t,n){var r=n(0);r(r.S,"Array",{isArray:n(33)})},function(e,t,n){"use strict";t.__esModule=!0,t["default"]=void 0,n(14),n(36),n(30),n(31),n(35),n(55),n(58);var $=n(5),J=o(n(60)),r=o(n(61));function o(e){return e&&e.__esModule?e:{"default":e}}function X(){return(X=Object.assign||function(e){for(var t=1;t=r;this.setState({query:a,ariaHint:s}),i||!s&&l&&c?o(a,function(e){var t=0=i&&0=o,P=this.props.showNoOptionsFound&&N&&I&&k&&A,j=n+"__wrapper",L=n+"__input",T=null!==_?" "+L+"--focused":"",B=this.props.showAllValues?" "+L+"--show-all-values":" "+L+"--default",D=n+"__dropdown-arrow-down",F=-1!==_&&null!==_,R=n+"__menu",U=R+"--"+r,V=R+"--"+(w||P?"visible":"hidden"),q=n+"__option",W=n+"__hint",H=this.templateInputValue(x[C]),K=H&&0===H.toLowerCase().indexOf(O.toLowerCase())&&M?O+H.substr(O.length):"",Q=u+"__assistiveHint",z=S?{"aria-describedby":Q}:null;return c&&"string"==typeof(e=y({className:D}))&&(e=(0,$.createElement)("div",{className:n+"__dropdown-arrow-down-wrapper",dangerouslySetInnerHTML:{__html:e}})),(0,$.createElement)("div",{className:j,onKeyDown:this.handleKeyDown},(0,$.createElement)(J["default"],{id:u,length:x.length,queryLength:O.length,minQueryLength:o,selectedOption:this.templateInputValue(x[C]),selectedOptionIndex:C,validChoiceMade:E,isInFocus:null!==this.state.focused,tQueryTooShort:f,tNoResults:d,tSelectedOption:h,tResults:m}),K&&(0,$.createElement)("span",null,(0,$.createElement)("input",{className:W,readonly:!0,tabIndex:"-1",value:K})),(0,$.createElement)("input",X({"aria-expanded":w?"true":"false","aria-activedescendant":!!F&&u+"__option--"+_,"aria-owns":u+"__listbox","aria-autocomplete":this.hasAutoselect()?"both":"list"},z,{autoComplete:"off",className:""+L+T+B,id:u,onClick:function(e){return i.handleInputClick(e)},onBlur:this.handleInputBlur},function G(e){return{onInput:e}}(this.handleInputChange),{onFocus:this.handleInputFocus,name:a,placeholder:s,ref:function(e){i.elementReferences[-1]=e},type:"text",role:"combobox",required:l,value:O})),e,(0,$.createElement)("ul",{className:R+" "+U+" "+V,onMouseLeave:function(e){return i.handleListMouseLeave(e)},id:u+"__listbox",role:"listbox"},x.map(function(e,t){var n=(-1===_?C===t:_===t)&&null===b?" "+q+"--focused":"",r=t%2?" "+q+"--odd":"",o=Y()?" '+(t+1)+" of "+x.length+"":"";return(0,$.createElement)("li",{"aria-selected":_===t?"true":"false",className:""+q+n+r,dangerouslySetInnerHTML:{__html:i.templateSuggestion(e)+o},id:u+"__option--"+t,key:t,onBlur:function(e){return i.handleOptionBlur(e,t)},onClick:function(e){return i.handleOptionClick(e,t)},onMouseDown:i.handleOptionMouseDown,onMouseEnter:function(e){return i.handleOptionMouseEnter(e,t)},ref:function(e){i.elementReferences[t]=e},role:"option",tabIndex:"-1","aria-posinset":t+1,"aria-setsize":x.length})}),P&&(0,$.createElement)("li",{className:q+" "+q+"--no-results"},p())),(0,$.createElement)("span",{id:Q,style:{display:"none"}},v()))},e}($.Component);(t["default"]=a).defaultProps={autoselect:!1,cssNamespace:"autocomplete",defaultValue:"",displayMenu:"inline",minLength:0,name:"input-autocomplete",placeholder:"",onConfirm:function(){},confirmOnBlur:!0,showNoOptionsFound:!0,showAllValues:!1,required:!1,tNoResults:function(){return"No results found"},tAssistiveHint:function(){return"When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures."},dropdownArrow:r["default"]}},function(e,t,r){var o=r(9),i=r(53),u=r(28),a=r(26)("IE_PROTO"),s=function(){},l="prototype",c=function(){var e,t=r(15)("iframe"),n=u.length;for(t.style.display="none",r(54).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("