Modified breadcrumbs to be accessible, in particular for a
screen-reader. Also ensured the breadcrumbs were all consistent.
Made the block of breadcrumbs to be a <nav id="breadcrumbs"
aria-label="Breadcrumb" class="breadcrumbs"> with an ordered list
inside. The last breadcrumb also has aria-current="page" to specify that
it is the current page.
To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client)
- Confirm that OPAC templates are updated consistently to use
breadcrumbs markup beginning with '<nav
id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">'
- Pages in the OPAC should look consistent, with the last breadcrumb
styled as text and with the "aria-current" attribute "page."
Sponsored-by: Catalyst IT
Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Ensured that in the OPAC, all tables have relevant captions and all forms have relevant legends.
Many of these have class="sr-only" so they are not visible but will be
available for people who use screen-readers.
To test:
1) Go to OPAC
2) Apply patch and dependencies
3) Check that on all pages, any tables have a caption (many of them will
not be visible, but will be in the markup code)
4) Check that on all pages, any forms have a legend (many of them will
not be visible, but will be in the markup code)
5) Check that the captions are appropriate and relevant
6) Check that the legends are appropriate and relevant
Sponsored-by: Catalyst IT
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Changed each of the pages in the OPAC to have one <h1> tag showing that describes the page, rather than the <h1> describing the logo.
The hierarchy of heading tags may be broken in many pages, but this will be dealt with in a follow up patch or bug.
To test:
1) Go to the OPAC
2) Apply patch
3) Go to each of the pages and check that they have an obvious and
descriptive heading
4) Ensure that the heading in the page is <h1>
Sponsored by: Catalyst IT
Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>
Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Changed the titles of each page on the OPAC to display the unique
information first, and the name of the website (e.g. Koha library
catalog). This is fot accessibility reasons, such as when a
screen reader user is going through tabs, they do not have to waste time
listening to the website name, they can just find the unique page title
first.
To test:
1) Go to the OPAC
2) Apply patch
3) Go to each of the pages and check that the page title has the unique
information about the page first, and the name of the website is at the
end
Sponsored by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the version of Bootstrap in the OPAC from 2.3.1 to
4.5.0. The Bootstrap JavaScript files have been replaced with custom
builds of the 4.5.0 JavaScript source files. The Bootstrap CSS is now
built into the OPAC CSS by loading the required Bootstrap 4.5.0 SCSS
files in node_modules.
OPAC SCSS now starts with Bootstrap customizations:
/* Bootstrap variable customizations */
$headings-color: #727272;
...
Followed by loading the necessary Bootstrap SCSS files:
/* Bootstrap imports */
@import "../../../../../node_modules/bootstrap/scss/functions";
@import "../../../../../node_modules/bootstrap/scss/variables";
...
Followed by our CSS. The build process for generating compiled CSS now
creates a file which bundles Bootstrap CSS and ours. Removed from the
Koha source: Bootstrap CSS files, Bootstrap "glyphicons" images.
The upgrade to Bootstrap 4 involved a lot of markup changes to conform
with new Bootstrap classes, especially in classes related to the grid.
Besides duplicating the grid we used before, this upgrade adds some new
features made possible by Bootstrap 4.5's use of flexbox as a layout
tool. This includes custom ordering of columns based on class names:
https://getbootstrap.com/docs/4.5/layout/grid/#order-classes.
Other areas where the most changes have been made: Navigation menus,
breadcrumb menus, buttons, dropdowns.
Bootstrap's JavaScript file is now "bootstrap.bundle.min.js" to reflect
the fact that a required JavaScript asset is now distributed separately
in Bootstrap 4. The "bundle" version includes Popper.js.
Unrelated changes: Indentation corrections, removal of invalid
"//<
