No iconography version

[gusnaughton]

Is your feature request related to a problem? Please describe.

In some designs, we move the location of the rotating karat indicating expanded/collapsed accordion state. This ticket represents the body of work required to remove the icon from the auro-accordion.

Describe the solution you'd like

noIcons attribute added to the component which hides the carrot

[blackfalcon]

@gusnaughton I am not understanding the scope of the update you are looking for.

In some designs, we move the location of the rotating karat indicating expanded/collapsed accordion state.

What does this mean? Are there designs you can attach to this issue? Who is the design sponsor behind this update?

noIcons attribute added to the component which hides the carrot

I need to understand more the 'why' for this.

[gusnaughton]

For the why:

Please see the figma: https://www.figma.com/file/Rd88riQ4R94sbzYzipmwY5/Flight-Results---Price-cell?node-id=102%3A1299

[blackfalcon]

Am I to understand the intent here is to hide the icon and the whole upper portion of this UI element would be placed inside the trigger, e.g. <button> element.

Then the tiles would be inside the toggled area?

If that is the case, I am not a fan of placing all that content in a <button> element and having a static icon really defeats the purpose of the icon in the first place.

What if the update were to allow for additional content to be placed inside the upper part of the accordion alongside a <button> element for the actual accordion trigger.

The element can be updated to allow for custom controls over the placement of the icon and allow the user to adjust the space inside the accordion.

This has greater benefit IMHO as this allows for additional uses of the accordion concept as well as only places the content specific to the toggle inside the <button> element to maintain a11y sanity.

[gusnaughton]

We can't assume that the entire top row is the trigger because there is clickable content (Details, Preview Seats, and the flightline will have hover state on it eventually as well). On Desktop, the accordion does not trigger at all.

We are also not replacing the carat with a static icon, instead, we are implementing the carat in our own component. The carat rotates 180 degrees, just like the accordion, but in the From $201 slot.

[gusnaughton]

What specifically are you proposing for the custom accordion controls? I only have the Figma linked above as guidance, and given our launch timeline, I'd like to work with you on coming up with a tight scope that fulfills my use case and allows others to add on as the need comes to be.

[blackfalcon]

There are options on the table, but this comes at the expense of other work we have planned. My only recommendation is for your team to roll a custom solution.

[blackfalcon]

@gusnaughton Is this related to https://github.com/AlaskaAirlines/auro-accordion/issues/23?

[blackfalcon]

Thinking about this more, the issue that we have with this element is that the trigger is pre-defined. I am suggesting we update this element to have an 'anything' trigger much like popover and dropdown.

The scope of auro-accordion would be to embrace the action of the accordion, but offer additional flexibility to allow for anything to trigger the accordion effect.

For example, the Mileage Plan membership create account page, there is a checkbox that triggers an accordion. In its current shape, auro-accordion cannot support that.

So my suggestion is to not embrace this specific request but actually redevelop this element with a new API and trigger options.