From 5b19740137519bb5ae2ac919239c27d35264e234 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Thu, 4 Apr 2024 17:05:59 +0300 Subject: [PATCH] docs: 3.0 release notes (#2735) * docs: 3.0 release notes (wip) * docs: 3 release notes * docs: updated contributor names * docs: minor punctuation cleanup * docs: pfe3 blog demos --------- Co-authored-by: Greg Gibson <642695+hellogreg@users.noreply.github.com> --- docs/_includes/layout-blog.njk | 12 +- docs/blog/pfe-3-release.md | 234 +++++++++++++++++++++++++++++++++ 2 files changed, 244 insertions(+), 2 deletions(-) create mode 100644 docs/blog/pfe-3-release.md diff --git a/docs/_includes/layout-blog.njk b/docs/_includes/layout-blog.njk index 30b10eb0ea..a2d93ae1b9 100644 --- a/docs/_includes/layout-blog.njk +++ b/docs/_includes/layout-blog.njk @@ -5,6 +5,7 @@ layout: layout-base.njk {% include '_nav.njk' %}
+

{{ title }}

{% if tagline %}

{{ tagline }}

{% endif %} @@ -27,11 +28,13 @@ layout: layout-base.njk {{ content | safe }} + Back to Top
{% include '_foot.njk' %} + + diff --git a/docs/blog/pfe-3-release.md b/docs/blog/pfe-3-release.md new file mode 100644 index 0000000000..62c3e96377 --- /dev/null +++ b/docs/blog/pfe-3-release.md @@ -0,0 +1,234 @@ +--- +layout: layout-blog.njk +title: PatternFly Elements 3.0 +tagline: Newer, Better, More Accessible +description: Announcing the next major release of PatternFly Elements with more components and better accessibility. +tags: +- blog +--- + +This week we are pleased to announce the availability of PatternFly Elements +3.0. This includes the release of our three main packages + +- [`@patternfly/elements@3.0.0`][pfe3], our web component library implementing + PatternFly design +- [`@patternfly/pfe-core@3.0.0`][core3], utilities for web component authors, + used in PFE and [RHDS][rhds] +- [`@patternfly/pfe-tools@2.0.0`][tools2], utilities for web component library + maintainers, e.g. dev server configuration, unit test helpers, etc. + +These releases include commits from Anuj Singla, Benny Powers, Brian Ferry, +Gautam Krishna, Guy Bedford, Ivana Rodriguez, Luke Dary, Mark Caron, Michael +Potter, Nikki Massaro, and Steven Spriggs. Thank you for your +contributions! + +## Accessibility + +A lot of deep thought, careful testing, and hard work went into accessibility in +this release. In particular, the leadership of our Principal Engineer for +Accessibility Nikki Massaro and our Producer for Accessibility Greg Gibson were +critical to designing elements which serve all of our customers. + +### Roving Tabindex + +One of the key insights in this release cycle was that when it comes to creating +accessible controls, there is often more than one way to achieve sufficient +results. We relied heavily on Nikki Massaro's `RovingTabindexController` +(RTIC) when developing new elements like `` as well as +when updating existing elements like ``. We ship controllers like RTIC +in our pfe-core package. Controllers are bits of shared functionality which can +plug in to any element and provide features like accessibility patterns or +positioning floating elements. + +This release revises RTIC's developer ergonomics, making it useful +even in framework components like React, not just in web components. The roving +tabindex pattern allows end users to skip over complex controls like listboxes +or tab groups when navigating a page by keyboard. The user only has to "tab +into" the complex control once, and they can "tab out" immediately if they wish +to continue down the page. If they want to navigate within the complex control, +they can do so using the arrow keys. + +### Cross-root ARIA + +One of the major challenges faced during this release cycle was in adapting +complex components and design patterns to the use of Shadow DOM and +Form-Associated Custom Elements. As of this writing, there is yet no +comprehensive cross-browser method for associating an element in one root (i.e. +the main document) with an element in another root (i.e. a shadow root). An +example of where this matters is in the case of dropdowns. In order to assistive +technology to correctly announce the type, state, and availability of dropdown +controls, the browser's internal accessibility tree must associate the button +which toggles the dropdown menu open and closed with the listbox element that +contains the dropdown actions. + +In the case of dropdown, we wanted to offer our users the ability to slot in a +custom toggle element to the dropdown control, but if we did so, then the menu +(normally located within the shadow root of the dropdown) could not effectively +be associated with the toggle. Our solution in that case was to require users +who customize the toggle to also slot in a menu element, so that they both live +in the same root. + +We eagerly await the specification and implementation of cross-root ARIA in web browsers, and +our engineers continue to participate in the specification efforts at the Web +Compoonents Community Group. + +### The importance of manual testing + +In a perfect world, browser vendors would implement accessibility specs +immediately, completely, and uniformly; and assistive technology vendors would +implement direct translations of the browser's internal accessibility tree to +the end user. Of course, we don't live in such a world. During the development +process, we rely on the browser's accessibility developer tools to understand +how our complex controls appear to AT, and we write the majority of +our unit tests as assertions against that tree ("When I click the toggle, expect +the listbox to appear next to it in the tree"). + +We've seen again and again that just because something looks good to the +developer when they inspect the AX tree doesn't mean that all users will be able +to use it. We were fortunate to have the time, care, and expert testing skills +of our Accessibility Producer Greg Gibson during this development cycle. +Developers often ask us how to automate accessibility testing. Our answer is +always that automation can only get you so far. Cross-browser, cross-platform, +manual testing is essential to ensure the widest reach for your products. + +## New Elements + +PatternFly Elements 3.0 continues the work started in 2.0 to bring the design +and user experience into line with the PatternFly React v4 library. Behind the +scenes we also expended quite a lot of effort to align our Elements internal +implementations and external apis more closely with the pattern fly react +library. We are looking forward to continuing this work towards pattern fly for +both in terms of implementing components that we don't have yet as well as +closing the future parity gaps and ensuring greater compatibility with the +existing pattern fly library. + +We've added several elements to our collection in this release: + +- `` - A shortcut that allows users to quickly navigate to the +top of a lengthy content page. +- `` - Allows users to place an image in the background of +your page or area of a page. +- `` and `` - Used to communicate a value or a set of +attribute-value pairs within workflows that involve filtering a set of objects. +- `` - Presents a menu of actions or links in a constrained space +that will trigger a process or navigate to a new location. +- `` - Enables users to select one or more items from a list. +- `` - Used for entering a paragraph of text that is longer than +one line. + +Select and dropdown in particular, because of their accessibility requirements, +were a major effort this release. + +### New Features + +We also added features and made changes to elements released in previous +versions: + +- `` gets `helper-text`, `error-text`, and `validate-on` +attributes, and now supports the native `pattern` and `placeholder` attributes. +- `` now acts itself as a button, and doesn't contain a `