Skip to content

Instant Search: Improve accessibility #13884

Merged
jsnmoon merged 7 commits intoinstant-search-masterfrom
add/instant-search-aria-live-region
Nov 5, 2019
Merged

Instant Search: Improve accessibility #13884
jsnmoon merged 7 commits intoinstant-search-masterfrom
add/instant-search-aria-live-region

Conversation

@jsnmoon
Copy link
Copy Markdown
Contributor

@jsnmoon jsnmoon commented Oct 29, 2019 •
edited
Loading

Fixes #13644 and parts of #13817.

Changes proposed in this Pull Request:

  • Changes Gridicon titles into fragment sentences where appropriate.
  • Adds search, list, listitem, and main roles where appropriate.
  • Adds aria-live to the search results container.
  • Adds aria-hidden to the search results container while results are loading.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

No.

Testing instructions:

  1. Add define( "JETPACK_SEARCH_PROTOTYPE", true ); to your wp-config.php.
    If using Jetpack's Docker development environment, you can create a file at /docker/mu-plugins/instant-search.php and add the define there.

  2. Ensure that your site has the Jetpack Pro plan and Jetpack Search enabled.
    You can enable Jetpack Search in the Performance tab within the Jetpack menu (/wp-admin/admin.php?page=jetpack#/performance).

  3. Select a theme of your choice and add a Jetpack Search widget to the site via the customizer. If using a theme with a sidebar widget area, please add the Jetpack Search widget there.

  4. If using a theme with a sidebar widget, you can navigate to / to start the search experience. Otherwise, navigate to your search page (e.g. /?s=hello).

  5. Enable a screen reader of your choice (e.g. VoiceOver on macOS).

  6. Enter a search term into the input. Ensure that the search results are read aloud as soon as the search results have been loaded.

Proposed changelog entry for your changes:

None.

@jsnmoon jsnmoon added [Focus] Accessibility Improving usability for all users (a11y) [Status] Needs Review This PR is ready for review. [Feature] Search For all things related to Search Instant Search labels Oct 29, 2019
@jsnmoon jsnmoon requested review from a team, bluefuton, diegohaz and gibrown October 29, 2019 22:21
@jsnmoon jsnmoon self-assigned this Oct 29, 2019
bluefuton
bluefuton reviewed Oct 29, 2019
View reviewed changes
bluefuton
bluefuton reviewed Oct 29, 2019
View reviewed changes
@jsnmoon jsnmoon mentioned this pull request Oct 30, 2019
Closed
@jsnmoon jsnmoon force-pushed the add/instant-search-aria-live-region branch from 4d6de05 to 0f4c4c4 Compare October 30, 2019 22:00
@jsnmoon jsnmoon requested a review from bluefuton October 31, 2019 20:38
@bluefuton
Copy link
Copy Markdown
Contributor

bluefuton commented Nov 4, 2019

Needs a rebase following changes to SearchBox 👨‍💻

@bluefuton bluefuton added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Nov 4, 2019
@jsnmoon jsnmoon force-pushed the add/instant-search-aria-live-region branch from 1874a8d to 89bd075 Compare November 4, 2019 22:24
@jsnmoon jsnmoon added [Status] Needs Review This PR is ready for review. and removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. labels Nov 4, 2019
@jsnmoon jsnmoon force-pushed the add/instant-search-aria-live-region branch from 89bd075 to e33c258 Compare November 4, 2019 22:42
@jsnmoon
Copy link
Copy Markdown
Contributor Author

jsnmoon commented Nov 4, 2019

Just did a big rebase with the latest instant-search-master. Please let me know if you run into any issues!

@bluefuton
Copy link
Copy Markdown
Contributor

bluefuton commented Nov 4, 2019

@jsnmoon needs a tiny further rebase to accommodate the class name changes in #13933 🔧

@jsnmoon jsnmoon force-pushed the add/instant-search-aria-live-region branch from e33c258 to c298552 Compare November 4, 2019 22:47
@jsnmoon
Copy link
Copy Markdown
Contributor Author

jsnmoon commented Nov 4, 2019

Rebased!

@bluefuton
Copy link
Copy Markdown
Contributor

bluefuton commented Nov 4, 2019

Some great improvements here, and more semantic HTML as a bonus!

As @joanrho previously suggested, I think we should hide the result numbering while leaving the <ol> in place for screen readers. We could do this with list-style-type: none and margin: 0 on the list.

Screen Shot 2019-11-05 at 12 08 22

@jsnmoon
Copy link
Copy Markdown
Contributor Author

jsnmoon commented Nov 4, 2019 •
edited
Loading

@bluefuton There's already list-style-type: none being applied to .jetpack-instant-search__search-results-list, so the list numbering shouldn't be visible (394300d). Can you confirm that this is happening on the latest commit on this branch (c298552)?

Screen Shot 2019-11-04 at 4 27 05 PM

@bluefuton
Copy link
Copy Markdown
Contributor

bluefuton commented Nov 4, 2019

Thanks @jsnmoon - I rebuilt the CSS and cleared the cache, which magically removed the numbers.

Accessibility audit is looking good now:

Screen Shot 2019-11-05 at 12 37 26

bluefuton
bluefuton approved these changes Nov 4, 2019
View reviewed changes
Copy link
Copy Markdown
Contributor

@bluefuton bluefuton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢

@bluefuton bluefuton added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels Nov 4, 2019
gibrown
gibrown approved these changes Nov 5, 2019
View reviewed changes
Copy link
Copy Markdown
Member

@gibrown gibrown left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Great improvements.

Listening to the results makes me want to remove the multiple images icon except when it is actually a gallery. cc @bluefuton

@diegohaz
Copy link
Copy Markdown

diegohaz commented Nov 5, 2019

I tested with Safari + Voice Over and it seems to work, but sometimes the screen reader stops announcing the results and starts announcing the text field content:

Nov-05-2019 15-58-21

It doesn't happen always, but more often than not.

@diegohaz
Copy link
Copy Markdown

diegohaz commented Nov 5, 2019

Tested with NVDA on Firefox and Chrome on Windows.

On Firefox it doesn't announce the aria-live changes, pretty much like before. On Chrome it announces the changes and doesn't stop like Voice Over, but it does that very weirdly: it starts from some article at the end of the results and then goes to the previous article, often stopping there. It doesn't announce x results for y.

I've never seen this, but live regions are difficult to handle. One option I would try is to put only the x results for y in the live region. Maybe with less text it works better, but that's just a guess.

@jsnmoon
Copy link
Copy Markdown
Contributor Author

jsnmoon commented Nov 5, 2019

Hi @diegohaz, thanks for taking a look; I'll add your findings to #13817 so we could follow up on those issues in the future.

@jsnmoon jsnmoon merged commit 5122ca6 into instant-search-master Nov 5, 2019
@jsnmoon jsnmoon deleted the add/instant-search-aria-live-region branch November 5, 2019 23:55
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Nov 5, 2019
This was referenced Nov 5, 2019
Open
Merged
gibrown pushed a commit that referenced this pull request Dec 2, 2019
@jsnmoon @gibrown
Instant Search: Improve accessibility (#13884)
fff93d8 
* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results
jsnmoon added a commit that referenced this pull request Feb 12, 2020
@jsnmoon @bluefuton
@gibrown @keoshi
Instant Search: Update prototype with overlay design (#14550)
9aee29d 
* Instant Search: add label and button to search box (#13875)
* Add label and button to search box and convert to functional component
* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)
* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)
* Add product search result component
* Refactor renderResult into component
* Convert SearchResult to stateless functional component
* Move comments to new shared component
* Move Tracks out to common SearchResult
* Request additional fields for product results
* Correct field names and remove ratings for now
* Basic styling of cards with images
* Add price where available
* Read result_format from the query string
* Use ordered list
* Style cleanup
* Minor cleanup
* Remove resultFormat from component state
* SearchResults component cleanup
* Standardise class names
* Validate result format before using as CSS class

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)
* Add PhotonImage component
* Bump default dimensions to 300x300
* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: add label and button to search box (#13875)

* Add label and button to search box and convert to functional component

* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)

* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)
* Add product search result component
* Refactor renderResult into component
* Convert SearchResult to stateless functional component
* Move comments to new shared component
* Move Tracks out to common SearchResult
* Request additional fields for product results
* Correct field names and remove ratings for now
* Basic styling of cards with images
* Add price where available
* Read result_format from the query string
* Use ordered list
* Style cleanup
* Remove resultFormat from component state
* SearchResults component cleanup
* Standardise class names
* Validate result format before using as CSS class

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)
* Add PhotonImage component
* Bump default dimensions to 300x300
* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: default to query string in `getResults()` (#13995)
* Instant Search: use default values for getting results to avoid duplication
* getResults: default to empty object

* Instant Search: add search form to main content area (#14142)
* Split search form out of widget component so it can be reused in the main search area
* Include search form in main content area
* Move sort wrapper into component and improve class name
* Give sort component a more sensible name
* Keep search form in place when there are no results
* Just return null when there isn't a query
* Combine pagination conditionals into one clause
* Drop SearchResultsEmpty component
* Tidy pagination logic
* Pass all props down to SearchForm

* Instant Search: add filter icon toggle (#14176)
* Add filter icon
* Simple show/hide toggle
* Make it an interactive element
* Add aria-hidden to gridicon

* Instant Search: Improve UX for offline network state (#14189)
* Fix invisible space breaking date layout
* Restore info Gridicon
* Add warning notice component
* Check offline state before using short term cache
* Inject cache state variables into response data
* Show “cached results” notice when the user is offline
* Catch connectivity error and notify the user
* Show correct number of results when offline
* Hide load more button when offline
* Wrap new copy in translation calls

* Instant Search: try using an overlay (#14205)
* Try the overlay (Hotel California edition)
* Add button to close overlay
* Always display search form attached to search results
* Add a note about portaled search inputs
* Use showResults instead of using showOverlay value
* Add a large z-index and increase opacity
* Simplify SearchApp, trigger overlay on input focus
* Disable WordPress Search for Instant Search
* Revert "Disable WordPress Search for Instant Search"
* Add jetpack namespace to translation
* Use the searchInputSelector
* Add missing quote

* Instant Search: setup preact-testing-library (#13950)
* Add preact-testing-library
* Add instant-search dir to existing Jest config
* First attempt at test
* Create 'yarn test-search'
* Add jsx pragma
* Enable test and added dependency docblocks
* Remove rogue Slack package

* Instant Search: Port bug fixes from #14247
* Add basic build process to README.

* Instant Search: trigger overlay on submit (#14248)
* Remove focus event listeners
* Respond to submit rather than focus
* Allow enter key to launch overlay
* Reflect widget search input changes in query string
* Close overlay with Esc key
* Reflect query string change in search widget input
* Make sure the sort options match
* Try grabbing focus in getResults
* Remove focus code
* Remove grabFocus (no longer in use)
* Handle overlay escape key with useEffect rather than converting to Component
* Move closeOnEscapeKey out of render

* Instant Search: Add sidebar widget area (#14283)
* Fix linting violations by changing `date` invocations to `gmdate`
* Add sidebar widget area
* Add SearchSidebar component
* Integrate SearchSidebar into SearchResults
* Implement Overlay animation from design prototype

* Instant Search: refactor search php for the different experiences (#14284)
* refactor php to extract all instant search code
* add customizer for the overlay
* add running the search query on the backend to display filters when the page loads.

* Instant Search: fix Esc key behaviour (#14312)
* Instant Search: prevent Esc from opening overlay
* Use isVisible rather than shouldShowOverlay

* Instant Search: Add search filtering inside overlay (#14319)
* Add SearchFilters above SearchSidebar

* Instant Search: Add a button to clear applied filters (#14324)
  * Add function to clear filter query values
  * Fix class names for elements in SearchFilter
  * Add “Clear Filters” button

* Instant search: introduce overlay from right (#14339)
* Introduce overlay from right
* Updating overlay offset values
* Changes units from `vh` to `vw`.
* Updates value from `200` to `100`, as [mentioned here](#14320 (comment)).

* Use the posts_per_page setting to decide how many posts to retrieve (#14360)

* Instant Search: Use widgets inside overlay for filtering (#14374)
* Add search filter portaling inside overlay sidebar
* Update readme with new testing instructions

* Instant Search: update overlay styles (#14379)
* Make search input as large as possible
* Remove opinionated styles
* Add more margin to the filter icon
* Add screen reader text for the search box
* Change order of date element
* Change date position
* Clean up styles
* Update style for comments in search results
* Fix name of CSS property
* Make search result title class more specific, Also reorders styles
* Remove extra screen reader text #14379 (comment)

* Instant Search: Fix taxonomy name compilation bug (#14408)

* Instant Search: Fix date formatting issue for filters (#14409)

* Instant Search: Integrate customizer options (#14427)
* Integrate customizer options for search overlay
* Fix infinite scroll functionality

* Update spacing on offline notice (#14419)

* Instant Search: add dark theme styles (#14429)
* Update styles for base overlay
* Update styles for search results

* Fix filter toggle and integrate with widget area (#14451)

* Instant Search: Improve search form detection (#14474)

* Instant Search: Prevent body scroll with overlay open (#14478)

* Instant Search: Move focus into overlay input (#14477)
* Move focus to and from overlay
* Use useRef and event listeners for focus shifting

* Instant Search: use taxonomy name rather than slug for filters (#14437)
* Fix display of category filters
* Update buildFilterObject()

* Fix filter formatting in Zerif Lite (#14493)

* Instant Search: switch to use .slug_slash_name for displaying custom taxonomies, tags and categories (#14492)
* Switch to use .slug_slash_name for taxonomies, tags and categories
* Use slug in the query, and name for display

* Instant Search: Hotfix body scrolling behavior

* Instant Search: Apply customizer changes without page reload (#14504)

* Instant Search: Update mobile structure (#14423)
* Add cross gridicon
* Replace close button label by a gridicon
* Change position of close button
* Update z-index stacking order, prevents sidebar to be in front of the close button
* Reorder CSS properties
* Add medium break point at 768px
* Add mobile styles for filters popover
* Change how transparency is set on the overlay
* Update break-small to break-medium
* Add styles for smaller close button on mobile devices
* Add arrow element to popover
* Remove styles that are out of place
* Update search results styling
* Add popover styles
* Update filter icon margins
* Show sidebar filters up to 768px, see #14423 (review)
* Bring up the opacity on the arrow border
* Reduce side padding on small screens
* Move margin to label span instead of select element

* Instant Search: Restore initial href upon closing overlay (#14518)
* Restore initial href when closing overlay
* Fix incorrect inline style removal

* Instant Search: Restore focus to activeElement (#14522)

* Search: Front end search filters open overlay (#14448)
* Refactor filter display for front end
* Remove rendering filters in the overlay
* Front end filters open the overlay

* Instant search: add "powered by Jetpack" message (#14519)
* Show JetpackColophon when setting is activated
* Translate text
* Added logo and styles
* Style tweaks
* Link to jetpack.com/search
* Add colophon to mobile filters
* Margin tweak

* Instant Search: Clear search and filter queries when necessary (#14533)
* Clear search and filter queries if necessary
* Improve initialHref restoration function
* Create a separate handler for popstate events

* Instant Search: Refine TrainTracks integration (#14587)

* Instant Search: Fix broken dates in iOS Chrome (#14586)

* Instant Search: Update list of widgets passed to JS client (#14596)
* Only return widgets inside the overlay sidebar
* Remove overlay sidebar membership check in JS

* Instant Search: Escape wp_json_encode

* Instant Search: Add missing translation calls

* Update escaping from code review.

* Instant Search: Fix unit tests

* Instant Search: Fix ESLint errors

* Instant Search: Add files to PHPCS whitelist

Co-authored-by: Chris R <chris@bluefuton.com>
Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com>
Co-authored-by: Filipe Varela <keoshi@keoshi.com>
mdbitz pushed a commit that referenced this pull request Feb 24, 2020
@jsnmoon @bluefuton
@gibrown @keoshi @skjaini
Instant Search: Polish search interface UX (#14762)
f3b3922 
* Instant Search: add label and button to search box (#13875)

* Add label and button to search box and convert to functional component

* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)

* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)

* [not verified] Add product search result component

* [not verified] Refactor renderResult into component

* [not verified] Convert SearchResult to stateless functional component

* [not verified] Move comments to new shared component

* [not verified] Move Tracks out to common SearchResult

* [not verified] Request additional fields for product results

* Correct field names and remove ratings for now

* Basic styling of cards with images

* Add price where available

* Read result_format from the query string

* Use ordered list

* Style cleanup

* Minor cleanup

* Remove resultFormat from component state

* SearchResults component cleanup

* Standardise class names

* Validate result format before using as CSS class

* Address review nits

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)

* Add PhotonImage component

* Bump default dimensions to 300x300

* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: add label and button to search box (#13875)

* Add label and button to search box and convert to functional component

* Correct lodash import

* Instant Search: Ignore empty query values for filters (#13934)

* Instant Search: Pay down technical debt (#13847)

* Instant Search: Standardize class and ID prefixes (#13933)

* Instant Search: Improve accessibility (#13884)

* Turn statements into sentence fragments
* Add appropriate landmark roles for elements
* Set portaled widget as a search form
* Use ordered list for search results

* Instant Search: only show multiple image icon for posts with gallery (#13968)

* Add testing instructions to README (#13969)

* Instant search: add product result component (#13826)

* [not verified] Add product search result component

* [not verified] Refactor renderResult into component

* [not verified] Convert SearchResult to stateless functional component

* [not verified] Move comments to new shared component

* [not verified] Move Tracks out to common SearchResult

* [not verified] Request additional fields for product results

* Correct field names and remove ratings for now

* Basic styling of cards with images

* Add price where available

* Read result_format from the query string

* Use ordered list

* Style cleanup

* Minor cleanup

* Remove resultFormat from component state

* SearchResults component cleanup

* Standardise class names

* Validate result format before using as CSS class

* Address review nits

* Instant Search: Restore caching to API requests (#13981)

* Instant Search: add basic Photon support (#13998)

* Add PhotonImage component

* Bump default dimensions to 300x300

* Bump asset size limit to 100kb

* Add layout CSS for product results (#14017)

* Instant Search: Add error/offline handling for API (#14125)

* Instant Search: move date into new component and use <time> element (#14133)

* Instant Search: improve display of matching comments (#14132)

* Instant Search: default to query string in `getResults()` (#13995)

* Instant Search: use default values for getting results to avoid duplication

* getResults: default to empty object

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Instant Search: add search form to main content area (#14142)

* Split search form out of widget component so it can be reused in the main search area

* Include search form in main content area

* Move sort wrapper into component and improve class name

* Give sort component a more sensible name

* Keep search form in place when there are no results

* Just return null when there isn't a query

* Combine pagination conditionals into one clause

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Drop SearchResultsEmpty component

* Tidy pagination logic

* Pass all props down to SearchForm

* Instant Search: add filter icon toggle (#14176)

* Add filter icon

* Simple show/hide toggle

* Make it an interactive element

* Add aria-hidden to gridicon

* Instant Search: Improve UX for offline network state (#14189)

* Fix invisible space breaking date layout
* Restore info Gridicon
* Add warning notice component
* Check offline state before using short term cache
* Inject cache state variables into response data
* Show “cached results” notice when the user is offline
* Catch connectivity error and notify the user
* Show correct number of results when offline
* Hide load more button when offline
* Wrap new copy in translation calls

* Instant Search: try using an overlay (#14205)

* Try the overlay (Hotel California edition)

* Add button to close overlay

* Always display search form attached to search results

* Add a note about portaled search inputs

* Use showResults instead of using showOverlay value

* Add a large z-index and increase opacity

* Simplify SearchApp, trigger overlay on input focus

* Disable WordPress Search for Instant Search

* Revert "Disable WordPress Search for Instant Search"

This reverts commit 65b7dcb.

* Add jetpack namespace to translation

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Use the searchInputSelector

Co-Authored-By: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Add missing quote

* Instant Search: setup preact-testing-library (#13950)

* Add preact-testing-library

* Rebase

* Add instant-search dir to existing Jest config

* First attempt at test

* Tidying

* Create 'yarn test-search'

* Remove package-lock.json

* Add jsx pragma

* [not verified]

* Enable test and added dependency docblocks

* Remove rogue Slack package

* Instant Search: Port bug fixes from #14247

* Add basic build process to README.

* Instant Search: trigger overlay on submit (#14248)

* Remove focus event listeners

* Respond to submit rather than focus

* Allow enter key to launch overlay

* Reflect widget search input changes in query string

* Close overlay with Esc key

* Reflect query string change in search widget input

* Make sure the sort options match

* Try grabbing focus in getResults

* Remove focus code

* Remove grabFocus (no longer in use)

* Handle overlay escape key with useEffect rather than converting to Component

* Move closeOnEscapeKey out of render

* Instant Search: Add sidebar widget area (#14283)

* Fix linting violations by changing `date` invocations to `gmdate`
* Add sidebar widget area
* Add SearchSidebar component
* Integrate SearchSidebar into SearchResults
* Implement Overlay animation from design prototype

* Instant Search: refactor search php for the different experiences (#14284)

- refactor php to extract all instant search code
- add customizer for the overlay
- add running the search query on the backend to display filters when the page loads.

* Instant Search: fix Esc key behaviour (#14312)

* Instant Search: prevent Esc from opening overlay

* Use isVisible rather than shouldShowOverlay

* Instant Search: Add search filtering inside overlay (#14319)

* Add SearchFilters above SearchSidebar
* Instant Search: Add a button to clear applied filters (#14324)
  * Add function to clear filter query values
  * Fix class names for elements in SearchFilter
  * Add “Clear Filters” button

* Instant search: introduce overlay from right (#14339)

* Introduce overlay from right

* Updating overlay offset values

- Changes units from `vh` to `vw`.
- Updates value from `200` to `100`, as [mentioned here](#14320 (comment)).

Co-authored-by: Filipe Varela <keoshi@keoshi.com>

* Use the posts_per_page setting to decide how many posts to retrieve (#14360)

* Instant Search: Use widgets inside overlay for filtering (#14374)

* Add search filter portaling inside overlay sidebar
* Update readme with new testing instructions

* Instant Search: update overlay styles (#14379)

* Make search input as large as possible

* Remove opinionated styles

* Add more margin to the filter icon

* Add screen reader text for the search box

* Change order of date element

* Change date position

* Clean up styles

* Update style for comments in search results

* Fix name of CSS property

* Make search result title class more specific

Also reorders styles

See: #14379 (comment)

* Remove extra screen reader text

See: #14379 (comment)

* Instant Search: Fix taxonomy name compilation bug (#14408)

* Instant Search: Fix date formatting issue for filters (#14409)

* Instant Search: Integrate customizer options (#14427)

* Integrate customizer options for search overlay
* Fix infinite scroll functionality

* Update spacing on offline notice (#14419)

* Instant Search: add dark theme styles (#14429)

* Update styles for base overlay
* Update styles for search results

* Fix filter toggle and integrate with widget area (#14451)

* Instant Search: Improve search form detection (#14474)

* Instant Search: Prevent body scroll with overlay open (#14478)

* Instant Search: Move focus into overlay input (#14477)

* Move focus to and from overlay
* Use useRef and event listeners for focus shifting

Co-authored-by: Chris R <chris@bluefuton.com>

* Instant Search: use taxonomy name rather than slug for filters (#14437)

* Instant Search: use taxonomy name rather than slug

* Fix display of category filters

* Update buildFilterObject()

* Fix filter formatting in Zerif Lite (#14493)

* Instant Search: switch to use .slug_slash_name for displaying custom taxonomies, tags and categories (#14492)

* Switch to use .slug_slash_name for taxonomies, tags and categories

* Use slug in the query, and name for display

* Instant Search: Hotfix body scrolling behavior

* Instant Search: Apply customizer changes without page reload (#14504)

* Instant Search : Update mobile structure (#14423)

* Add cross gridicon

* Replace close button label by a gridicon

* Change position of close button

* Update z-index stacking order

Prevents sidebar to be in front of the close button

* Reorder CSS properties

* Add medium break point at 768px

* Add mobile styles for filters popover

* Change how transparency is set on the overlay

* Update break-small to break-medium

* Add styles for smaller close button on mobile devices

* Add arrow element to popover

* Remove styles that are out of place

Given the markup has changed in #14477, these styles need to be applied elsewhere

* Update search results styling

* Add popover styles

* Update filter icon margins

* Show sidebar filters up to 768px

See: #14423 (review)

* Bring up the opacity on the arrow border

* Reduce side padding on small screens

* Move margin to label span instead of select element

* Instant Search: Restore initial href upon closing overlay (#14518)

* Restore initial href when closing overlay
* Fix incorrect inline style removal

* Instant Search: Restore focus to activeElement (#14522)

* Search: Front end search filters open overlay (#14448)

- Refactor filter display for front end
- Remove rendering filters in the overlay
- Front end filters open the overlay

* Instant search: add "powered by Jetpack" message (#14519)

* Show JetpackColophon when setting is activated

* Translate text

* Added logo and styles

* Style tweaks

* Link to jetpack.com/search

* Add colophon to mobile filters

* Margin tweak

* Instant Search: Clear search and filter queries when necessary (#14533)

* Clear search and filter queries if necessary
* Improve initialHref restoration function
* Create a separate handler for popstate events

* Instant Search: Refine TrainTracks integration (#14587)

* Instant Search: Fix broken dates in iOS Chrome (#14586)

* Instant Search: Update list of widgets passed to JS client (#14596)

* Only return widgets inside the overlay sidebar
* Remove overlay sidebar membership check in JS

* Instant Search: Escape wp_json_encode

* Instant Search: Add missing translation calls

* Update escaping from code review.

* Instant Search: Fix unit tests

* Instant Search: Fix ESLint errors

* Instant Search: Add files to PHPCS whitelist

* Instant Search: Add Jetpack Search gridicon (#14629)

* Add Jetpack Search gridicon
* Update search icon
* Pass size variables to all SVG params
* Increase icon size to 28px
* Adjust padding around the icon

Co-authored-by: Filipe Varela <keoshi@keoshi.com>

* Instant Search: Hotfix customizer highlight color

* Instant Search: Update TrainTracks to add session_id event property (#14655)

* Ensures widgets included in the overlay are full width (#14670)

* Prevents the load more button from being cut off in some themes (#14669)

Adds margin bottom to the primary area of the overlay, which solves this problem but is also good practice to ensure search results are readable until the very last one.

* Instant Search: remove date from search results (#14665)

* Remove search result date component
* Remove date from minimal search results
* Remove styles associated with date

* Add locale prefix to jetpack.com link. (#14637)

* Instant Search: Address review feedback from master merge (#14659)

* Address straightforward review feedback
* Update transient cache name
* Use add_query_arg
* Improve user agent with WP/JP versions
* Fix undefined index notices
* Use a8c/color-studio for SCSS color variables

* Hot fix for search css not building

* Pass locale props to JetpackColophon on mobile (#14709)

* Instant Search: update input box and icon styles (#14664)

* Fix Gridicon's viewBox values

We shouldn't be messing with the values in viewBox at all since all icons have a baseline of 24 x 24 px. While sizing changes, their set up should be consistent.

Reported in: #14629 (comment)

Thanks for catching this @jsnmoon !

* Revert search icon back to 24px

* Update syling of main search box

Complementary to #14661

* Remove magnifying glass logo options from the Customizer

* Remove magnifying glass options from live reload

* Stop passing unused showLogo option

* Add generic search icon, reorder icons alphabetically

* Rework markup on the search box

- Adds Gridicon and input inside label.
- Moves screen reader text to its own span.
- Uses generic search icon.

* Updates styling for the search box and its elements

* [not verified] Remove magnifying glass from overlay options

* Fix transition focus bug

Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Instant Search: change visual on close button (#14680)

* Change close button to a div

* Update close button styling

* Remove Close Button from the Customizer

* Remove close button options from Customizer live reload

* [not verified] Remove close button from overlay options

* [not verified] Revert change of order class comment

* Remove close button from overlay.jsx

* Add close button to search-results.jsx

* Change position for the close button

* Change theme styling for the close button

* Hook closeOverlay prop in SearchResults

* Use anchor instead of div for close button

Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com>

* Instant Search: Hide mobile filters after applying filters (#14691)

* Handle case where locale is unavailable
* Hide mobile filters upon filter selection
* Hide popover upon clearing filters
* Hide popover upon changing sort

* Instant Search: Properly handle numerical searches (#14692)

* Correctly handle numerical query values
* Exclude Instant Search inputs from being selected

* Instant Search: add more styling specificity to search input (#14661)

* Ensure there's a cross to clear search on browsers that support it

* Reduce font-size on results count text

* Make close button behave similarly on different themes

* Ensure there's a cross to clear search on browsers that support it

* Reduce font-size on results count text

* Make close button behave similarly on different themes

* Ensures the clear button is displayed in the search box

Props to @jsnmoon

* Instant Search: use link to clear filters instead of button (#14744)

* Use link for clear filters instead of a button

* Update name in CSS

* Instant Search: improve grid structure in overlay (#14745)

* Add className to label

* Ensure search box is always full-width

* Improves alignment of the layout grid

* Tweak close button position

* Instant Search: updates behavior and styling of filtering options (#14711)

Sorting buttons and "Filter" button drop down on mobile.

Co-authored-by: Jason Moon <4044428+jsnmoon@users.noreply.github.com>
Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com>

* Remove unused showLogo property

Co-authored-by: Chris R <chris@bluefuton.com>
Co-authored-by: Greg Ichneumon Brown <gbrown5878@gmail.com>
Co-authored-by: Filipe Varela <keoshi@keoshi.com>
Co-authored-by: Sampath Jaini <skjaini@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bluefuton bluefuton bluefuton approved these changes

@gibrown gibrown gibrown approved these changes

@diegohaz diegohaz Awaiting requested review from diegohaz

Assignees

@jsnmoon jsnmoon

Labels

[Feature] Search For all things related to Search [Focus] Accessibility Improving usability for all users (a11y)

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@jsnmoon @bluefuton @diegohaz @gibrown @matticbot