Is your feature request related to a problem? Please describe.
Most of the buttons in Internet Archive use Bootstrap's default palette, which fail WebAIM's colour contrast check.
https://getbootstrap.com/docs/4.0/getting-started/accessibility/#color-contrast

btn-primary
https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=428BCA

Can be found at https://archive.org/account/signup

label-success
https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=5CB85C

Can be found at: https://archive.org/iathreads/forum-display.php?forum=news

alert-info
https://webaim.org/resources/contrastchecker/?fcolor=3A87AD&bcolor=D9EDF7

Can be found at: https://archive.org/create.php?lma=1

Colour schemes similar to that of Bootstrap

https://webaim.org/resources/contrastchecker/?fcolor=4A90E2&bcolor=D4E4F8

Can be found at: https://archive.org/details/inlibrary?sort=-publicdate

https://webaim.org/resources/contrastchecker/?fcolor=D79810&bcolor=FDF3DF

Can be found at: https://archive.org/details/inlibrary?sort=-publicdate

Describe the solution you'd like
Rather than using bootstrap's provided button colours (which fail WebAIM's checks), we standardize our own set of colours to use throughout the website.

Is your feature request related to a problem? Please describe.
(After clicking on the "More" option of a filter subsection) By listing all the filters, archive.org

• Increases loading time: the filters modal loads slowly as filters are often high in number)
• Confuses users by listing too many options
• Makes it difficult for users to search for a particular filter they want to apply
• Makes it necessary for an additional “sort topics by alphabetical order” feature, which does little to help search for a filter

Describe the solution you'd like
Replace lists of filters with a filter search bar in the modal for every filter subsection (Leaving aside Media Type and Availability), which will allow users to search for the filters they want to apply.

Description
There is no image for Petabox on https://archive.org/projects/
The image URL currently renders a 404.

Evidence / Screenshot (if possible)

Expectation
Create a logo for Petabox or add an image of Petabox itself:

Is your feature request related to a problem? Please describe.
The following issue aims at making user navigation easier.
The current description for signing up at the Internet Archive is "Don't have a virtual library card? Register for free!"

Are we confusing and driving away a few new users that would like to signup by giving them such a description?

Describe the solution you'd like
Give a simpler, to the point description such as 'Create an account' or 'Sign up here'.

Is your feature request related to a problem? Please describe.
The following issue aims at making user navigation easier.
Research says that logos aligned on the left are better for navigation, and are easier for users to remember. Also, since there are already many icons on the navbar, for certain screen widths the Internet Archive's logo seems a bit lost in between.

Describe the solution you'd like
Even though the current placement is an awesome stylistic choice for >=768px, should Internet Archive’s logo be aligned to the left?

Should go under the @internetarchive org.
Update README with install info.

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.

Getting on Build React the prototype detail-react using yarn parcel

Evidence / Screenshot (if possible)

Expectation

What should by happening? What will it look like / how will it behave?

The prototype should run without error.

Details

Browser type and version?

Firefox latest

Operating system?

Ubuntu 18.10

Stakeholders
@iisa @bfalling

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.

The login page and signup page has some design an UI flaws, they can be solved if the input elements are made of equal width and fitted inside the container(As in expectation image)

Evidence / Screenshot (if possible)

Expectation

What should by happening? What will it look like / how will it behave?

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.
React issues a warning whenever iteration is used to render HTML and a key is not provided to speed up component updating.

Evidence / Screenshot (if possible)

Expectation

What should be happening? What will it look like / how will it behave?
A key should be designated to each page button in the pagination, preferably utilizing the iterator count argument passed in by Array.prototype.map.

Details

Browser type and version?
N/A

Operating system?
N/A

Proposal & Constraints

What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?
Adding a unique key to each page button.

Stakeholders

@ tag stakeholders of this bug

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.

The test running command was causing a problem on second time running yarn run storybook.

"test:generate-output": "mkdir jest-test-utils && jest --json --outputFile=jest-test-utils/jest-test-results.json || true",

But if jest-test-utils folder already exist the test then the above mentioned command was unable to run.

Evidence / Screenshot (if possible)

Expectation

What should by happening? What will it look like / how will it behave?

The command should work properly.

Details

Browser type and version? Firefox latest

Operating system? Ubuntu 18.04

Proposal & Constraints

What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?

Adding rm -rf jest-test-utils in the test:generate-output.

Stakeholders

@ tag stakeholders of this bug

@iisa @bfalling @mekarpeles

Is your feature request related to a problem? Please describe.
The following issue addresses keyboard and screen reader accessibility.

While navigating through the music player by keyboard, allowing a user to interact with the pagination arrows and pagination buttons hampers interaction with the playlist's tracks and makes the user experience confusing.

• Interaction with the pagination buttons becomes possible after tabbing through all the tracks. Also, after selecting a pagination button to reach a certain page, a user has to back tab to go back to the playlist. Even after backtracking, a user is unable to reach a track on that page and is instead taken back to the last track of the playlist.
  

• Similarly, interacting with the pagination arrows is only possible after going through all the tracks. It too allows a user to change pages but only allows a user to be taken to the last track.
  

Thus, the pagination buttons and arrows do not add to the user experience.

Describe the solution you'd like
To remove the pagination arrows and pagination buttons from the tab order to prevent them from interfering with keyboard navigation of the playlist, and instead, simply let keyboard users tab through the playlist for navigation.

Is your feature request related to a problem? Please describe.
The following issue aims at making the navbar more accessible.

Material design accessibility guidelines state touch targets should be 48dp by 48dp with a 8dp separation size.

Current tap targets sizes for mobile are (px):
icons on the left < 25 x 30
IA’s logo 40 x 30
Hamburger dropdown 41 x 30
Search dropdown 62 x 30
Upload icon 22.5 x 30
User details icon 25 x 30

Describe the solution you'd like
To increase tap target sizes, even if it means removing some items from the navbar. Also refer to issue #28, #29

Description
Promise structure left over from original IAUX is odd, it makes many of the same mistakes I did when starting with promises, I fixed it in the dweb branch, but that never got merged, and the code has morphed too much to apply.
At the meeting with @bfalling & @iisa I was asked to resubmit.

This is pending (and will be a priority for me) once #86 is merged as given the experience twice already I don't want to have a stack of PR's that get out of date again before they are merged.

Is your feature request related to a problem? Please describe.

Developers new to the code-base become overwhelm by fact that there is significantly more code than required.Hence sometimes difficult to keep track when studying the code-base

Describe the solution you'd like

Refactoring the code-base and adhering to a unique clean pattern

Stakeholders

@ tag stakeholders of this feature

Create issue templates for bugs, feature requests, general questions

While trying to inspect/debug a component of archive.org in the React tab with Chrome's developer tools the message Waiting for roots to load... appears and never proceeds to show the components.

It seems to occur due to pre-existing syntactic issues in the old code base, as per this discussion on Github
facebook/react-devtools#354 (comment)

Is your feature request related to a problem? Please describe.
While updating my profile image ( when I hover on ) I found various problems such as:

• image to upload modal didn't hide when I clicked on upload image button but not selected an image to upload.
  
• also when I selected large image file size it prompted alert
  
  but also give the option to submit
  
  and when I submitted here it prompt two contradictory alerts file is missing and uploading file
  
  . Although finally, it uploaded my large image file.
• Even after uploading my image, the image is not changing in the nav bar profile.
  
• While uploading uploading your file... msg modal is not at right position.
  
• Also when I selected image to upload but cancel to upload from modal close button
  
  it again showed submit button even after cancelling
  
  and the same like the previous issue it showed contradictory alert and uploaded image even though i deselected the image.

Describe the solution you'd like

• All the above-mentioned problem must be resolved to provide better image upload facility to the user.
  Proposal & Constraints

