The gender/sex and GDPR inputs were slightly misaligned (by
1.5em). Now they are aligned with the other inputs which have a width
of 10em (9em width + margin 1em). The label assignments and required
attributes for input elements are made also consistent.
To test:
1) Enable GDPR_Policy syspref
2) Apply patch, run "yarn build --view opac", restart plack
3) Go to /cgi-bin/koha/opac-memberentry.pl
4) Check that the GDPR input box shows the required text now in red
color
5) Check that the alignment of sex/gender and GDPR input matches with
the other inputs perfectly.
Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
It also contains the compiled CSS changes for the previous accessibility commits
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the text colour for the purchase
suggestion box on the OPAC search results page to
make the text easier to read and improve accessibility.
To test:
1. Log in to the OPAC and search for something
2. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to check the contrast ratio
3. Confirm that the Purchase suggestion text
fails to meet accessibility requirements
4. Apply the patch and rebuild CSS:
yarn build --view opac
5. Confirm the text contrast ratio now meets
minimum accessibility requirements
6. Check that the OPAC still looks ok after
the changes.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the colour of the label text in
OPAC search results to increase the contrast ratio,
improve accessibility and make the text easier to read.
To test:
1. Search for something on the OPAC
2. Use an accessibility tool (e.g. Chrome's Lighthouse
tool) to check the contrast ratio
3. Confirm that the labels (Edition, Format etc.) in the
results summary have insufficient contrast
4. Apply the patch and rebuild CSS:
yarn build --view opac
5. Use the accessibility tool to confirm the contrast
ratio now meets minimum accessibility requirements
6. Check that the OPAC still looks ok after the changes
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the colour of the clear search history link
on the OPAC to increase the contrast ratio, improve accessibility
and makes the text easier to read.
To test:
1. Go to the OPAC homepage
2. Use an accessibility tool (e.g Chrome's
Lighthouse tool) to check the contrast ratio
3. Confirm that the clear search history link
has insufficient contrast
4. Apply the patch and rebuild css:
yarn build --view opac
5. Confirm that the contrast ratio now
meets minimum accessibility requirements
6. Check the OPAC still looks ok after the changes
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 changes the colour of the OPAC User Summary heading text to
increase the contrast ratio, improving accessibility and making the
text easier to read.
To test:
1. Log in to the OPAC homepage as a user with items checked out
2. Use an accessibility tool (e.g. Chrome's Lighthouse tool) to test the
contrast ratio.
3. Confirm the UserSummary heading has insufficient contrast.
4. Apply the patch and rebuild css:
yarn build --view opac
5. Use the accessibility tool to confirm the contrast ratio now meets
accessibility requirements
6. Check that the OPAC still looks ok after the changes
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the colour of links on the OPAC
to improve the contrast ratio and make the link
text easier to read. This accessibility issue was
identified using the WebAIM WAVE accessibility
browser extension and Google Chrome's Lighthouse
tool.
To test:
1. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to test the contrast ratio.
2. Confirm that some links (e.g. breadcrumb links
and title links in search results) have
insufficient contrast.
3. Apply the patch and rebuild the OPAC CSS:
yarn build --view opac
4. Use the accessibility tool to confirm the
contrast ratio meets minimum requirements
5. Check that the OPAC still looks ok after the
changes.
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 changes the colour of the masthead
search label to improve accessibility and make it
easier to read.
To test:
1. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to test the contrast ratio.
2. Confirm that the search label has insufficient
contrast.
3. Apply the patch and rebuild the OPAC CSS:
yarn build --view opac
4. Use the accessibility tool to confirm the
contrast ratio now meets accessibility
requirements.
5. Check that the OPAC still looks ok after
the changes.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch changes the colour of the navigation
links on the OPAC (Cart, Lists etc.) to improve
the contrast ration and make them easier to read.
To test:
1. Use an accessibility tool (e.g. Chrome's
Lighthouse tool) to check the contrast
ratio on the OPAC
2. Confirm that the navigation links have
insufficient contrast
3. Apply the patch and rebuild the OPAC css:
yarn build --view opac
4. Use the accessibility tool to confirm
the contrast ratio meets the minimum
accessibility requirements
5. Check that the OPAC looks ok after the
changes
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Actually this rule does nothing, it defines same background color as "body" : #fcf9fc
Test plan :
1) Without patch look at OPAC header
2) With patch OPAC header should have same background color
Signed-off-by: Joonas Kylmälä <joonas.kylmala@iki.fi>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Actually looking at a record search or details, we see a black label
(for example "Author:") and a grey metadata (for example "J.R.R Tolkien").
Seems bad for accessibility.
In my opinion the most important to see is the metadata not the label.
It is possible to change with a custom CSS but I open this report to
propose to change default display.
Test plan :
1) Apply patch and build CSS in OPAC and staff interface
2) Search for any record in OPAC/Staff interface
3) You see grey label and black metadata
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds labels to the checkboxes on the "Your cart" page to
improve accessibility for users of screen readers. The labels are
hidden from display because the item titles provide enough visual
context.
Test Plan:
1. Go to the OPAC
2. Search for some items and add them to your cart
3. Inspect the page html and confirm the checkboxes are not labelled
4. Select the "More Details" page and confirm these labels are missing too
5. Apply the patch
6. Inspect the checkboxes on the "Brief display" and "more details" views
7. Confirm that the checkboxes have meaningful labels and that the visual
display of the pages has not changed.
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
JD amended patch: fix indentation
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds a "Log out" link to the OPAC header which is hidden by
CSS when JavaScript is enabled.
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).
- Log in to the OPAC with JavaScript disabled in your browser.
- In the header next to the logged-in user's name there should be a
"Log out." link.
- Confirm that it logs the user out.
- Enable JavaScript and repeat the process to confirm that the new
logout link doesn't appear.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes some minor changes to the header menu in the OPAC
visible only to users with JavaScript support.
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).
- View the OPAC with JS disabled in your browser.
- The "Cart" button should not be visible.
- The "List," "Log in," and "Search history" links should be styled
blue like other links.
- Log in to the OPAC and confirm that the "Welcome <name>" link is also
styled like other links.
- Enable JavaScript and verify that the links appear and function just
as they did before the patch.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Changed user summary CSS to style H2 not H3 heading
To test:
1) Go to OPAC homepage
2) Login as a user with at least one loan
3) See that the "User summary" heading is not styled
4) Apply patch
5) Run yarn build --view OPAC
6) Confirm the heading is now styled with grey background
Signed-off-by: Wainui Witika-Park <wainuiwitikapark@catalyst.net.nz>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes minor changes to the SCSS so that the user summary
page's DataTables button flow better at very narrow widths.
Also, the main container should have less padding at narrow widths.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes minor changes to OPAC CSS in order to improve the way
the logged-in user's "your account" page works at narrower browser
widths.
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).
- Log in to the OPAC as a user who has multiple checkouts.
- Test the page at various browser widths, from > 1200 pixels wide to <
300 pixels wide. Your browser's built-in responsive design mode,
found in developer tools, can make these measurements easier.
- At "phone-size" width the tabs ("Checked out," "Overdue," etc) should
start displaying full-width.
- The DataTable controls at the top of the checkouts table should
adapt well as the browser width changes.
- At narrower widths the tables on this page should display much better
than they did before the patch: They should expand to fit the width
of the page.
Edit: Tweaked the display property of the table search field at narrower
browser widths; Converted iCal download link to button to match other
elements in the toolbar.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This correction fixes the previous patch which was dumb and stupid.
This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:
font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148
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).
- Open the OPAC main page in Firefox.
- Click the search type dropdown. The options should be styled using
your system's default sans-serif font rather than a serif font.
- Check that other areas of the OPAC are still styled with the correct
"NotoSans" font. An error with this patch should be obvious when
looking at a logged-in user's checkouts.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds a new include file for displaying library addresses
according to the AddressFormat system preference. It differs from the
include file used for patrons in the staff interface because library
addresses don't use streetnumber or road types.
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).
- Make sure you have fill address information entered for at least one
library.
- In the OPAC, view the "Libraries" page.
- Check that the format of the library addresses is correct when using
any of the three address formats: de, fr, and us.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch tweaks the CSS for the advanced search form in the OPAC so
that it adjusts well at various browser widths, including preventing the
form from taking up the whole width of the page at higher browser
widths.
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).
- In the OPAC, go to the advanced search page.
- Test the appearance of the fields in the first "Search for" section,
confirming that everything adjusts well at all widths large and small.
- Click the "More options" button and test that configuration as well.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds a default font family "sans-serif" to the OPAC CSS as a
workaround for this Firefox bug:
font-family isn't honored in `<option>` element within `<select>`
dropdown
https://bugzilla.mozilla.org/show_bug.cgi?id=1536148
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).
- Open the OPAC main page in Firefox.
- Click the search type dropdown. The options should be styled using
your system's default sans-serif font rather than a serif font.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Henry Bolshaw <bolshawh@parliament.uk>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch improves the way we handle required fields in the patron
entry/update form in the OPAC. Instead of doing multiple checks for each
field using mandatory.defined(), the template now loops over a list of
fields and sets a "required" variable for any which are required.
Then, for each form field, the "required" variable is used to set
classes on labels, input fields, and the "required" text hints. The
class on form fields acts as a hook for the jQuery validator plugin. The
class on the text hints allows us to hide the text hint using CSS,
eliminating the necessity of using a template conditional.
The patch also adds the missing validator-strings include which enables
translation of the jQuery validator plugin's validation error messages.
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).
- Go to Administration -> System preferences and enable
PatronSelfRegistration.
- Select multiple fields to be required using the
PatronSelfRegistrationBorrowerMandatoryField preference.
- In the OPAC, start the process of registering for an account.
- The fields you designated as mandatory should each have a "Required"
label under them.
- Try to submit the form without entering any data. The required fields
should now be highlighted in red and have another label, "This field
is required."
- Fill in the required fields and submit the form. It should submit
correctly.
- Modify the PatronSelfRegistrationBorrowerMandatoryField preference
and select all fields as mandatory. Confirm that all fields in the
patron entry form work correctly.
- Test that form validation works correctly when modifying a logged-in
patron's existing account.
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch adds a search field and export options to the
patron's checkout history table in the OPAC.
This patch also adds some showing/hiding classes to controls which
should only be seen by users with or without JavaScript: The <select>
for resorting the table is hidden when JS is enabled. The tabs for
filtering checkouts from on-site checkouts are hidden when JS is
disabled.
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).
- Log in to the OPAC as a user who has both regular and on-site
checkouts.
- Go to "Your checkout history."
- The table of checkouts should have controls at the top: A search
field, "Clear filter," "Copy," "CSV," and "Print."
- Confirm that the search filter works: Enter some text which will
return results among regular or on-site checkouts.
- It should work correctly to filter the results.
- If you switch tabs, the filter should persist, and correctly filter
the results under "Checkouts" and "On-site checkouts."
- The "Clear filter" button should work correctly to clear your
search.
- Test the export and print button to confirm that they work for each
table.
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes a couple of minor corrections to templates related to
OPAC search results: An errant quote, and invalidly repeating ids.
The #login4tags id is changed to a class, and CSS related to this id
(which was not used) is removed. For consistency, the id is changed to a
class on the detail page as well.
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).
- Perform a search in the OPAC. Confirm that the "Log in to add tags"
link still looks correct at various browser widths.
- Confirm that it works to trigger the login modal.
- Validate the source of the page. There should be no errors.
- View the detail page for a bibliographic record.
- The "Log in to add tags" link should look correct and work correctly.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch makes markup and CSS changes to areas of the OPAC classed
with "selections-toolbar," an area of controls found at the top of some
lists of titles: The cart, search results, search history, lists, and
suggestions.
To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
- Perform a search in the OPAC. On the search results page, confirm that
the various controls work correctly:
- With OpacHighlightedWords enabled, hightlight and unhighlight links
- Select all and clear all links
- Selecting one or more checkboxes should enable the "Select titles
to..." menu.
- Test that adding items to the cart and lists works correctly.
- Test that placing multiple holds work.
- Test that tagging multiple items works.
- From the search results page, add multiple items to the cart.
- Open the cart and confirm that the the controls described above
continue to work correctly.
- Open the search history page, confirm that the toolbar controls work
correctly for all four categories: Current session catalog searches;
previous session catalog searches; current session authority searches;
previous session authority searches.
- On the purchase suggestions page, confirm that "select all" and "clear
all" work, and that deleting multiple suggestions from the toolbar
link works.
- On the list contents page test the same controls: selection,
multi-hold, tagging, and "Remove from list."
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
I'm sure adding a 'hidden' class to a table column used to remove it
from display entirely.. seems that's no longer the case so we add the
CSS back in here.
Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the global OPAC css such that selectcol type columns
in tables are fixed width at 1ch to ensure these columns do not get
unneccessarily wide.
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).
Test plan
PAGES: opac-basket, opac-messaging, opac-results, opac-search-history,
opac-suggestions and opac-tags.
1/ Notice that the column containing a checkbox on each of the above
pages is of a mised width, often much larger than required
2/ Apply the patch and rebuild the css file as described above
3/ Notices that the column containing a checkbox on each fo the above
pages is now of a standard, sensible, width.
4/ Signoff
Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch corrects which Bootstrap assets are compiled with the OPAC
CSS -- The file for Bootstrap tooltips should be included.
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).
1) Log into the OPAC.
2) Go to 'your messaging' (opac-messaging.pl).
3) Hover over the Digests only tooltip.
4) Note that the tooltip looks correct.
Signed-off-by: Sally <sally.healey@cheshiresharedservices.gov.uk>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
This patch updates the "your summary" page in the OPAC so that tables on
the logged-in user's page have DataTables controls. The patch also
tweaks the DataTable configuration of some other pages to make them all
more consistent.
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).
- Log in to the OPAC as a user who has checkouts, overdues, and holds.
- On the "your summary" page, confirm that the checkouts table has
controls at the top: A search form and link-style buttons: Clear
filter, Copy, CSV, Print, iCal, Renew selected, and Renew all.
- Confirm that each work correctly.
- At the bottom of the page, the style of the "Renew selected" and
"Renew all" buttons should now be side by side.
- Confirm that both buttons work correctly.
- If necessary, enable the UseCourseReserves system preference.
- Go to the OPAC course reserves page.
- Confirm that there is a working "Search courses" field at the top of
the table.
- View the contents of a course reserve.
- There should be a "Search course reserves" field at the top of the
table.
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
