Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0] Wrap component output in main element to make Cassiopeia more accessible #29870

Conversation

hans2103
Copy link
Contributor

@hans2103 hans2103 commented Jul 1, 2020

Pull Request for Issue # .

Summary of Changes

Landmarks provide a powerful way to identify the organization and structure of a web page.
This PR will wrap the output of the primary content of the page into a <main></main> element.

Main Landmark

A main landmark identifies the primary content of the page.

ARIA 1.1 Specification: main landmark

Design Patterns
  • Each page should have one main landmark.
  • The main landmark should be a top-level landmark.
  • When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark.
  • If a page includes more than one main landmark, each should have a unique label.

You can use both <div role="main"> as HTML main element to define a main landmark.
I prefer the HTML main element.

This PR will not change the current look and feel of the Cassiopeia template.

Testing Instructions

Since landmarks are not directly visible for the sighted people you have to use some assistive technology to make it visible. You can use a browser extension to display landmarks:

Actual result BEFORE applying this Pull Request

The Landmark main is not present on the website. Screenshot below display the result of the Landmark extension for the Cassiopeia homepage with sample data
Schermafdruk 2020-07-01 11 54 40

Expected result AFTER applying this Pull Request

The Landmark main is present on the website. Screenshot below display the result of the Landmark extension for the Cassiopeia homepage with sample data.

Schermafdruk 2020-07-01 11 54 27

Documentation Changes Required

No changes required

@brianteeman
Copy link
Contributor

There are many ways to skin a cat but this certainly works

@brianteeman
Copy link
Contributor

I have tested this item ✅ successfully on 6b6c165


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

@ceford
Copy link
Contributor

ceford commented Jul 1, 2020

I have tested this item ✅ successfully on 6b6c165

For English speakers: Firefox => https://addons.mozilla.org/en/firefox/addon/landmarks/


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

@richard67
Copy link
Member

RTC


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

@joomla-cms-bot joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Jul 1, 2020
@Quy Quy added this to the Joomla 4.0 milestone Jul 20, 2020
@Quy Quy merged commit dc75dbe into joomla:4.0-dev Jul 20, 2020
@joomla-cms-bot joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Jul 20, 2020
@hans2103 hans2103 deleted the origin/feature/#68-Making-the-Cassiopeia-template-more-accessible branch July 20, 2020 21:14
dgrammatiko added a commit to dgrammatiko/joomla-cms that referenced this pull request Jul 21, 2020
…outs

* '4.0-dev' of github.com:joomla/joomla-cms: (612 commits)
  [4.0] Smart Search: Fixing ordering, order direction and disabled button (joomla#29474)
  [4.0] Generate routed Modal links for iframes when not on the root (joomla#30007)
  [4.0] Get menu directly in com_tags menu route helper (joomla#30039)
  Remove collapse when resizing from mobile to desktop (joomla#30132)
  [4.0] Wrap component output in `main` element to make Cassiopeia more accessible (joomla#29870)
  [4.0] Webauthn gmp warning (joomla#29731)
  [4.0] Refactor to return early, remove if depths and throw NotAllowed (joomla#29694)
  [4.0] CLI help text (joomla#29811)
  Feature/draggable typo fixes (joomla#29987)
  [4.0] Removing unnecessary workaround in finder indexer (joomla#30037)
  [4.0] Optimizing Smart Search for larger content (joomla#30008)
  [4.0] Fix js ajax for pre update checker (joomla#29980)
  [4.0] Cassiopea: Fixing modals custom-select fields display (joomla#30097)
  [4.0][com_fields] Fix draggable sorting (joomla#30094)
  [4.0] Correct incorrect @return documentation (joomla#30092)
  [4.0] Menu items modal: adding missing filters (joomla#30087)
  short to long php open tags with echo (joomla#30089)
  Use new Toolbar (joomla#30085)
  [4.0] Center status/date created headers (joomla#29249)
  [4.0] Fix Cassiopea searchtools alignment in modals (joomla#30077)
  ...

# Conflicts:
#	administrator/components/com_templates/src/View/Template/HtmlView.php
#	installation/sql/postgresql/base.sql
#	libraries/src/Application/AdministratorApplication.php
#	libraries/src/Application/SiteApplication.php
sakiss pushed a commit to sakiss/joomla-cms that referenced this pull request Oct 16, 2020
… accessible (joomla#29870)

* ♿ add landmark contentinfo fo footer of the page

* ♿ wrap primary content of the page in landmark main

* ♿ add landmark banner to the header of the page

* small steps... this pr only focus on main element
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants