fix(tabs): Improve accessibility - FRONT-3661 #2576

papegaill · 2022-06-27T08:12:36Z

No description provided.

github-actions · 2022-06-27T08:25:12Z

🚀 Deployed on https://ecl-preview-2576--europa-component-library.netlify.app

planctus · 2022-07-14T07:22:10Z

src/implementations/twig/components/tabs/tabs.html.twig

@@ -33,7 +33,8 @@
 {% set _css_class = 'ecl-tabs' %}
 {% set _extra_attributes = [


i see that we normally define our internal variable for attributes as a string that gets populated by looping into the extra_attributes param, and it's ok since it's going to be rendered as a string. But when we have "internal" attributes to set, it would feel natural to merge these values into the extra_attributes array and get the _extra_attributes string as the result of the internal and external attributes processing.

Not sure, I properly understand the issue here, we are doing same in expandable and news-ticker

not an issue, just that we are requesting extra attributes as objects with name and value for then processing them to generate a string. if we are about to create internal attributes i would merge these with the extra_attributes array in order to process them in one place consistently. I know that we have other use cases like this, but that doesn't make it right. it was a suggestion, if you like it like this, keep it that way.

planctus · 2022-07-14T07:32:48Z

src/implementations/vanilla/components/tabs/tabs.js

+        break;
+
+      default:
+        break;


never seen a break on a default case for a switch, what would that be doing..? :)

:) This code was basically taken from https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html https://softwareengineering.stackexchange.com/questions/201777/break-on-default-case-in-switch

i don't absolutely agree with the user who wrote that comment, default is always executed at the end of the switch, breaking after it is completely irrelevant, i'd say logically wrong, for how i see it. But again, fine if you like it this way.

planctus · 2022-07-14T07:47:25Z

src/implementations/vanilla/components/tabs/tabs.js

+    }
+
+    if (flag) {
+      e.stopPropagation();


not sure about what we would prevent here, but ok, just that for how the logic is it seems you could set the variable to true and then in the default case set it to false, not a big difference but less repetitions..

Sure you are right, I have removed this prevents condition 👍

planctus · 2022-07-14T07:53:35Z

src/implementations/twig/components/tabs/tabs.html.twig

@@ -92,6 +104,7 @@
            transform: 'rotate-180'
          },
          extra_classes: 'ecl-tabs__toggle',
+          extra_attributes: [{ name: 'tabindex', value: '-1' }],


i understand that we are introducing navigation through keyboard arrows, but why disabling the standard navigation via Tab..? It feels really weird to access the first tab with a Tab and then being moved out of the tabs typing again Tab. This way the user really have to know that the only way of navigating our tabs would be using arrows.
Also because the standard navigation would be working decently in most of the viewports and only when some tabs get hidden it would be really problematic.

This is basically the request, to only be able to navigate with arrows and thus be able to go to the content more quickly without having to tab all tabs. https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html

i don't understand, really..

We can discuss this on the next weekly if you want ;)

planctus · 2022-07-14T07:54:53Z

src/implementations/twig/components/tabs/tabs.html.twig

@@ -59,27 +60,38 @@
 {# Print the result #}

 {% if _items is not empty and _items is iterable %}
-<nav class="{{ _css_class }}"{{ _extra_attributes|raw }}>
+<div class="{{ _css_class }}"{{ _extra_attributes|raw }}>


not sure the reason why of this change, but i guess there is.. :)

Was following markup from w3: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html but I guess we can keep <nav>

planctus · 2022-07-14T07:56:27Z

src/implementations/vanilla/components/tabs/tabs.js

+    } else {
+      this.moveFocusToTab(this.tabsKey[index + 1]);
+    }
+  }


i don't see the new listeners being destroyed together with the others in the destroy method..

planctus · 2022-07-14T07:57:55Z

src/implementations/vanilla/components/tabs/tabs.js

+        flag = true;
+        break;
+
+      case 'ArrowRight':


i thnk this navigation has a minor flaw, when you reach the "collapsed" tabs you would maybe expect to be able to browse the items also using arrowDown and arrowUp, no..? At least this is what i instinctively tried to do when i first tested this.

I was first trying doing this, but it's more simple now the dropdown opens automatically if you try to go to the next tabs (collapse). Otherwise, you need to tab open the dropdown navigate with up and down arrows and tab again to come back to previous tabs. this was agreed with COMM.

i was only sugggesting to "add" the possibility of browsing the dropdown also with up and down arrows, nothing wrong with the fact that it opens and close using left and right arrows. Actually what i would find correct would be to focus on the "more" element and open the dropdown for then using arrow up and down inside of it.

