? Pending

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
30 Jul 2018

The aim of this PR is to make the pagination seen in list views in the front end accessible - there are no visual changes

  • Wrap the pagination in a nav and add a role (needed for IE) and an aria-label
  • Ensure font icons have aria-hidden=true
  • Add aria-current to the selected page
  • Add aria-title to the active links eg Go to page 1

Note 1
that the disabled links will not be announced to a screen reader which is the intended behaviour

Note 2
the list is an unordered list which appears to be the standard as otherwise the links would be announced as Link 1 go to page 2 etc which is nonsense

Changes

libraries\src\Pagination\Pagination.php
Updated to use the layouts as per the note that they were to be used from J4

However the layouts were not correct and not accessible

layouts\joomla\pagination\list.php
Simplified - as far as I could tell

layouts\joomla\pagination\link.php
Updated for a11y - the a11y should be fine but the code could probably be improved perhaps

avatar brianteeman brianteeman - open - 30 Jul 2018
avatar brianteeman brianteeman - change - 30 Jul 2018
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 30 Jul 2018
Category Layout Libraries
avatar brianteeman brianteeman - change - 30 Jul 2018
Title
[4.0] [a11y] Pagination
[4.0] [a11y] Pagination site
avatar brianteeman brianteeman - edited - 30 Jul 2018
4f6f99f 30 Jul 2018 avatar brianteeman drone
avatar brianteeman brianteeman - change - 30 Jul 2018
Labels Added: ?
772a390 30 Jul 2018 avatar brianteeman cs
avatar brianteeman
brianteeman - comment - 30 Jul 2018

layouts\joomla\pagination\links.php
Not touched this file but I can't see it being used???

Looks like this file is used in the admin (when you turn off the override) I still dont understand why we have a different layout

avatar rdeutz
rdeutz - comment - 30 Jul 2018

We have two types of pagination and if I remember correctly it depends how you create the pagination. Its strange and don't asked me why it is like it is.

avatar brianteeman
brianteeman - comment - 30 Jul 2018

well I will make sure the other one is a11y compliant when I remove the atum override etc and after #21293 is merged

avatar brianteeman
brianteeman - comment - 2 Aug 2018

@ciar4n can you advise on the css please

avatar ciar4n
ciar4n - comment - 2 Aug 2018
.disabled.page-link:hover {
  background: transparent;
}
.disabled.page-link {
  color: #999;
}
.active.page-link.current {
  background-color: #dee2e6;
  color: #999;
}

Translates to the following in scss..

.page-link {
  &.active {
    background-color: #dee2e6;
    color: #999;
  }
  &.disabled {
    color: #999;
    &:hover {
      background: transparent;
    }
  }
}

I dont believe there is need for the .current

avatar ciar4n
ciar4n - comment - 2 Aug 2018

CSS ? on the links
Currently only the actual number is clickable - it should be the entire area - please advise on this

You need to remove the padding from the .page-link and add it to the .page-link a instead

avatar brianteeman
brianteeman - comment - 2 Aug 2018

And which scss file would be the best. It should be global and not template
specific.

avatar ciar4n
ciar4n - comment - 2 Aug 2018

We currently don't have any CSS file loaded globally. Why do you say this should be global?

avatar dgrammatiko
dgrammatiko - comment - 2 Aug 2018

It should be global and not template specific.

It should be layout (pagination) specific!

Also I thought that we will not depend on Font awesome for the front end but I still see FA classes and also not even loading the required asset here... ?

avatar brianteeman
brianteeman - comment - 2 Aug 2018

I give up. You make rules that are not documented anywhere. If it's not
documented then it's not a rule.

On Thu, 2 Aug 2018, 18:37 dGrammatiko, notifications@github.com wrote:

It should be global and not template specific.

It should be layout (pagination) specific!

Also I thought that we will not depend on Font awesome for the front end
but I still see FA classes and also not even loading the required asset
here... ?


You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#21306 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8QgjMoVh8G6XphZcQlaZaC6-OOH3ks5uMzi-gaJpZM4VmaJ4
.

avatar brianteeman
brianteeman - comment - 2 Aug 2018

@ciar4n maybe I used the wrong terminology. But surely we have some standard CSS that is used everywhere and can be used by any template.

avatar mbabker
mbabker - comment - 2 Aug 2018

Also I thought that we will not depend on Font awesome for the front end but I still see FA classes and also not even loading the required asset here...

Nothing to do with this pull request...

But surely we have some standard CSS that is used everywhere and can be used by any template.

Nope. We're trying to standardize CSS classes that won't change because of a framework update, but there is no standard CSS that is included into every page/template.

avatar dgrammatiko
dgrammatiko - comment - 2 Aug 2018

You make rules that are not documented anywhere.

Seriously now... You need to grow up dude...

avatar ciar4n
ciar4n - comment - 2 Aug 2018

But surely we have some standard CSS that is used everywhere and can be used by any template.

Excluding the typical reset or normalise CSS, there is very little non-opinionated 'standard CSS' that would be used by every template. I think the best we can do is to lead by good example and place all a11y CSS in the cassiopeia template.

avatar joomla-cms-bot joomla-cms-bot - change - 5 Aug 2018
Category Layout Libraries Layout Libraries Front End Templates (site)
avatar brianteeman
brianteeman - comment - 5 Aug 2018

@ciar4n I applied the scss you recommended but it really does need the current so hopefully my scss is ok now

avatar brianteeman brianteeman - change - 5 Aug 2018
The description was changed
avatar brianteeman brianteeman - edited - 5 Aug 2018
avatar brianteeman brianteeman - change - 5 Aug 2018
The description was changed
avatar brianteeman brianteeman - edited - 5 Aug 2018
avatar brianteeman
brianteeman - comment - 5 Aug 2018

I included the compiled css so that it can be tested with patchtester. I assume that they wont be included when committed

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 6 Aug 2018

@brianteeman can you please give Test Instructions?

avatar brianteeman brianteeman - change - 6 Aug 2018
The description was changed
avatar brianteeman brianteeman - edited - 6 Aug 2018
avatar brianteeman
brianteeman - comment - 6 Aug 2018

original post updated

avatar brianteeman brianteeman - change - 6 Aug 2018
The description was changed
avatar brianteeman brianteeman - edited - 6 Aug 2018
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 6 Aug 2018

thanks for Update @brianteeman

avatar wilsonge
wilsonge - comment - 6 Aug 2018

Can you fix conflicts here please so I can merge this :)

avatar brianteeman
brianteeman - comment - 6 Aug 2018

@wilsonge are you commiting the compiled/minified files

avatar brianteeman
brianteeman - comment - 6 Aug 2018

@wilsonge that should be conflicts fixed

avatar wilsonge
wilsonge - comment - 6 Aug 2018

For now we're committing minified template CSS - this will change in the future though once we've made a decision on where to put the template SASS files and whether they should go into the media directory or not like @dgrammatiko proposed.

avatar wilsonge wilsonge - change - 6 Aug 2018
Status Pending Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2018-08-06 10:46:45
Closed_By wilsonge
avatar wilsonge wilsonge - close - 6 Aug 2018
avatar wilsonge wilsonge - merge - 6 Aug 2018
avatar brianteeman
brianteeman - comment - 6 Aug 2018

ok and thanks

avatar wilsonge
wilsonge - comment - 6 Aug 2018

Thanks!

Add a Comment

Login with GitHub to post a comment