From 079de01dd3858c36d04f7925de0312308a095deb Mon Sep 17 00:00:00 2001 From: Mike Date: Wed, 29 May 2019 20:08:14 +0100 Subject: [PATCH 1/5] feat: add btn-reset class to reset default browser button styles. --- src/Umbraco.Web.UI.Client/src/less/buttons.less | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less index f21c7f310687..91a6c29a1799 100644 --- a/src/Umbraco.Web.UI.Client/src/less/buttons.less +++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less @@ -67,6 +67,21 @@ border-color: rgba(0,0,0,0.09); } +// Button Reset - remove the default browser styles from the button element +// -------------------------------------------------- + +.btn-reset { + padding: 0; + margin: 0; + border: none; + background: none; + color: currentColor; + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; + cursor: pointer; +} + // Button Sizes // -------------------------------------------------- From 40d031650e39682b874dddae09cd944776e5bc84 Mon Sep 17 00:00:00 2001 From: Mike Date: Wed, 29 May 2019 20:08:59 +0100 Subject: [PATCH 2/5] fix: update app-header buttons to use HTML button element --- .../components/application/umb-app-header.less | 15 +++++++-------- .../components/application/umb-app-header.html | 14 ++++++++------ 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less index d4b21e66f0d6..bd1b8ab07ae0 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-header.less @@ -16,27 +16,26 @@ margin-right: -10px; } -.umb-app-header__action a { +.umb-app-header__button { padding-left: 10px; padding-right: 10px; text-decoration: none; display: flex; align-items: center; height: @appHeaderHeight; -} - -.umb-app-header__action a { outline: none; + &:focus { .tabbing-active & { .umb-app-header__action-icon::after { content: ''; position: absolute; z-index:10000; - top: -7px; - left: -7px; + top: 50%; + left: 50%; width: 36px; height: 35px; + transform: translate(-50%, -50%); border-radius: 3px; box-shadow: 0 0 2px @pinkLight, inset 0 0 2px 1px @pinkLight; } @@ -51,7 +50,7 @@ font-size: 22px; } -.umb-app-header__action a:hover .umb-app-header__action-icon, -.umb-app-header__action a:focus .umb-app-header__action-icon { +.umb-app-header__button:hover .umb-app-header__action-icon, +.umb-app-header__button:focus .umb-app-header__action-icon { opacity: 1; } diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html index a14e930b8a82..6e5af1c547ca 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html @@ -1,3 +1,4 @@ +
@@ -10,25 +11,26 @@
From eb5cbcab7d30fbc6fab6efcbd4af27b38a42c83b Mon Sep 17 00:00:00 2001 From: Mike Date: Wed, 29 May 2019 20:09:22 +0100 Subject: [PATCH 3/5] feat: add visually-hidden class --- .../src/less/accessibility/visually-hidden.less | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less diff --git a/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less b/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less new file mode 100644 index 000000000000..592f9dcb21ba --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less @@ -0,0 +1,11 @@ + +// Visually Hidden - used to remove an element from the view, whilst retaining accessibily for screen readers. More info available at https://a11yproject.com/posts/how-to-hide-content/ +// -------------------------------------------------- + +.visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); +} From f186d9a93a436807c6b821c74956c1da8eb370b8 Mon Sep 17 00:00:00 2001 From: Mike Date: Wed, 29 May 2019 20:22:37 +0100 Subject: [PATCH 4/5] feat: add visually-hidden class to belle.less --- src/Umbraco.Web.UI.Client/src/less/belle.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 1e48500bb0a1..6f7554c95307 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -80,6 +80,9 @@ @import "forms/umb-validation-label.less"; +// Umbraco Accessibility +@import "accessibility/visually-hidden.less"; + // Umbraco Components @import "components/application/umb-app-header.less"; @import "components/application/umb-app-content.less"; From b84721857382ad9051145755eb865ae5e60a2955 Mon Sep 17 00:00:00 2001 From: Mike Date: Wed, 29 May 2019 20:22:54 +0100 Subject: [PATCH 5/5] fix: add labels to app header buttons --- .../src/views/components/application/umb-app-header.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html index 6e5af1c547ca..e1c7690dd6df 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html @@ -12,16 +12,18 @@
  • -