The direction for AUI 9

Atlassian Ecosystem Design Ecosystem Design Announcements
,
1

Hi everybody! It’s been a while, but I wanted to give you an update on what’s happening in and around AUI.

Server’s frontend platform team are working on a new major version of AUI.

The work on alpha and beta versions of this release are being published to 2 sites:

The AUI 9 agenda

This major version has three key features:

  • Accessibility - AUI 9 improves screen reader and keyboard support for some components.
  • Compatibility - AUI 9 drops support for IE 11.
  • Themeability - AUI 9 includes dark mode theme support.

Accessibility

AUI’s UI components have shortcomings when screen reader or keyboard-only users attempt to interact with them.

In AUI 9.0, we have addressed the major interaction flaws in AUI’s layered components and navigation patterns.

The following AUI components have had markup and behaviour tweaks. They should be Perceivable, Operable, Understandable, and Robust when used via the VoiceOver, JAWS, or NVDA screen readers, or when only using a keyboard:

  • Patterns
    • Application header
    • Close buttons
    • Current item
    • Disabled items
    • Hidden items
    • Page layout
    • Skip links
    • Vertical and horizontal navigation
  • Components
    • Dropdown menus
    • Dialog2
    • Inline Dialog2
    • Messages
    • Sidebar

For a complete list of changes, see the AUI changelog.

Dropping IE 11 support

Back in September 2019, Atlassian announced their end-of-life policy for IE 11 support in Cloud and Server products.

AUI 9 is expected to be adopted in product versions with no support for IE 11. As such, AUI has also dropped its support for IE 11.

Dark mode theme support

With the removal of IE 11 support, AUI is now able to implement a dark mode theme.

AUI now controls its theme values using CSS variables. The dark theme can be enabled by adding an aui-theme-dark class to the .

See AUI’s documentation for more details on AUI’s theme support.

Note that this capability is currently a beta feature . AUI’s implementation is expected to change as Atlaskit and Atlassian products introduce theming support.

What isn’t in AUI 9

To make the transition to or support for products using AUI 9 easier, we decided NOT remove any code originally marked for removal in AUI 9.

  • No legacy components will be removed in AUI 9.
  • All deprecation warnings have been bumped to AUI 10.
  • Legacy components, such as Inline Dialog 1 and Dropdown 1, are still present in the Atlassian Plugin.

The progress so far

The team’s progress is available on the master branch of AUI.

The AUI 9.0 release is in beta as of today. A final version is expected around the end of June.

Adoption in Server products

Jira Server will be adopting AUI 9.0 in an upcoming release (in a July-September timeframe).

Server products will announce their adoption in upcoming releases at a later date.

Using AUI 9.0

Where to find it

You can download AUI through one of three distribution channels:

Markup changes and cross-version compatibility

Some of AUI’s components and patterns required small markup changes to improve their accessibility.

Each change is written in AUI’s upgrade guide.

We appreciate that markup changes are awkward. To reduce the impact, we are aiming for the following:

  • Most markup patterns that worked in AUI 8 should also work in AUI 9.
  • Markup patterns that work in AUI 9 may work in AUI 8, but:
    • Some incorrect aria- attribute usages were changed or removed in AUI 9, but were important to styling and behaviour in AUI 8.
    • Use of CSS variables to control theming and styles won’t work in AUI 8.
    • The recommended page layout markup pattern in AUI 9 may not style the element correctly in AUI 8.

Please refer to the changelog and upgrade guide for how to handle the component changes.

Support for the release

We want to minimise the effort in supporting products using AUI 8.x and AUI 9.x. Where feasible, we’ll update AUI 9.x to improve cross-version compatibility.

You can file bugs and requests in AUI’s public backlog.

If you have any questions or comments, add them to this thread :slight_smile:

<3,
Server Platform

13 Likes
2

Time conversion: July, August, September 2020 = Q1 FY21 ?

1 Like
3

Whoops, my bad; I’m using Australian financial years. That’s right @danielwester. I’ll update the post with more human-friendly times :stuck_out_tongue:

2 Likes
4

Two questions about apps:

  • Is there any chance to get Issue View as a component? Popup or sidebar, ideally with editing. Inline editing for Issues in table views is also something really needed by almost any app

  • JQL input auto completion. Please!..

5

Hi @dmitry.astapkovich! Unfortunately, those are questions better suited for the Jira product team. I’ll pass them on, though :slight_smile:

1 Like
6

Hi @daz, thanks for the update. It is good to see accessibility as a key focus!

What is going to be the best way for us to test our apps in the context of products with AUI 9? Mostly our apps don’t really exist separately to Jira, Confluence or Bitbucket. I’m keen that we try ASAP so we can report AUI 8 -> 9 markup issues, as you’re aware we need to support multiple versions of host products so backwards compatibility is a huge ongoing concern.

Jon

3 Likes
7

Hi @jmort!

The Server product teams are still planning their upgrade schedules, so at the moment I don’t have many environments to share with you. With that said, I do have two test builds available - one Refapp, one Jira. These builds are still actively being worked on and aren’t indicative of the final releases, but will hopefully help you get an early start on testing your apps’ code against AUI 9.

  • Refapp version 5.2.0-5a83c651 (contains AUI 9.0.0-beta-1)
  • Jira version 8.11.0-QR-20200616114740 (contains AUI 9.0.0-beta-1)

If you run and test your apps using the Atlassian SDK, you should be able use these product versions by either updating your pom.xml's AMPS configuration, or running mvn amps:debug -Dproduct=[refapp|jira] -Dversion=[one of the versions above] within your project directory.

Hope that helps!

Cheers,
Daz.

8

