From 923bde3a31d73cdb3b154e0f3c98b64142492074 Mon Sep 17 00:00:00 2001 From: Rachel Breeze Date: Sun, 16 Jun 2019 13:40:02 +0100 Subject: [PATCH 1/3] feat: add visually-hidden class to belle.less --- .../src/less/accessibility/visually-hidden.less | 9 +++++++++ src/Umbraco.Web.UI.Client/src/less/belle.less | 3 +++ 2 files changed, 12 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..82abd8c96c26 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less @@ -0,0 +1,9 @@ +// 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); +} 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 f00b64a95ee0fdb972bf46254b8c8a4ee1fe4aa5 Mon Sep 17 00:00:00 2001 From: Rachel Breeze Date: Fri, 21 Jun 2019 17:43:34 +0100 Subject: [PATCH 2/3] Based on the comments on this PR https://github.com/umbraco/Umbraco-CMS/pull/5664 renamed visually-hidden to sr-only --- .../src/less/accessibility/sr-only.less | 12 ++++++++++++ .../src/less/accessibility/visually-hidden.less | 9 --------- 2 files changed, 12 insertions(+), 9 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/less/accessibility/sr-only.less delete mode 100644 src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less diff --git a/src/Umbraco.Web.UI.Client/src/less/accessibility/sr-only.less b/src/Umbraco.Web.UI.Client/src/less/accessibility/sr-only.less new file mode 100644 index 000000000000..d69f7c8a1e05 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/accessibility/sr-only.less @@ -0,0 +1,12 @@ +// sr-only - based on the boot strap naming conventions used to remove an element from the view, whilst retaining accessibily for screen readers. More info available at https://getbootstrap.com/docs/4.0/utilities/screenreaders/ +// -------------------------------------------------- +sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} 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 deleted file mode 100644 index 82abd8c96c26..000000000000 --- a/src/Umbraco.Web.UI.Client/src/less/accessibility/visually-hidden.less +++ /dev/null @@ -1,9 +0,0 @@ -// 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 9bdd6e4fbe71166bda21ee19a209b6d1915f7793 Mon Sep 17 00:00:00 2001 From: Rachel Breeze Date: Fri, 21 Jun 2019 17:43:51 +0100 Subject: [PATCH 3/3] Based on the comments on this PR https://github.com/umbraco/Umbraco-CMS/pull/5664 renamed visually-hidden to sr-only --- src/Umbraco.Web.UI.Client/src/less/belle.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 6f7554c95307..31205ac0f815 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -81,7 +81,7 @@ @import "forms/umb-validation-label.less"; // Umbraco Accessibility -@import "accessibility/visually-hidden.less"; +@import "accessibility/sr-only.less"; // Umbraco Components @import "components/application/umb-app-header.less";