What is the proposed solution/implementation?
A better separate modal component should be built to carry the image upload process with all checking of an unexpected condition and sync new image uploaded wherever it required.
Which suggestions or requirements should be considered for how feature needs to appear or be implemented?
After building component, all condition must be checked as a normal user.
Additional context
Add any other context or screenshots about the feature request here.
I wish mentors assign me @sarru1291 to resolve image upload issue
It can be something like:

Stakeholders

@iisa

Description
On submitting a comment. It take to a page saying that task has been started and details will be available after several minutes!
But the comment is visible instaneously on the detail page. The user thinks that the comment is still load and keeps waiting. This results in bad user experience.

URL
https://archive.org/details/brooklynmuseum-o2791-chicago-worlds-fair

Evidence / Screenshot (if possible)

Expectation
The message should be appropriate and the time shown should be correct.

Is your feature request related to a problem? Please describe.
The following issue aims at making user navigation easier.

The current navbar holds far too many items. Due to this

• it is difficult to increase the tap target size for navbar items (Refer to issue #27)
• it confuses users by giving them a multitude of options to choose from

Describe the solution you'd like
If possible, to work towards removing items that are redundant from the navbar (Specifically the media iconochives on the left of Internet Archive's logo and the content they direct to) and use them to replace the collections on the homepage.

Proposal & Constraints

What is the proposed solution/implementation? Is there a precedent of this approach succeeding elsewhere?

To move all the media iconochives and the data that appears on clicking/tapping on one (class: row toprow) to the homepage instead, give them their own subsections and order them according to user popularity.

For example (though official stats should be used to decide this), stats from similarweb indicate users seek to use the Wayback Machine the most at Internet Archive, followed by Open library.

So just below the first section (class: row preamble) the navbar content for Web could be shifted to its own subsection on the homepage, followed by a subsection for Texts and so on.

I propose to replace the 'top collections' on the homepage because

• I believe all of them can be easily accommodated in a media type subsection of their own. And those that wouldn't could be linked to by providing a 'See More' option at the end of every subsection, which would link to the rest of the collections of that media type (https://archive.org/details/movies, https://archive.org/details/audio etc)
• It would be easier for a user to find a collection they would like to see (as it would be categorised under a media type)

Which suggestions or requirements should be considered for how feature needs to appear or be implemented?

The above would require designing subsections for every media type, discussing what content from the navabar and what new content/websites should be listed in that subsection for that media type and providing a See More option at the end of each section which would lead to that media type's page.

@iisa @mekarpeles @bfalling I would like to work towards resolving this issue when possible.

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Submit button in the metadata editor of user is incorrectly positioned

i.e. it has zero margin from bottom.
Describe the solution you'd like
Button element is placed in the center element (user agent sytlesheet) must include margin-bottom.

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.

The Top Collections at the Archive have grids which are having different heights of the elements.

Evidence / Screenshot (if possible)

Expectation

The grids can be properly aligned with equal heights. Like the first row of above image.
The square grids can be implemented like the image below with equal heights. According to me it will be a good design idea.

Is your feature request related to a problem? Please describe.
The following issue aims at making the navbar more accessible.
The items on the navbar take up too much space which makes it difficult to increase their tap target size (issue #27).

Describe the solution you'd like
In order to save space on the navbar, reduce the search field to a magnifying glass icon which expands into a search field just below the navbar on selection (for screen width <768px)

Proposal & Constraints

What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?

A good example of such an implementation would be the search used at css-tricks

Is your feature request related to a problem? Please describe.
The email and password fields are of different widths and padding as the two have different styles applied to them.

Style applied to password field

Describe the solution you'd like
Both fields should share similar styles.

I'm trying to use the newly merged components from dweb-archive, but ... getting errors from Babel.

To see the problem these steps should work ...

clone https://github.com/internetarchive/dweb-archive.git#iaux // Note its the iaux branch
yarn install // Will get ia-components canary

There are three possible ways to include TileImage from components/tiles/TileComponent.js:

1: import TileImage from "./TileImage";

then webpack --mode development works, proving that the problem isn't with the file itself.

2: import TileImage from "@internetarchive/ia-components/sandbox/tiles/TileImage.js"

gets the following error :

ERROR in ./node_modules/@internetarchive/ia-components/sandbox/tiles/TileImage.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/mitra/git/dweb-archive/node_modules/@internetarchive/ia-components/sandbox/tiles/TileImage.js: Unexpected token (29:19)

  27 |         if (typeof DwebArchive !== "undefined") {
  28 |             //TODO-DWEB build img processing from ReactFake into tile-tile-image and ParentTileImg but wait till have non-tile images as well
> 29 |             return <span ref={this.load}></span>
     |                    ^
  30 |         } else {

Which looks like the JSX transpile isn't happening.

3: import TileImage from "@internetarchive/ia-components";

Gets a lot of errors - some in each of the files as I think its trying to load all of ia-components.

Description
On adding an item to favourite, a modal appears after a few seconds with a message "favourited".
There are two problems.

• The modal's position is not vertically centered to the page.
• There is no real need for modal in this case! A simple toast or message should be sufficient.

Evidence / Screenshot (if possible)

Expectation
The modal should be centered and if possible the modal should be replaced by a simple toast message.

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.

The search API results currently are not consistent wrt the language-field format.

See this example search

English items are returned both as "english" and as "eng" and the same is true for other languages ("Danish" and "dan").

This inconsistency makes it difficult to do correct language searching / filtering, as not all languages use the first 3-latin-letters for their language code.

Evidence / Screenshot (if possible)

See example link above.

Expectation

What should by happening? What will it look like / how will it behave?

There should be one language-field format used for all languages, consisting of the 3-letter-code of that language.

Details

Browser type and version?

All.

Operating system?

All.

Proposal & Constraints

What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?

Convert every non-3-letter language string in the database into its corresponding 3-letter-language string. Any new item inserted should conform to this 3-letter-code.

Stakeholders

@ tag stakeholders of this bug

I hope this repo is the correct place to report this bug, else please let me know. Thanks for an awesome project!

Is your feature request related to a problem? Please describe.

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

A clear and concise description of what you want to happen.

Proposal & Constraints

What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?

Which suggestions or requirements should be considered for how feature needs to appear or be implemented?

Additional context

Add any other context or screenshots about the feature request here.

Stakeholders

@ tag stakeholders of this feature

Currently the write-review.php page has a very weak UI/UX with its poor rendering of its form elements most especially the rating-stars.the elements present do not scale up responsively in other devices

i wish to be assigned this issue to redesign its UI to scale up any width responsively giving that tastes of a bright world
Stakeholders
@bfalling @iisa @mekarpeles

Is your feature request related to a problem? Please describe.
The form field to record ratings (0 to 5) in review form can be reduced to an individual and more esthetic component for start rating.

Describe the solution you'd like
Only one field should be present the user can select the no the stars and accordingly the rating will be given.

Current:

Expected:

Proposal & Constraints
We can create a component of a component of our own and that can be used in many places.

Stakeholders
@iisa @bfalling @mekarpeles

Is your feature request related to a problem? Please describe.
On search results pages, in order to reach the search results, one must tab through all the filters on the page. This effects keyboard users/screen readers.

Describe the solution you'd like
Give a user the option to "Skip to search results", similar to the "Skip to main content" link.

Is your feature request related to a problem? Please describe.

The menu bar's popup fails to collapse when user clicks out of it and when user clicks an item on it,no indication to show what the user has clicked..User experience is weak here

Describe the solution you'd like

The dropdown list should be able to collapse after user has clicked out of the menu.

Proposal & Constraints

I propose to implement a component for that during development

Additional context

Users expect clicking outside to close

if it closes on menu clicking => Ok, it's expected
if it closes touching outside => Great, as expected.
if it DOES NOT close touching outside => Users getting mad

Stakeholders

@ tag stakeholders of this feature

Is your feature request related to a problem? Please describe.

I asked a loan for a book which at a later time,was given to me to to borrow.

After borrowing i still found out that on the "Book to Borrow" collection,the book is still listed there with the "Join waitList" button

steps to reproduce
Two steps to reproduce the two different scenarios
first step:

Add yourself in the WaitingList for a book on the "Book to borrow" collection page
wait 3-4seconds Reload your browser to the collection page
check the book's status

second step:

Borrow a book from the "Book to Borrow" collection
wait 3-4secs Reload your browser to the collection page.
check the book's status

Expectations

When the User Instance borrows a book from the "Book to Borrow" collection,the book's information in the collection should be hidden from him .Because user cannot join a waitlist for a book he is currently holding.
When the User instance waits by joining a book's WaitList,the book's information on the collection page should indicate him that he is "currently waiting".

Stakeholders

@bfalling @mekarpeles @iisa

Is your feature request related to a problem? Please describe.

I opened Internet Archive site few times of time on PC and mobile, I felt there is a need for better Accessibility and performance then I did a Lighthouse Page test results are
https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https://archive.org/

Describe the solution you'd like

I would like to fix the problems causing website to slow, and I also propose to build a AMP version for mobile user's as there are more mobile users than ever

Proposal & Constraints

If you feel this is helpful I would like to implement this along "Building website components prototypes using our new front-end platform" project

Stakeholders

@openlibrary , @bfalling

Is your feature request related to a problem? Please describe.
In many places on the website, especially for label and input fields (Signup page, Login page) <br> tags are used to keep items on separate lines which go against good practice.

Describe the solution you'd like
The <br>s can be removed and items kept on different lines by changing display: inline-block to display: block.

Is your feature request related to a problem? Please describe.

The following issue aims at making the navwrap1 more accessible.
It is confusing for someone using a screen reader to navigate a toprow (which displays itself after clicking an icon). It isn’t clear what happens after selecting an icon, and contrary to one’s expectation, it isn’t available next in focus after selecting an icon, as it occurs before the icons in the DOM.
In order to reach it one must tab backwards after selecting the icon. Someone using a screen reader may not even get to know that it exists.

Is your feature request related to a problem? Please describe.

Upgrade to Babel 7

Currently, Babel version 6 is installed. The current version of Jest is incompatible with Babel 6 which causes errors on running tests (See #39 for more details)

Stakeholders
@iisa @bfalling

Is your feature request related to a problem? Please describe.

The Review section of an item web page becomes scary and difficult to keep track as more and more reviews are being loaded from the back-end..This results in a poor user experience as much scrolling will be needed to get to the right review pane.

Describe the solution you'd like

The Solution to this problem is to conceptualize and implement a component that will hide most of the loaded data and show them only on demand by the user as shown below in this simple mockup

Stakeholders

@bfalling @mekarpeles @iisa

Is your feature request related to a problem? Please describe.
In mobile view, There is hiding of search bar and navigation bar in the file to upload web page. Also, there is very poor styling and rendering of the file to upload the div element.

Describe the solution you'd like
Create a component wrapper around YouTube Player API.

Proposal & Constraints
This component should accept a playlist, callbacks for youtube events

Component should handle tracking the playlist, displaying default error case, sending callbacks in lifecycles if present

Which suggestions or requirements should be considered for how feature needs to appear or be implemented?

Component: React
API: https://developers.google.com/youtube/iframe_api_reference

Events that we want to know:

• when a youtube video does not play & the reason why it won't play, like: item no longer exists, script blocking
• when a youtube video does play or when it changes to the next playlist item

Is your feature request related to a problem? Please describe.
The following issue aims at making the navbar more accessible.
The navbar icons for media and upload (class: iconochive-*) currently fail WebAIM's colour contrast check for WCAG AAA.

https://webaim.org/resources/contrastchecker/?fcolor=999999&bcolor=222222

Describe the solution you'd like
To choose a lighter colour for the navbar's icons.

Steps to reproduce.

Route to (https://archive.org/about/bios.php)
Problem statment
There is an excess scrolling when viewing information about the team of Internet Archive.
It becomes more worse when viewing from a mobile.User becomes tired of all this work he has to do should in case he wants to know about the team.

Describe the solution you'd like

The possible and simplest solution to this is shown in the following mockup

Proposal & Constraints
> I propose to handle this mockup on desktop with slideshows and differently on mobile devices with existing components

Stakeholders

@bfalling @iisa

The following is the parent issue to track overall progress on designs of the search results tiles.

Child issues for the same

• To decide on an equivalent height for all search result cards #195
• Change the information areas for borrow/waitlist/sensitive into image overlays #196
• Decide on an accessible colour palette

Individual issues for each type of card: #164 (media cards), #165 (account cards) and #166 (collection cards).

Issue description
The following issue aims at making user navigation easier.

Due to non-uniform placement and varying sizes of search result cards in the search results, after the listing of 10-20 cards it becomes difficult to go through and distinguish between them.

The current search results require a uniform grid system. However, in order to implement so, we'd have to start standardizing our current searchResultCards for collections, media and accounts.

Is your feature request related to a problem? Please describe.

Currently, the column-facet is hidden for screen width <=567 px. Thus, users are unable to sort their search results using filters.

Additionally, for screen width >567 px to <=662px a lot of horizontal screen space is wasted.

Describe the solution you'd like
To make the column facet togglable side menu which can be opened through a filter button, for screens of width <=662 px.

On installing the project using the instructions in README.md. The steps fails at some points.
This includes:

• error due to fsevents package
• babal-core version error

Is your feature request related to a problem? Please describe.
The long list of filters in the column-facet component makes it confusing for users to search for what filter they want to apply. The same holds for navigation in screen readers.
An accordion menu shall make the above much easier, as one wouldn't have to read through all the filters to reach the filter section they want to choose from.

Describe the solution you'd like
Convert the column facet into an accordion menu, which has every filter subsection as a submenu item.

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.

Test command failing on yarn run storybook
Test failed due to version of babel-core. I have version 7.3.4 of @babel/core installed and version 6.26.3 of babel-core installed.

Evidence / Screenshot (if possible)

Expectation

What should by happening? What will it look like / how will it behave?

The tests should pass

Details

Browser type and version?

Google chrome canary Version 75.0.3746.0

Operating system?

Windows

Proposal & Constraints

What is the proposed solution / implementation? Is there a precedent of this approach succeeding elsewhere?

I presume it is failing due to the babel-core version but that is the latest version of babel-core. I suppose the helper-plugin-utils/lib index.js file is calling babel-core not @babel/core.

Stakeholders

@ tag stakeholders of this bug

@iisa @bfalling @mekarpeles

Similar to #81
Description
Currently, the parcel commands for running prototypes do not work correctly. The commands throw Build Error or Import Error. Probably, there is some error with the package reference.

Stakeholders
@iisa @bfalling

Description

What problem are we solving? What does the experience look like today? What are the symptoms? Please describe the component/story/add on related to the issue.

Getting "Error retrieving XML data" when trying to edit member profile.

Evidence / Screenshot (if possible)

Details

Browser type and version? Firefox latest

Operating system? Ubuntu 18.10

Stakeholders

@bfalling @iisa

Description
The directory paths under "ia-prototype-apps" in the documentation are wrong.

Evidence / Screenshot (if possible)

Expectation
"packages/prototypes" should be changed to "packages/ia-prototype-apps"
"packages/prototypes/prototypes" should be changes to "packages/ia-prototype-apps/apps"

Description
"Click here to contribute your book" text is visible only half cut off.

Evidence / Screenshot (if possible)

URL
https://archive.org/details/opensource?sort=creatorSorter

Expectation
The text should be properly shown.

Is your feature request related to a problem? Please describe.

Upgrade to Storybook 5

Currently, Storybook 4 is being used. Storybook 5 has been out and is the biggest release from @storybooks

Storybook 5 offers a lot of new and useful features. For more information read the official blog post https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8

Stakeholders
@iisa @bfalling