Thanks @daz that is helpful

1 Like
9

Hi @daz,

I am testing applications to check compatibility with AUI 9 and Jira 8.12.0 EAP02
In the case of dropdown menus, I have observed that the issue panels of the boards and gadgets do not work correctly. The menu options are displayed scrolled. Is it a known problem? Is there any solution in progress?

Thanks

10

Hi @dortiz, are you able to raise an issue at Atlassian User Interface - Issues - Ecosystem Jira and include a screenshot of the problem, as well as what you expected to happen? Cheers!

11

ok @daz,
thanks.

12

Hello everyone,

I see that AJS.params is getting deprecated (and removed in AUI 10). Any ideas what will be the replacement? We are using baseURL for building our Ajax calls and projectKeys to fetch available assignees.

I suppose this will be indicated in AUI 10 upgrade guide, but the sooner we change it the better!

Thank you.

13

@daz It seems that you published PostCSS to dist folder for aui 9.0.0.
Can you please check if that is on purpose?

With AUI 8 it was all plain CSS and no PostCSS. Is that been done on purpose? I wanted to use a fully standalone CSS version of the https://cdn.jsdelivr.net/npm/@atlassian/aui@9.0.1/dist/aui/aui-prototyping-darkmode.css but this is only filled with PostCSS variables.

Are you planning on publishing a real dist/css version in the future for AUI9 or at least give instructions on how to use proper PostCSS setup?

1 Like
14

With version 9 of AUI the project is using CSS variables. The published CSS might look like a PostCSS syntax but that’s a syntax of native CSS variables that can be used by all the supported browsers.

15

Ok cool, thanks for the clarification :slight_smile:

16

Hi @linklefebvre,

I don’t think we have info about AJS.params in the upgrade guide at the moment. I’ll discuss this with the team and see what actions we can provide.

The AJS.params mechanism is only used within Jira and Confluence. Its approach to serving data – see AJS.populateParameters() – is tightly coupled to the DOM, and is time-bound to the DomContentLoaded event. These force its consumers to wait & check whether the data they want is there.

This kind of bottleneck isn’t great, so long-term, the data served via AJS.params needs to come from elsewhere. With that said, an upgrade path for each values in AJS.params will need to come from the product teams, so I’ll liaise with them and see what we can do about that.

With regards to the two specific params keys you asked about:

  • AJS.params.baseUrl - you can safely replace this with AJS.contextPath() as far back as Jira 5 & Confluence 5.
  • AJS.params.projectKeys - I’m not sure on which pages this params key appears, so I’m not sure what an equivalent replacement would be.
  • Generally speaking - if you want to be guaranteed that your plugin will receive the data it needs on page load, you can make use of the Web Resource Manager’s “DataProvider” and WRM.data.claim() APIs. This will put your app - not the host product version - in control of when & what data you receive. Read this guide for details: https://developer.atlassian.com/server/framework/atlassian-sdk/adding-data-providers-to-your-plugin/

Hope that helps!

2 Likes
17

Simple-XDM requests used to open a dialog2 (consisting of an iframe) in AUI 9 Jira 8.12 is failing with the following error,

Uncaught DOMException: Blocked a frame with origin “http://localhost:2990” from accessing a cross-origin frame.

18

Will the AUI ever include more complex components such as a WYSIWYG Editor easy to import and use anywhere we like without it getting messy with other Jira Editors?

1 Like
19

Hi @karanjagdish!

Thanks for reaching out!

Could you please elaborate a bit more on the kind of setup you’re testing your app on?
The error you’re quoting is a browser-security response directly related to the Same Origin Policy (you can read more on that here: Same-origin policy - Web security | MDN ).

If you believe this is directly related to AUI’s behaviour - could you please guide me trough your implementation and thought-process? Without that - I am unable to suggest any solution.

Best regards,
Michal “Fox” Dyro

20

Hi @mdyro,

Thanks for your quick response.

The application works by first registering a web panel on the Jira Issue view.
When initialized, a child element is created using host.create and appended to it which is where we will add our application’s UI as an iframe. The contents of the iframe are loaded in from a cross-origin website. The communication between the iframe within the web panel and the add-on occurs using Atlassian’s simple-xdm library(_AP).

This is how the iframe sends a message to the addon,

_AP.require('dialog', function(dialog) {
                        dialog.create(options);
                        callback(dialog);
                    });

To create an AUI dialog, the iframe sends details such as the options used(as a JSON). Once these options are received on the addon side, an element with attribute role = “dialog” is queried from the DOM, the child iframe element within this element is initialized with our application’s url (following the simple-xdm guide)

Below is the code to initializes the iframe using the ‘src’ attribute,

var $dialogEl = AJS.$('#' + options.key).clone(); //section HTML element with role dialog
            var $contentIframe = $dialogEl.find('.content-iframe'); //iframe within the above element is fetched
var iframeParams = host.create(extension, function(){
                console.log("Initialized iframe");
            });
var host = window.host.min['default'];
            var extension = {
                addon_key: options.addon_key,
                key: options.key,
                url: $contentIframe.attr('data-src'),
                options: {
                    autoresize: true
                }
            };
            var iframeParams = host.create(extension, function(){
                console.log("Initialized iframe");
            });
            $contentIframe.attr('id', iframeParams.id);
            $contentIframe.attr('name', iframeParams.name);
            $contentIframe.attr('src', iframeParams.src); //url returned from the host.create after passing extensions
            _dialog = AJS.dialog2($dialogEl);
            _dialog.show();

The error occurs when _dialog.show() is called, This can be seen in the aui.chunk file refer image,

image
image1260×584 87.3 KB
image (1).png