This page should only be applied if the script assisted migration asks you to pass the manual migration skin.20241003.INTRANET.rgaa
A number of changes have been made to correct the accessibility problems of this charter.
The changes affect the structure HTML of pages, menus, ... scripts.
A meticulous check of all pages is necessary.
Any overloading must be checked so as not to "cancel out" the RGAA corrections to the core charter.
Below is the list of patches applied and their associated outcomes.
Go through each of the points and check them on your chart.
Page structure
- Focus visibility(SKININTRA-363)
- Aria landmarks and siding links(SKININTRA-368)
- Footer transfer(SKININTRA-365)
- Color and contrast: the variable $secondary (previously used as a text color) has been renamed $maincolor and the variable $secondary now corresponds to the true secondary color (green on the core chart) (SKININTRA-364).
The renaming of $secondary -> $maincolor in your CSS is performed by an automatic assisted migration. - Add role="search" and aria-label on search form in header(SKININTRA-369)
- For better keyboard navigation (tab order for logic), the "My personal space" menu has been moved to "My personal space". <header> and the "Explore subpages" menu in the inner pages has been moved to <main id="content" role="main"> (SKININTRA-388)
Navigation elements
- Adding aria attributes to the breadcrumb trail(SKININTRA-367)
- Redesign of the main menu(SKININTRA-371)
A very delicate point! The main menu has been completely redesigned (HTML / JS), to comply with RGAA criteria and also to meet the needs reported by projects. The menu no longer opens on hover, but only on click. If the menu has been overloaded, the best method is undoubtedly to remove the overload and then redo. Analyze the changes made by the issue commit.
Make sure that keyboard navigation in the menu is possible (mobile and desktop), and that the menu closes with the ESC key.
As the structure HTML has changed, the overloads CSS will also have to be reworked. - Overhaul of the "Explore subpages" menu(SKININTRA-373)
Like the main menu, the HTML/JS menu has been completely overhauled.
Any SCSS overload will no longer work and must be corrected.
Any HTML and/or JS overload will also have to be corrected.
Make sure that keyboard navigation in the menu is possible and that the menu is closed with the ESC key. - Redesign of notification links (SKININTRA-387)
The link structure has been modified to contain: the link with the icon, followed by the dynamic info (badge + dropdown), followed by a button to display the dynamic info from the keyboard. Watch out for any overloading of notification links.
Any template overloading XSL "notifications-links", "alerts" and/or "link[@url != '' and @isHidden = 'false']" mode="notification-link" will have to be resumed.
My personal space
- Redesign of My personal menu(SKININTRA-378)
Structure HTML and modified JS, beware of overloading!!
See comments in the issue for a list of changes made. - Takeover of business applications (SKININTRA-382 and SKININTRA-426).
See the list of ticket modifications.
Pay particular attention to any overloading of user-menu.xsl
Note that the labels used in each tab (titles / search filters) can now be easily overloaded by adding additional parameters for the "user-links" template.
Example with the "My favorites" tab:
|
|
<xsl:call-template name="user-links">
<xsl:with-param name="title"><i18n:text i18n:key="SKIN_USER_MENU_MY_FAVORITES" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
<xsl:with-param name="themeId" select="'MES_FAVORIS'"/>
<xsl:with-param name="inputDataId" select="'myFavorites'"/>
<xsl:with-param name="extraLinksTitle"><i18n:text i18n:key="SKIN_USER_MENU_MY_FAVORITES_EXTRA_LINKS_TITLE" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
<xsl:with-param name="addUserLinkTitle"><i18n:text i18n:key="SKIN_USER_MENU_MY_FAVORITES_USER_LINK_TITLE" i18n:catalogue="skin.{$skin}"/></xsl:with-param>
<xsl:with-param name="filterFormLabelI18nKey" select="concat('skin.', $skin, ':SKIN_USER_MENU_MY_FAVORITES_FILTER_FORM_LABEL')"/>
<xsl:with-param name="filterInputLabelI18nKey" select="concat('skin.', $skin, ':SKIN_USER_MENU_MY_FAVORITES_FILTER_LABEL')"/>
<xsl:with-param name="extraFilterFormLabelI18nKey" select="concat('skin.', $skin, ':SKIN_USER_MENU_MY_FAVORITES_EXTRA_FILTER_FORM_LABEL')"/>
<xsl:with-param name="extraFilterInputLabelI18nKey" select="concat('skin.', $skin, ':SKIN_USER_MENU_MY_FAVORITES_EXTRA_FILTER_LABEL')"/>
</xsl:call-template> |
- Minor changes to "My feeds" RSS(SKININTRA-383)
- Minor changes to activity flow and project spaces(SKININTRA-384)
Search
Several changes have been made to the impacting search service:
- search criteria (new graphic component for listed criteria)
- facets (clickable elements become buttons + use of ul/li)
- la pagination (ajout d'un élément <nav> + utilisation de ul/li)
- results (using ul/li)
- filter display in mobile mode
In skins/[SKIN]/services/web/pages/services/search, any overloading of the following XSL templates must be checked and compared with the kernel version: "form-criteria", "search-sidebar", "close-filter", "facet-filter-header", "facet-filter-icon", "facet-filter-elements", "facet-filter-element", "pagination", all templates with mode="search-pagination", "filter-mobile", "hits", "hit", "common-service-head-js".
In addition, access to the search function from the search banner in "sticky" mode (when the page is scrolled) has been reviewed.
Any overloading of the XSL "header-sticky-search" and "search-on-scroll" templates should be checked and compared with the kernel version.
Please refer to the ticket JIRA SKININTRA-389 to see all the changes made to the search.
Home page blades
- Use of ul/li for classified ads on the home page (SKININTRA-366)
- Replacement of owlCarousel by Slick Carousel for news carousel on home page(SKININTRA-375)
- Use of ul/li and other minor modifications for the latest documents (SKININTRA-386)
- Replacement of owlCarousel by Slick Carousel for the personalized news carousel and redesign of the thematic filter(SKININTRA-396)
- Replacement of owlCarousel by Slick Carousel for homepage kiosk(SKININTRA-397)
Forms
Form fields have been reworked for accessibility:
- constrast correction
- add border and remove shadow
- use of custom lib ametys-multiselect.js for drop-down lists (multiple or not)
Ensure form rendering and error handling on all charter forms (v2 form, modify an entry from dashboards, login form, publish an ad, apply for a job, etc.).
Contents
FAQ
Rendering of the FAQ content type has been reworked (it was not possible to navigate through questions and fold/unfold answers using the keyboard).
In addition, the CSS styles of FAQ, previously found in richtext/scss/_styles.scsshas been isolated in a dedicated SCSS zones/faq/scss/main.scss
Déplacer les éventuelles surcharges CSS des FAQ, en prenant en compte des modifications de structure du HTML pour les questions/réponses (la question devient un <button>)
Vérifier le rendu et bon fonctionnement des FAQ (notamment à la navigation clavier)
Content comments
The integration of content comments has been reworked to move to the full ajax version, without reloading the page. (plugin:web://pages/comments/helper/comments_4.8.xsl).
The HTML comment structure remains very similar, so there should be little need to adapt CSS .
Beware, however, of overloading pages/comments/helper/comments_3.3.xsl will no longer work. This XSL no longer exists in the Intranet charter; it has been replaced by pages/comments/helper/comments.xsl.
Table styles
New variables have been added to _variables.scss to more easily override the colors of data, datalight and datastrong style tables.
The colors of the core chart have been slightly revised due to contrast problems.
Back to top