make library/Bobcat search widget accessible

[paregorios]

Additional search options should be organized in the form before the go button. Form element should have the role of search. Each search landmark should have a unique label.

Also:

The tab panel in the library search should implement the [following] outlined WAI-ARIA keyboard interactions and roles, states, and properties.

Tab Panel

Tabs are a set of layered sections of content that display one panel of content at a time. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.

When a tabbed interface is initialized, one tab panel is displayed and its associated tab is styled to indicate that it is active. When the user activates one of the other tab elements, the previously displayed tab panel is hidden, the tab panel associated with the activated tab becomes visible, and the tab is considered “active”.

Keyboard Interaction

• Tab: When focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
• When focus is on a tab element in a horizontal tab list:
  • Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab.
  • Right Arrow: Moves focus to the next tab. If focus is on the first tab, moved focus to the last tab.
• When focus is on a tab in a tablist with either horizontal or vertical orientation:
  • Space or Enter: Activates the tab if it was not activated automatically on focus.

WAI-ARIA Roles, States, and Properties

• The element that serves as the container for the set of tabs has role tablist.
• Each element that serves as a tab has a role tab and is contained within the element with role tablist.
• Each element that contains the content panel for a tab has role tabpanel
• Each element with role tab has the property aria-controls referring to its associated tabpanel element.
• The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
• Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
• If a tab element has a pop-up menu, it has the property aria-haspop set to either menu or true.
• If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal.

Traceability: Microassist Complex Interaction Plan

[paregorios]

Tom to address this because reasons.

[paregorios]

Either the NYU library will create a new, accessible version of this drop-in that we original got from them and we will update manually once they have, or we will need to pull it from the ISAW website by the end of July 2020 (or sooner, if this page gets modified in any way for any reason). Leaving assigned to me to research what the libraries are doing in this regard.

CC. @dmratzan @diyclassics for fyi

[dmratzan]

Thanks. I hope they fix this!

On Wed, Jun 13, 2018 at 3:31 PM, Tom Elliott notifications@github.com wrote:

Either the NYU library will create a new, accessible version of this drop-in that we original got from them and we will update manually once they have, or we will need to pull it from the ISAW website by the end of July 2018. Leaving assigned to me to research what the libraries are doing in this regard.

CC. @dmratzan https://github.com/dmratzan @diyclassics https://github.com/diyclassics for fyi

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/isawnyu/isaw.web/issues/279#issuecomment-397057934, or mute the thread https://github.com/notifications/unsubscribe-auth/APDstR3ZWu9aFL7QCEn3WEfTWozLU7V0ks5t8Wh5gaJpZM4Uczri .

-- Dr. David M. Ratzan Head, ISAW Library Institute for the Study of the Ancient World http://isaw.nyu.edu/library New York University 15 East 84th St. New York, NY 10028 212-992-7832 @ISAWlib http://twitter.com/ISAWLib and @papyrologus http://twitter.com/papyrologus ISAW Library Blog http://isaw.nyu.edu/library/blog and the ISAW Library Facebook page http://www.facebook.com/pages/ISAW-Library/170583562953314

[diyclassics]

@paregorios The <h3> for "Search Bobcat" still appears on the site even though the widget has been pull for now; cf. https://isaw.nyu.edu/library/Find/Finding%20Resources. I want to remove it—can I do this through the ISAW web interface? i.e. Do I checkout a copy of that page and remove that tag and (re)publishing it? or does it need to be done here?

[paregorios]

You should be able to do it with a checkout of the page. Depending on whether the tinymce editor plugin messes with you, you may have to click the “HTML” button on the editor toolbar to edit it by hand.

Tom Elliott, Ph.D. Associate Director for Digital Programs Senior Research Scholar Institute for the Study of the Ancient World New York University tom.elliott@nyu.edu

http://isaw.nyu.edu/people/staff/tom-elliott pronouns: he, him OrcId: http://orcid.org/0000-0002-4114-6677

On Nov 14, 2018, at 3:25 PM, Patrick J. Burns notifications@github.com wrote:

@paregorios https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_paregorios&d=DwMFaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=7JN6srnWbiUKKqSduQp_AZyX8Y6wZvZSbFNLOC4QkwA&m=NoWKsOuvpCBLRtwtEyOoN6zejBWyT5piiGU1fMxnSSU&s=WOmaCDSjEBnKYUIHxI4KGxyJDU-T-y0hRKbm0JR2Ioc&e= The

for "Search Bobcat" still appears on the site even though the widget has been pull for now; cf. https://isaw.nyu.edu/library/Find/Finding%20Resources https://isaw.nyu.edu/library/Find/Finding%20Resources. I want to remove it—can I do this through the ISAW web interface? i.e. Do I checkout a copy of that page and remove that tag and (re)publishing it? or does it need to be done here?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_isawnyu_isaw.web_issues_279-23issuecomment-2D438701144&d=DwMFaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=7JN6srnWbiUKKqSduQp_AZyX8Y6wZvZSbFNLOC4QkwA&m=NoWKsOuvpCBLRtwtEyOoN6zejBWyT5piiGU1fMxnSSU&s=ZyRu4yvutbts0QZQD-5RdVZQ8Oy5wxDnYtgqMGZAVJA&e=, or mute the thread https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_AAQEdfqfSz1mpr5kyq5aBm-2DOddd-5FlpbPks5uvDXRgaJpZM4Uczri&d=DwMFaQ&c=slrrB7dE8n7gBJbeO0g-IQ&r=7JN6srnWbiUKKqSduQp_AZyX8Y6wZvZSbFNLOC4QkwA&m=NoWKsOuvpCBLRtwtEyOoN6zejBWyT5piiGU1fMxnSSU&s=FqyQqm6IN95_N_j6GxJ8ZWgqV1qtW43j6xPJhL7Z8jA&e=.

[diyclassics]

Done, and rather than delete, I commented out the content following the example of the widget HTML already 'removed' from the page—closing.

[diyclassics]

Reopening, as the main subject of this issue is still open.

[paregorios]

@diyclassics I don't understand why the widget disappeared in the first place. If you have contacts downtown in the libraries you can ask about a new, accessible drop-in widget like this, I'd be grateful. The original came from here, but I haven't seen any indication that these have been updated for accessibility.