[Feature Request][A11Y][FlexibleColumnLayout] 1. Lack of parameter to set aria-label attribute to arrow button 2. Need a callback to tell us whether FlexibleColumnLayout is expanded or collapsed

[Hubery-Shen]

Dear colleagues,
I am from SuccessFactors Web Experience Shanghai team.

Feature request

1. Provide a parameter for us so that we can set the aria-label attribute to the arrow button. Both startColumn,midColumn and endColumn has the arrow, so I need three separate parameters to set the aria-label property for each of the these columns

2. Provide a callback function to tell us the expanded or collapsed status of each column ( startColumn, midColumn, endColumn )
   

Expected API Spec

1. Provide a parameter for us so that we can set the aria-label attribute to the arrow button

<ui5-flexible-column-layout id="fcl">
	<!-- start column -->
	<div slot="startColumn" arrow-label="startColumnLabel">
	</div>

	<!-- middle column -->
	<div slot="midColumn" arrow-label="midColumnLabel">
	</div>

	<!-- end column -->
	<div slot="endColumn" arrow-label="endColumnLabel">
	</div>
</ui5-flexible-column-layout>

2. Provide a callback function to tell us the expanded or collapsed status of each column

<ui5-flexible-column-layout id="FCL">
	<!-- start column -->
	<div slot="startColumn" arrow-label="startColumnLabel">
	</div>

	<!-- middle column -->
	<div slot="midColumn" arrow-label="midColumnLabel">
	</div>

	<!-- end column -->
	<div slot="endColumn" arrow-label="endColumnLabel">
	</div>
</ui5-flexible-column-layout>

document.getElementById("FCL").addEventListener("start-column-change", function (e) {
  if (e.isExpanded) {
    console.log("do something when start column is expanded");
  } else {
    console.log("do something when start column is collapsed");
  }
});

document.getElementById("FCL").addEventListener("mid-column-change", function (e) {
  if (e.isExpanded) {
    console.log("do something when mid column is expanded");
  } else {
    console.log("do something when mid column is collapsed");
  }
});

document.getElementById("FCL").addEventListener("end-column-change", function (e) {
  if (e.isExpanded) {
    console.log("do something when end column is expanded");
  } else {
    console.log("do something when end column is collapsed");
  }
});

[ilhan007]

Hello @Hubery-Shen

Regarding point 2

The layoutChange event provides the following data (as part of the event.detail object):
@param {Array} columnLayout the effective column layout

For example event.detail.columnLayout can be:
["33%", "67%", 0], [67%, 33%, 0], ["25%", "50%", "25%"], ["25%", "25%", "50%"], ["100%", 0, 0], [0, "100%", 0], [0, 0, "100%"]
(we made these proportions configurable via the "_layoutsConfiguration" property, so in your case the percentages might be different.)

Did you try this event data? Do you think it can be useful in your case?

BR,
ilhan

[ilhan007]

Regarding point 1

this new issue by sf team have similar request: #2226

If we provide a title or internal aria-label for those arrow buttons, would you still need an option to set an aria-label from outside?

[Milo-Shen]

Hi @ilhan007

Regarding point 1
We still need an option to set an aria-label from outside.

Regarding point 2
Cool, i think these event data will work for me

Best Regards
Hubery Shen

[ilhan007]

Hello,

We discussed the part with the custom aria-label for the expand/collapse arrows and came to a solution, that requires from you to create a class, that inherits the FCL. Once you have i, you just need to change what the "accEndArrowText" and "accStartArrowText" getters return, as the result they return is set as value of the aria-label.

This already should be enough. But, to allow full customization we prepared a change, that adds new template hooks for the toggle arrows of thew Flexible Column Layout, so that a derived class can fully customize them.
In order to use these hooks, in addition to the class, that inherits the FlexibleColumnLayout, you have to create a template for that class, reuse the FlexibleColumnLayout HBS template and overwrite the newly added "startArrow" and "endArrow" template hooks.

We also considered providing slots or properties, but we wanted to keep the API more simple and agreed on this solution.
Does is sound reasonable to you?

BR,
ilhan