planctus · 2022-07-14T08:25:04Z

src/implementations/vanilla/components/tabs/tabs.js

+  /**
+   * @param {HTMLElement} currentTab tab element
+   */
+  moveFocusToPreviousTab(currentTab) {


Do we really need separated callbacks foran operation like moving focus between the tags..? It's not only because of the almost duplicated code, but it's about the logic, i feel that we could handle this in a single function, but it's just a suggestion and a preference..

Merged the 2 functions

planctus · 2022-07-14T08:25:20Z

src/implementations/vanilla/components/tabs/tabs.js

+      this.dropdown.classList.remove('ecl-tabs__dropdown--show');
+    }
+    currentTab.focus();
+    return this;


Why returning the instance here..?

removed 👍

planctus

A few comments, minor fixes and a few questions, but the navigation with arrows works fine, just that i don't understand why preventing users from using Tabs as well, it creates the impression of a "bug" and you need to discover yourself the alternative way of navigating between the different tabs.

fix(tabs): Improve accessibility - FRONT-3661

f525523

papegaill requested a review from a team June 27, 2022 08:12

papegaill added tag: enhancement process: on hold process: business approval needed labels Jun 27, 2022

papegaill added 3 commits July 12, 2022 15:50

Merge branch 'v3.4.0-dev' into fix/FRONT-3661

356129e

adapt accessibility key flow

831108c

update snapshot

174ba59

papegaill added process: review needed and removed process: on hold labels Jul 13, 2022

Merge branch 'v3.4.0-dev' into fix/FRONT-3661

84d0e09

planctus added process: under review and removed process: review needed labels Jul 14, 2022

planctus reviewed Jul 14, 2022

View reviewed changes

planctus requested changes Jul 14, 2022

View reviewed changes

planctus added process: changes requested and removed process: business approval needed process: under review labels Jul 14, 2022

PR feedback

5f85f19

papegaill added process: review needed and removed process: changes requested labels Jul 14, 2022

planctus added process: under review and removed process: review needed process: under review labels Jul 15, 2022

planctus previously approved these changes Jul 15, 2022

View reviewed changes

planctus added the process: business approval needed label Jul 15, 2022

PR feedback

ef1e8e8

papegaill dismissed planctus’s stale review via ef1e8e8 July 15, 2022 10:20

planctus removed the process: business approval needed label Jul 18, 2022

Merge branch 'v3.4.0-dev' into fix/FRONT-3661

1a7d935

planctus merged commit 54e80e3 into v3.4.0-dev Jul 18, 2022

planctus deleted the fix/FRONT-3661 branch July 18, 2022 10:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tabs): Improve accessibility - FRONT-3661 #2576

fix(tabs): Improve accessibility - FRONT-3661 #2576

papegaill commented Jun 27, 2022

github-actions bot commented Jun 27, 2022 •

edited

Loading

planctus Jul 14, 2022

papegaill Jul 14, 2022

planctus Jul 15, 2022

planctus Jul 14, 2022

papegaill Jul 14, 2022

planctus Jul 15, 2022

papegaill Jul 15, 2022

planctus Jul 14, 2022

papegaill Jul 14, 2022

planctus Jul 14, 2022 •

edited

Loading

papegaill Jul 14, 2022

planctus Jul 15, 2022

papegaill Jul 15, 2022

planctus Jul 14, 2022

papegaill Jul 14, 2022

planctus Jul 14, 2022

papegaill Jul 14, 2022

planctus Jul 14, 2022 •

edited

Loading

papegaill Jul 14, 2022

planctus Jul 15, 2022 •

edited

Loading

planctus Jul 14, 2022 •

edited

Loading

papegaill Jul 14, 2022

planctus Jul 14, 2022

papegaill Jul 14, 2022

planctus left a comment

		@@ -33,7 +33,8 @@
		{% set _css_class = 'ecl-tabs' %}
		{% set _extra_attributes = [

fix(tabs): Improve accessibility - FRONT-3661 #2576

fix(tabs): Improve accessibility - FRONT-3661 #2576

Conversation

papegaill commented Jun 27, 2022

github-actions bot commented Jun 27, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

planctus Jul 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

planctus Jul 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

planctus Jul 15, 2022 • edited Loading

Choose a reason for hiding this comment

planctus Jul 14, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

planctus left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 27, 2022 •

edited

Loading

planctus Jul 14, 2022 •

edited

Loading

planctus Jul 14, 2022 •

edited

Loading

planctus Jul 15, 2022 •

edited

Loading

planctus Jul 14, 2022 •

edited

Loading