Merge pull request #2766 from dpalou/MOBILE-3746

Mobile 3746

src/addons/mod/forum/components/index/index.html

@@ -86,7 +86,7 @@
             <ion-item *ngFor="let discussion of discussions.items"
                 class="addon-mod-forum-discussion" detail="true"
                 [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions.getItemAriaCurrent(discussion)"
-                (click)="discussions.select(discussion)">
+                (click)="discussions.select(discussion)" button>
                 <ion-label>
                     <div class="addon-mod-forum-discussion-title">
                         <h2 class="ion-text-wrap">

src/core/components/combobox/combobox.scss

@@ -19,19 +19,19 @@
         --padding-end: 10px;
         --padding-bottom: 10px;
         --padding-start: 16px;
+
+        &.md {
+            --background-activated-opacity: 0;
+            --background-focused-opacity: .12;
+        }
+
+        &.ios {
+            --background-activated-opacity: .12;
+            --background-focused-opacity: .15;
+        }
     }
 }
 
-:host-context(.md) {
-    --background-activated-opacity: 0;
-    --background-focused-opacity: .12;
-}
-
-:host-context(.ios) {
-    --background-activated-opacity: .12;
-    --background-focused-opacity: .15;
-}
-
 ion-select,
 ion-button {
     background: var(--background);
@@ -42,6 +42,11 @@ ion-button {
     overflow: hidden;
     margin: 8px;
     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+
+    &:focus,
+    &:focus-within {
+        @include core-focus-style();
+    }
 }
 
 ion-select {

src/core/components/tabs-outlet/core-tabs-outlet.html

@@ -14,6 +14,7 @@
                             [hidden]="!hideUntil"
                             [id]="tab.id! + '-tab'"
                             class="tab-slide"
+                            tabindex="-1"
                             [class.selected]="selected == tab.id">
                             <ion-tab-button
                                 (ionTabButtonClick)="selectTab(tab.id, $event)"

src/core/directives/format-text.ts

@@ -256,14 +256,17 @@ export class CoreFormatTextDirective implements OnChanges {
      */
     protected displayShowMore(): void {
         const expandInFullview = CoreUtils.isTrueOrOne(this.fullOnClick) || false;
-        const showMoreDiv = document.createElement('div');
+        const showMoreButton = document.createElement('ion-button');
 
-        showMoreDiv.classList.add('core-show-more');
+        showMoreButton.classList.add('core-show-more');
-        showMoreDiv.innerHTML = Translate.instant('core.showmore');
+        showMoreButton.setAttribute('fill', 'clear');
-        this.element.appendChild(showMoreDiv);
+        showMoreButton.innerHTML = Translate.instant('core.showmore');
+        this.element.appendChild(showMoreButton);
 
         if (expandInFullview) {
             this.element.classList.add('core-expand-in-fullview');
+        } else {
+            showMoreButton.setAttribute('aria-expanded', 'false');
         }
         this.element.classList.add('core-text-formatted');
         this.element.classList.add('core-shortened');
@@ -624,11 +627,8 @@ export class CoreFormatTextDirective implements OnChanges {
      * "Hide" the "Show more" in the element if it's shown.
      */
     protected hideShowMore(): void {
-        const showMoreDiv = this.element.querySelector('div.core-show-more');
+        const showMoreButton = this.element.querySelector('ion-button.core-show-more');
-
+        showMoreButton?.remove();
-        if (showMoreDiv) {
-            showMoreDiv.remove();
-        }
 
         this.element.classList.remove('core-expand-in-fullview');
         this.element.classList.remove('core-text-formatted');

src/theme/components/format-text.scss

@@ -38,6 +38,7 @@ core-format-text {
                 min-height: 50px;
 
                 .core-show-more {
+                    text-transform: none;
                     text-align: end;
                     font-size: 14px;
                     display: block;
@@ -45,7 +46,7 @@ core-format-text {
                     @include position(null, 0, 0, null);
                     z-index: 7;
                     background-color: var(--background);
-                    color: var(--color);
+                    color: var(--text-color);
                     padding-left: 10px; // RTL
                 }
 
@@ -68,7 +69,7 @@ core-format-text {
         &.core-expand-in-fullview {
             .core-show-more {
                 @include push-arrow-color(626262, true);
-                @include padding-horizontal(null, 18px);
+                @include padding-horizontal(null, 5px);
                 @include background-position(end, 0, center);
 
                 background-repeat: no-repeat;

src/theme/globals.mixins.scss

@@ -4,6 +4,25 @@
  * Place here our custom mixins.
  */
 
+ @mixin core-focus() {
+    outline: none;
+    position: relative;
+    &::after {
+        @include position(0, 0, 0, 0);
+        position: absolute;
+        content: "";
+        opacity: 1;
+        z-index: 1;
+        @include core-focus-style();
+    }
+ }
+
+ @mixin core-focus-style() {
+    box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
+    // Thicker option:
+    // border: var(--a11y-focus-width) solid var(--a11y-focus-color);
+}
+
 @mixin core-transition($where: all, $time: 500ms) {
     -webkit-transition: $where $time ease-in-out;
     -moz-transition: $where $time ease-in-out;

src/theme/theme.base.scss

@@ -514,3 +514,49 @@ img.core-media-adapt-width {
 audio.core-media-adapt-width {
     width: 100%;
 }
+
+// Focus highlight for accessibility.
+ion-item.item-input.ion-focused:not(:focus),
+.ion-focused,
+ion-item.ion-activatable.ion-focused:not(:focus),
+ion-input.has-focus,
+.ion-focused ion-toggle:focus-within,
+.ion-focused ion-select:focus-within,
+.ion-focused ion-checkbox:focus-within,
+.ion-focused ion-radio:focus-within {
+    @include core-focus();
+}
+
+// Treat cases where there's a focusable element inside an item, like a button.
+ion-item.ion-focused:not(:focus),
+ion-item.item-input ion-input.has-focus {
+    position: relative;
+    &::after {
+        box-shadow: revert;
+        opacity: revert;
+        z-index: revert;
+    }
+    .item-highlight, .item-inner-highlight {
+        position: unset;
+    }
+}
+
+// Change default outline.
+:focus-visible {
+    @include core-focus-style();
+    outline: none;
+}
+
+textarea, button, select, input, a {
+    &:focus {
+        @include core-focus-style();
+        outline: none;
+    }
+}
+
+ion-input .native-input{
+    &:focus, &:focus-visible {
+        box-shadow: none;
+        outline: none;
+    }
+}

src/theme/theme.light.scss

@@ -64,6 +64,8 @@
 
     // Accessibility vars.
     --a11y-min-target-size: 44px;
+    --a11y-focus-color: var(--primary);
+    --a11y-focus-width: 2px;
 
     --module-icon-size: 24px;