Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#18357] - Isis Pagination update

? ? Pending

User tests: Successful: Unsuccessful:

avatar brianteeman
brianteeman
17 Oct 2017

Improve the accessibility of the pagination - there are no visual changes

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

Note 1

This PR does not include the language strings as they were added in #18326

Note 2

I dont know why but isis and protostar (see #18326) use an override for pagination instead of the layout. For b/c this PR is just for the override but when approved I will do a similar PR for the layout

Thanks to @fuzzbomb (Drupal 8 Core Accessibility Maintainer) for his advice and reviewing this

avatar joomla-cms-bot joomla-cms-bot - change - 17 Oct 2017
Category ⇒ Administration Templates (admin)
avatar brianteeman brianteeman - open - 17 Oct 2017
avatar brianteeman brianteeman - change - 17 Oct 2017
Status New ⇒ Pending
avatar brianteeman brianteeman - change - 17 Oct 2017
Labels Added: ?
avatar Quy
Quy - comment - 17 Oct 2017

See output. Page Previous shouldn't be aria-current="true" right?? Can you have more than one aria-current="true"?

			<nav role="navigation" aria-label="Pagination">
			<ul class="pagination-list">
					<li class="disabled">
		<span aria-current="true" aria-label="Page Start (Page 1 of 4)">
			<span class="icon-backward icon-first" aria-hidden="true"></span>		</span>
	</li>
	<li class="disabled">
		<span aria-current="true" aria-label="Page Previous">
			<span class="icon-step-backward icon-previous" aria-hidden="true"></span>		</span>
	</li>
										<li class="active">
		<span aria-current="true" aria-label="Page 1">
			1		</span>
	</li>
avatar brianteeman
brianteeman - comment - 17 Oct 2017

no that looks wrong - i will check it again later

avatar brianteeman
brianteeman - comment - 17 Oct 2017

@Quy open to suggestions/help - the code here is a bit funky

avatar Quy Quy - test_item - 18 Oct 2017 - Tested successfully
avatar Quy
Quy - comment - 18 Oct 2017

I have tested this item ✅ successfully on 94bb83c

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

avatar franz-wohlkoenig
franz-wohlkoenig - comment - 25 Oct 2017

@Quy can you please explain how the Code looks without and with Pull Request?

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

avatar Quy
Quy - comment - 25 Oct 2017

Go to Content > Articles
View page source
Find <ul class="pagination-list">

Before PR:
pagination-before

After PR:
pagination

avatar franz-wohlkoenig franz-wohlkoenig - test_item - 25 Oct 2017 - Tested successfully
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 25 Oct 2017

I have tested this item ✅ successfully on 94bb83c

Thanks for Help, @Quy

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

avatar franz-wohlkoenig franz-wohlkoenig - change - 25 Oct 2017
Status Pending ⇒ Ready to Commit
avatar franz-wohlkoenig
franz-wohlkoenig - comment - 25 Oct 2017

RTC after two successful tests.

avatar mbabker mbabker - change - 26 Oct 2017
Status Ready to Commit ⇒ Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 ⇒ 2017-10-26 00:02:13
Closed_By ⇒ mbabker
Labels Added: ?
avatar mbabker mbabker - close - 26 Oct 2017
avatar mbabker mbabker - merge - 26 Oct 2017
avatar brianteeman
brianteeman - comment - 26 Oct 2017

Thanks

Add a Comment

Login with GitHub to post a comment