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..21ca5e671816 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/accessibility/sr-only.less @@ -0,0 +1,24 @@ + +// 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; + + &--focusable:active, + &--focusable:focus, + &--hoverable:hover { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 0b5e10379fdb..bd1cdd5b4f40 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -80,8 +80,10 @@ @import "forms/umb-validation-label.less"; +// Umbraco Accessibility +@import "accessibility/sr-only.less"; + // Umbraco Components -@import "components/application/umb-app-a11y.less"; @import "components/application/umb-app-header.less"; @import "components/application/umb-app-content.less"; @import "components/application/umb-tour.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-a11y.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-a11y.less deleted file mode 100644 index 7e127c5db168..000000000000 --- a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-app-a11y.less +++ /dev/null @@ -1,10 +0,0 @@ -.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/components/tree/umb-actions.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less index 14544ded1097..d6e792de73fb 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-actions.less @@ -27,6 +27,7 @@ } .umb-action-link { + position: relative; white-space: nowrap; font-size: 15px; color: @black; @@ -34,6 +35,7 @@ text-decoration: none; cursor: pointer; display: flex; + width: 100%; align-items: center; body.touch & { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less index b372d41eb40b..8f0b55f9ed22 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree-item.less @@ -8,12 +8,28 @@ user-select: none; } - &:hover ins { + &:hover .umb-tree-item__arrow { visibility: visible; cursor: pointer } } +.umb-tree-item__arrow { + position: relative; + margin-left: -16px; + width: 16px; + height: 16px; + visibility: hidden; + text-decoration: none; + font-size: 12px; + line-height: 12px; + transition: color 120ms; + + &:hover { + color: @ui-option-type-hover; + } +} + .umb-tree-item > .umb-tree-item__inner { &:hover .umb-tree-item__label { @@ -95,7 +111,7 @@ a, .umb-tree-icon, - ins { + .umb-tree-item__arrow { color: @ui-active-type !important; } } diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less index 202c9400da34..5c5423220035 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less @@ -15,20 +15,6 @@ text-decoration: none; } - ins { - margin: -4px 0 0 -16px; - width: 16px; - height: 16px; - visibility: hidden; - text-decoration: none; - font-size: 12px; - transition: color 120ms; - - &:hover { - color: @ui-option-type-hover; - } - } - i.noSpr { display: inline-block; margin-top: 1px; @@ -62,7 +48,7 @@ } body.touch .umb-tree { - ins { + .umb-tree-item__arrow { font-size: 14px; visibility: visible; padding: 7px; @@ -104,7 +90,13 @@ body.touch .umb-tree { } > .umb-options { - visibility: visible; + position: relative; + width: auto; + height: auto; + margin: 0 10px 0 auto; + padding: 9px 5px; + overflow: visible; + clip: auto; } .umb-tree-icon { @@ -178,7 +170,7 @@ body.touch .umb-tree { } .umb-options { - visibility: hidden; + position: relative; display: flex; flex: 0 0 auto; justify-content: flex-end; @@ -192,6 +184,20 @@ body.touch .umb-tree { background: @btnBackgroundHighlight; } + // NOTE - We're having to repeat ourselves here due to an .sr-only class appearing in umbraco/lib/font-awesome/css/font-awesome.min.css + &.sr-only--hoverable:hover, + &.sr-only--focusable:focus { + position: relative; + display: flex; + flex: 0 0 auto; + justify-content: flex-end; + padding: 9px 5px; + text-align: center; + margin: 0 10px 0 auto; + cursor: pointer; + border-radius: 3px; + } + i { height: 5px !important; width: 5px !important; diff --git a/src/Umbraco.Web.UI.Client/src/less/modals.less b/src/Umbraco.Web.UI.Client/src/less/modals.less index 52a573d8c4b7..84de751b1275 100644 --- a/src/Umbraco.Web.UI.Client/src/less/modals.less +++ b/src/Umbraco.Web.UI.Client/src/less/modals.less @@ -113,6 +113,10 @@ bottom: 0px; padding: 20px; margin: 0; + + .btn.umb-outline { + position: relative + } } /*we will always make sure to wrap iframe dialogs in proper padding*/ diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html index 92da12c42355..a6d42d923bf3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-contextmenu.html @@ -6,10 +6,14 @@

{{menuDialogTitle}}

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html index e8d9839d4576..d777b3db780d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html @@ -1,16 +1,20 @@
  • -   + ng-click="load(node)">  + + Expand child items for {{node.name}} + {{node.name}} - +
    diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html index c2559ef31a62..0141ff264f40 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html @@ -8,9 +8,9 @@
    {{tree.name}}
    - + {{group.name}} - + - +