? Documentation Required a11y ? PR-4.3-dev ? Pending

User tests: Successful: Unsuccessful:

avatar astridx
astridx
6 Feb 2023

Please see #39805 (comment)

The <header> element represents a container for introductory content or a set of navigational links. Sometimes you want to display other content above it. For example, a banner. See https://magazine.joomla.org/all-issues/september-2021/joomla-4-tweak-cassiopeia-with-a-top-banner-and-horizontal-navigation.

In the case of the banner, you usually want the banner not to remain fixed when you select in the template the option sticky header.

In the linked magazine article I described a workaround for this (at the end under the heading sticky header). Unfortunately, I have not found a solution how to achieve this without changing the index.php file.

Changing the index.php file means that you either have to continue working with

  • a copy of Cassiopeia
  • or you need a child template that changes the complete index.php.

An additional position above the <header> element would make this much easier.

Summary of Changes

Add an additional position above the <header> element

Testing Instructions

See https://magazine.joomla.org/all-issues/september-2021/joomla-4-tweak-cassiopeia-with-a-top-banner-and-horizontal-navigation

avatar joomla-cms-bot joomla-cms-bot - change - 6 Feb 2023
Category Front End Templates (site)
avatar astridx astridx - open - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
Status New Pending
avatar astridx astridx - change - 6 Feb 2023
Title
[Cassiopeia] Add an additional position above the <header> element
[Cassiopeia] Add an additional position above the element
Labels Added: ?
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar astridx astridx - change - 6 Feb 2023
The description was changed
avatar astridx astridx - edited - 6 Feb 2023
avatar chrisssi2 chrisssi2 - test_item - 8 Feb 2023 - Tested successfully
avatar chrisssi2
chrisssi2 - comment - 8 Feb 2023

I have tested this item successfully on 51597d4


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39805.

avatar chmst
chmst - comment - 8 Feb 2023

I like the idea but .. Adding a module position above the header adds an area to the site which is completely outside of every landmark. See also former discussions
This is permanently marked as an issue for all our modules.

It needs careful testing of keyboard navigation and skip navigtation plugin.

In any case it is a new feature and cannot come into 4.2.

avatar brianteeman
brianteeman - comment - 8 Feb 2023

Due to the complexity of today's web content, if using landmarks, all perceivable content should reside in a semantically meaningful landmark in order that content is not missed by the user.
source https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html

avatar astridx
astridx - comment - 8 Feb 2023

Thank you for the feedback. I have not yet understood the landmarks in cassiopeia I think.

I wanted to take a closer look. To do this, I reinstalled Joomla and installed the blog sample data.

The part of the HTML source code that displays the position banner of the sample data in the frontend looks like this.

   ....
    </header>
    <div class="site-grid">
        <div class="container-banner full-width">
           <div class="mod-custom custom banner-overlay" id="mod-custom119">
            ....
           </div>
        </div>
    </div>
    <div class="grid-child container-top-a">
    ....

How do I identify the semantically meaningful landmark of the position banner?

avatar drmenzelit
drmenzelit - comment - 9 Feb 2023

How do I identify the semantically meaningful landmark of the position banner?

There is no meaningful landmark on the module positions in Cassiopeia directly, you can change the module tag in the parameters of the module (div, section, aside), then you get a landmark for the module.

avatar astridx astridx - change - 11 Feb 2023
Labels Added: a11y ?
avatar astridx astridx - change - 11 Feb 2023
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2023-02-11 09:38:47
Closed_By astridx
Labels Added: a11y ?
avatar astridx astridx - close - 11 Feb 2023
avatar astridx astridx - close - 11 Feb 2023
avatar astridx astridx - reopen - 11 Feb 2023
avatar astridx
astridx - comment - 11 Feb 2023

Thank you very much for your feedback. I think I misunderstood Brian's comment. If I see it correctly,

"all perceivable content should reside in a semantically meaningful landmark"

is not possible as a preset default in a CMS. Because, you can't force a user to place the navigation in a certain place. If a user wants to, he can even publish the navigation under the search position. Right?

I have now created the position above-header in the 4.3-dev branch. Then I installed the sample test data. I published an image once under the position banner and then under my newly inserted position above-header.

I have not entered the alt tag. This is criticised. Apart from that I don't see any significant difference in terms of tab order and roles in the HTML document.

Image on position banner via custom module:

position1

Image on position above-header via custom module:

position2

A user can change the module tag in the parameters of the module, then he gets a semantically meaningful landmark for the module, if he has selected a supporting module style. For example html5.

Am I missing something else?

avatar astridx astridx - change - 11 Feb 2023
The description was changed
avatar astridx astridx - edited - 11 Feb 2023
avatar chrisssi2 chrisssi2 - test_item - 23 Feb 2023 - Tested successfully
avatar chrisssi2
chrisssi2 - comment - 23 Feb 2023

I have tested this item successfully on ba85970

I using this in a child template of cassiopeia. For testing I installed https://github.com/joomla/joomla-cms/releases/tag/4.3.0-beta2 and made the changes from this PR.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39805.

avatar viocassel viocassel - test_item - 2 Mar 2023 - Tested successfully
avatar viocassel
viocassel - comment - 2 Mar 2023

I have tested this item successfully on ba85970


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39805.

avatar alikon alikon - change - 2 Mar 2023
Status Pending Ready to Commit
avatar joomla-cms-bot joomla-cms-bot - edited - 2 Mar 2023
avatar alikon
alikon - comment - 2 Mar 2023

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39805.

avatar wilsonge
wilsonge - comment - 10 Mar 2023

@brianteeman just checking but based off our conversation on the joomla.org template isn't this going to break the positioning of the skipto plugin when the module position is used?

avatar brianteeman
brianteeman - comment - 10 Mar 2023

Yes it would. If we want this module position then we would need to expose the option in the skipto plugin to change the class it is anchored to

avatar brianteeman
brianteeman - comment - 13 Mar 2023

please remove RTC for the reasons stated above

avatar astridx astridx - change - 26 Apr 2023
Status Ready to Commit Closed
Closed_Date 0000-00-00 00:00:00 2023-04-26 18:25:44
Closed_By astridx
Labels Added: ? Documentation Required PR-4.3-dev ?
Removed: ?
avatar astridx astridx - close - 26 Apr 2023

Add a Comment

Login with GitHub to post a comment