Repository: gradio-app/gradio
Pull request: 2777 Add restProps to IconButton …
… and use it to pass aria-labels down to the button element where it's used in other UI components

@pngwn 

# Description

* relevant motivation - Button must have discernible text, per WCAG success criterion 4.1.2 https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
* a summary of the change - restProps was added to the <button> element of the IconButton atom component, this allows for aria-labels to be passed down to the element.

Closes: #2777

# Checklist:

- [x] I have performed a self-review of my own code
- [x] I have added a short summary of my change to the CHANGELOG.md
- [x] My code follows the style guidelines of this project
- [x] I have commented my code in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] I have added tests that prove my fix is effective or that my feature works
- [x] New and existing unit tests pass locally with my changes


# A note about the CHANGELOG

Hello 👋 and thank you for contributing to Gradio!

All pull requests must update the change log located in CHANGELOG.md, unless the pull request is labeled with the "no-changelog-update" label.

Please add a brief summary of the change to the Upcoming Release > Full Changelog section of the CHANGELOG.md file and include
a link to the PR (formatted in markdown) and a link to your github profile (if you like). For example, "* Added a cool new feature by `[@myusername](link-to-your-github-profile)` in `[PR 11111](https://github.com/gradio-app/gradio/pull/11111)`".

If you would like to elaborate on your change further, feel free to include a longer explanation in the other sections.
If you would like an image/gif/video showcasing your feature, it may be best to edit the CHANGELOG file using the 
GitHub web UI since that lets you upload files directly via drag-and-drop.

Problem statement:
Add aria-label to icon buttons
### Describe the bug

cc @emilyuhde

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Reproduction

-

### Screenshot

_No response_

### Logs

```shell
-
```


### System Info

```shell
-
```


### Severity

serious, but I can work around it

Hints from issue discussion:
Repro steps:

1. Go to the doc site for the Image component: https://gradio.app/docs/#image
2. Upload an image of your choice
3. Inspect the edit and close button in the button right hand corner of the component

Expected: There should be an aria-label on these button elements to give screen reader users labels describing their functionality
Actual: No aria-labels or an equivalent (aria-labelledby, etc) is present

Alternate repro method:

1. Turn on screenreader of your choice (I used Voiceover)
2. Tab down to the button elements described in step 3 above

You'll notice the screen reader reads out "Button, group" with no label.

<img width="1448" alt="Screen Shot 2022-12-08 at 8 54 24 PM" src="https://user-images.githubusercontent.com/4451556/206605543-9e70f7ac-c0f3-4d13-9bae-18ee89950b19.png">

Commit message: 2777 Add restProps to IconButton and use it to pass aria-labels down to the button element where it's used in other UI components

Patch to review:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index dba9b95652..e30818c2e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -37,11 +37,11 @@ demo.launch()
 
 
 By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2764](https://github.com/gradio-app/gradio/pull/2764)
- 
+
 
 ### Support for altair plots
 
-The `Plot` component can now accept altair plots as values! 
+The `Plot` component can now accept altair plots as values!
 Simply return an altair plot from your event listener and gradio will display it in the front-end.
 See the example below:
 
@@ -74,7 +74,7 @@ By [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2741](https://git
 
 The `Label` component now accepts a `color` argument by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2736](https://github.com/gradio-app/gradio/pull/2736).
 The `color` argument should either be a valid css color name or hexadecimal string.
-You can update the color with `gr.Label.update`! 
+You can update the color with `gr.Label.update`!
 
 This lets you create Alert and Warning boxes with the `Label` component. See below:
 
@@ -97,8 +97,8 @@ def update_value():
     choice = random.choice(['good', 'bad', 'so-so'])
     color = update_color(choice)
     return gr.Label.update(value=choice, color=color)
-    
-    
+
+
 with gr.Blocks() as demo:
     label = gr.Label(value=-10)
     demo.load(lambda: update_value(), inputs=None, outputs=[label], every=1)
@@ -107,7 +107,7 @@ demo.queue().launch()
 
 ![label_bg_color_update](https://user-images.githubusercontent.com/41651716/204400372-80e53857-f26f-4a38-a1ae-1acadff75e89.gif)
 
-### Add Brazilian Portuguese translation 
+### Add Brazilian Portuguese translation
 
 Add Brazilian Portuguese translation (pt-BR.json) by [@pstwh](http://github.com/pstwh) in [PR 2753](https://github.com/gradio-app/gradio/pull/2753):
 
@@ -115,10 +115,11 @@ Add Brazilian Portuguese translation (pt-BR.json) by [@pstwh](http://github.com/
 
 ## Bug Fixes:
 * Fixed issue where image thumbnails were not showing when an example directory was provided
-by by [@abidlabs](https://github.com/abidlabs) in [PR 2745](https://github.com/gradio-app/gradio/pull/2745) 
-* Fixed bug loading audio input models from the hub by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2779](https://github.com/gradio-app/gradio/pull/2779). 
+by [@abidlabs](https://github.com/abidlabs) in [PR 2745](https://github.com/gradio-app/gradio/pull/2745)
+* Fixed bug loading audio input models from the hub by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2779](https://github.com/gradio-app/gradio/pull/2779).
 * Fixed issue where entities were not merged when highlighted text was generated from the
 dictionary inputs [@payoto](https://github.com/payoto) in [PR 2767](https://github.com/gradio-app/gradio/pull/2767)
+* Added aria-labels to icon buttons that are built into UI components by [@emilyuhde](http://github.com/emilyuhde) in [PR 2777](https://github.com/gradio-app/gradio/pull/2777)
 
 
 ## Documentation Changes:
@@ -131,8 +132,8 @@ No changes to highlight.
 No changes to highlight.
 
 ## Full Changelog:
-* Images in the chatbot component are now resized if they exceed a max width by [@abidlabs](https://github.com/abidlabs) in [PR 2748](https://github.com/gradio-app/gradio/pull/2748) 
-* Missing parameters have been added to `gr.Blocks().load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2755](https://github.com/gradio-app/gradio/pull/2755) 
+* Images in the chatbot component are now resized if they exceed a max width by [@abidlabs](https://github.com/abidlabs) in [PR 2748](https://github.com/gradio-app/gradio/pull/2748)
+* Missing parameters have been added to `gr.Blocks().load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2755](https://github.com/gradio-app/gradio/pull/2755)
 * Deindex share URLs from search by [@aliabd](https://github.com/aliabd) in [PR 2772](https://github.com/gradio-app/gradio/pull/2772)
 * Added handling of invalid values in the `Slider`, `Radio` and `CheckgroupBox` components by [@thehimalayanleo](https://github.com/thehimalayanleo) in [PR 2760](https://github.com/gradio-app/gradio/pull/2760).
 * Redirect old links and fix broken ones by [@aliabd](https://github.com/aliabd) in [PR 2774](https://github.com/gradio-app/gradio/pull/2774)
@@ -146,8 +147,8 @@ No changes to highlight.
 
 ### The `Chatbot` component now supports a subset of Markdown (including bold, italics, code, images)
 
-You can now pass in some Markdown to the Chatbot component and it will show up, 
-meaning that you can pass in images as well! by [@abidlabs](https://github.com/abidlabs) in [PR 2731](https://github.com/gradio-app/gradio/pull/2731) 
+You can now pass in some Markdown to the Chatbot component and it will show up,
+meaning that you can pass in images as well! by [@abidlabs](https://github.com/abidlabs) in [PR 2731](https://github.com/gradio-app/gradio/pull/2731)
 
 Here's a simple example that references a local image `lion.jpg` that is in the same
 folder as the Python script:
@@ -157,7 +158,7 @@ import gradio as gr
 
 with gr.Blocks() as demo:
     gr.Chatbot([("hi", "hello **abubakar**"), ("![](/file=lion.jpg)", "cool pic")])
-    
+
 demo.launch()
 ```
 
@@ -208,7 +209,7 @@ demo.launch()
 ## Bug Fixes:
 * Fixed bug where requests timeout is missing from utils.version_check() by [@yujiehecs](https://github.com/yujiehecs) in [PR 2729](https://github.com/gradio-app/gradio/pull/2729)
 * Fixed bug where so that the `File` component can properly preprocess files to "binary" byte-string format by [CoffeeVampir3](https://github.com/CoffeeVampir3) in [PR 2727](https://github.com/gradio-app/gradio/pull/2727)
-* Fixed bug to ensure that filenames are less than 200 characters even for non-English languages by [@SkyTNT](https://github.com/SkyTNT) in [PR 2685](https://github.com/gradio-app/gradio/pull/2685) 
+* Fixed bug to ensure that filenames are less than 200 characters even for non-English languages by [@SkyTNT](https://github.com/SkyTNT) in [PR 2685](https://github.com/gradio-app/gradio/pull/2685)
 
 ## Documentation Changes:
 * Performance improvements to docs on mobile by  [@aliabd](https://github.com/aliabd) in [PR 2730](https://github.com/gradio-app/gradio/pull/2730)
@@ -280,11 +281,11 @@ io = gr.Interface(echo, "textbox", "textbox").launch()
 is now 1GB  by [@abidlabs](https://github.com/abidlabs) in [PR 2709](https://github.com/gradio-app/gradio/pull/2709)
 
 ## Documentation Changes:
-* Updated documentation for embedding Gradio demos on Spaces as web components by 
+* Updated documentation for embedding Gradio demos on Spaces as web components by
 [@julien-c](https://github.com/julien-c) in [PR 2698](https://github.com/gradio-app/gradio/pull/2698)
-* Updated IFrames in Guides to use the host URL instead of the Space name to be consistent with the new method for embedding Spaces, by  
+* Updated IFrames in Guides to use the host URL instead of the Space name to be consistent with the new method for embedding Spaces, by
 [@julien-c](https://github.com/julien-c) in [PR 2692](https://github.com/gradio-app/gradio/pull/2692)
- * Colab buttons on every demo in the website! Just click open in colab, and run the demo there. 
+ * Colab buttons on every demo in the website! Just click open in colab, and run the demo there.
 
 
 
@@ -297,7 +298,7 @@ No changes to highlight.
 No changes to highlight.
 
 ## Full Changelog:
-* Better warnings and error messages for `gr.Interface.load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2694](https://github.com/gradio-app/gradio/pull/2694) 
+* Better warnings and error messages for `gr.Interface.load()` by [@abidlabs](https://github.com/abidlabs) in [PR 2694](https://github.com/gradio-app/gradio/pull/2694)
 * Add open in colab buttons to demos in docs and /demos by [@aliabd](https://github.com/aliabd) in [PR 2608](https://github.com/gradio-app/gradio/pull/2608)
 * Apply different formatting for the types in component docstrings by [@aliabd](https://github.com/aliabd) in [PR 2707](https://github.com/gradio-app/gradio/pull/2707)
 
@@ -322,7 +323,7 @@ No changes to highlight.
 No changes to highlight.
 
 ## Full Changelog:
-* Clean up printed statements in Embedded Colab Mode by [@aliabid94](https://github.com/aliabid94) in [PR 2612](https://github.com/gradio-app/gradio/pull/2612) 
+* Clean up printed statements in Embedded Colab Mode by [@aliabid94](https://github.com/aliabid94) in [PR 2612](https://github.com/gradio-app/gradio/pull/2612)
 
 ## Contributors Shoutout:
 No changes to highlight.
@@ -364,13 +365,13 @@ No changes to highlight.
 
 ## Bug Fixes:
 * Only set a min height on md and html when loading by [@pngwn](https://github.com/pngwn) in [PR 2623](https://github.com/gradio-app/gradio/pull/2623)
- 
+
 ## Documentation Changes:
 * See docs for the latest gradio commit to main as well the latest pip release:
 
 ![main-vs-pip](https://user-images.githubusercontent.com/9021060/199607887-aab1ae4e-a070-4527-966d-024397abe15b.gif)
 
-* Modified the "Connecting To a Database Guide" to use `pd.read_sql` as opposed to low-level postgres connector by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2604](https://github.com/gradio-app/gradio/pull/2604) 
+* Modified the "Connecting To a Database Guide" to use `pd.read_sql` as opposed to low-level postgres connector by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2604](https://github.com/gradio-app/gradio/pull/2604)
 
 ## Testing and Infrastructure Changes:
 No changes to highlight.
@@ -380,7 +381,7 @@ No changes to highlight.
 
 ## Full Changelog:
 * Dropdown for seeing docs as latest or main by [@aliabd](https://github.com/aliabd) in [PR 2544](https://github.com/gradio-app/gradio/pull/2544)
-* Allow `gr.Templates` to accept parameters to override the defaults by [@abidlabs](https://github.com/abidlabs) in [PR 2600](https://github.com/gradio-app/gradio/pull/2600) 
+* Allow `gr.Templates` to accept parameters to override the defaults by [@abidlabs](https://github.com/abidlabs) in [PR 2600](https://github.com/gradio-app/gradio/pull/2600)
 * Components now throw a `ValueError()` if constructed with invalid parameters for `type` or `source` (for components that take those parameters) in [PR 2610](https://github.com/gradio-app/gradio/pull/2610)
 * Allow auth with using queue by [@GLGDLY](https://github.com/GLGDLY) in [PR 2611](https://github.com/gradio-app/gradio/pull/2611)
 
@@ -391,7 +392,7 @@ No changes to highlight.
 # Version 3.9
 
 ## New Features:
-* Gradio is now embedded directly in colab without requiring the share link by [@aliabid94](https://github.com/aliabid94) in [PR 2455](https://github.com/gradio-app/gradio/pull/2455) 
+* Gradio is now embedded directly in colab without requiring the share link by [@aliabid94](https://github.com/aliabid94) in [PR 2455](https://github.com/gradio-app/gradio/pull/2455)
 
 ### Calling functions by api_name in loaded apps
 
@@ -423,7 +424,7 @@ No changes to highlight.
 No changes to highlight.
 
 ## Full Changelog:
-* Add `api_name` to `Blocks.__call__` by  [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2593](https://github.com/gradio-app/gradio/pull/2593) 
+* Add `api_name` to `Blocks.__call__` by  [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2593](https://github.com/gradio-app/gradio/pull/2593)
 * Update queue with using deque & update requirements by [@GLGDLY](https://github.com/GLGDLY) in [PR 2428](https://github.com/gradio-app/gradio/pull/2428)
 
 
@@ -445,7 +446,7 @@ Gradio now supports the ability to run an event continuously on a fixed schedule
 pass `every=# of seconds` to the event definition. This will run the event every given number of seconds!
 
 This can be used to:
-* Create live visualizations that show the most up to date data 
+* Create live visualizations that show the most up to date data
 * Refresh the state of the frontend automatically in response to changes in the backend
 
 Here is an example of a live plot that refreshes every half second:
@@ -541,7 +542,7 @@ No changes to highlight.
 Gradio now supports the ability to pass *batched* functions. Batched functions are just
 functions which take in a list of inputs and return a list of predictions.
 
-For example, here is a batched function that takes in two lists of inputs (a list of 
+For example, here is a batched function that takes in two lists of inputs (a list of
 words and a list of ints), and returns a list of trimmed words as output:
 
 ```py
@@ -551,15 +552,15 @@ def trim_words(words, lens):
     trimmed_words = []
     time.sleep(5)
     for w, l in zip(words, lens):
-        trimmed_words.append(w[:l])        
+        trimmed_words.append(w[:l])
     return [trimmed_words]
 ```
 
 The advantage of using batched functions is that if you enable queuing, the Gradio
-server can automatically *batch* incoming requests and process them in parallel, 
+server can automatically *batch* incoming requests and process them in parallel,
 potentially speeding up your demo. Here's what the Gradio code looks like (notice
 the `batch=True` and `max_batch_size=16` -- both of these parameters can be passed
-into event triggers or into the `Interface` class) 
+into event triggers or into the `Interface` class)
 
 ```py
 import gradio as gr
@@ -597,7 +598,7 @@ with gr.Blocks() as demo:
         output_video = gr.Video()
 
      # Clears the output video when an input video is uploaded
-    input_video.upload(lambda : None, None, output_video)  
+    input_video.upload(lambda : None, None, output_video)
 ```
 
 
@@ -605,9 +606,9 @@ with gr.Blocks() as demo:
 * Fixes issue where plotly animations, interactivity, titles, legends, were not working properly. [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2486](https://github.com/gradio-app/gradio/pull/2486)
 * Prevent requests to the `/api` endpoint from skipping the queue if the queue is enabled for that event by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2493](https://github.com/gradio-app/gradio/pull/2493)
 * Fixes a bug with `cancels` in event triggers so that it works properly if multiple
-Blocks are rendered by [@abidlabs](https://github.com/abidlabs) in [PR 2530](https://github.com/gradio-app/gradio/pull/2530)  
+Blocks are rendered by [@abidlabs](https://github.com/abidlabs) in [PR 2530](https://github.com/gradio-app/gradio/pull/2530)
 * Prevent invalid targets of events from crashing the whole application. [@pngwn](https://github.com/pngwn) in [PR 2534](https://github.com/gradio-app/gradio/pull/2534)
-* Properly dequeue cancelled events when multiple apps are rendered by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2540](https://github.com/gradio-app/gradio/pull/2540) 
+* Properly dequeue cancelled events when multiple apps are rendered by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2540](https://github.com/gradio-app/gradio/pull/2540)
 
 ## Documentation Changes:
 * Added an example interactive dashboard to the "Tabular & Plots" section of the Demos page by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2508](https://github.com/gradio-app/gradio/pull/2508)
@@ -735,9 +736,9 @@ No changes to highlight.
 * Decreased latency in iterative-output demos by making the iteration asynchronous [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2409](https://github.com/gradio-app/gradio/pull/2409)
 * Fixed queue getting stuck under very high load by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2374](https://github.com/gradio-app/gradio/pull/2374)
 * Ensure that components always behave as if `interactive=True` were set when the following conditions are true:
-  - no default value is provided, 
+  - no default value is provided,
   - they are not set as the input or output of an event,
-  - `interactive` kwarg is not set. 
+  - `interactive` kwarg is not set.
 
   [@pngwn](https://github.com/pngwn) in [PR 2459](https://github.com/gradio-app/gradio/pull/2459)
 
@@ -758,18 +759,18 @@ No changes to highlight.
 
 ## Full Changelog:
 * Speeds up Gallery component by using temporary files instead of base64 representation in the front-end by [@proxyphi](https://github.com/proxyphi), [@pngwn](https://github.com/pngwn), and [@abidlabs](https://github.com/abidlabs) in [PR 2265](https://github.com/gradio-app/gradio/pull/2265)
-* Fixed some embedded demos in the guides by not loading the gradio web component in some guides by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2403](https://github.com/gradio-app/gradio/pull/2403) 
+* Fixed some embedded demos in the guides by not loading the gradio web component in some guides by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2403](https://github.com/gradio-app/gradio/pull/2403)
 * When an `Image` component is set to `source="upload"`, it is now possible to drag and drop and image to replace a previously uploaded image by [@pngwn](https://github.com/pngwn) in [PR 2400](https://github.com/gradio-app/gradio/pull/2410)
 * Improve documentation of the `Blocks.load()` event by [@abidlabs](https://github.com/abidlabs) in [PR 2413](https://github.com/gradio-app/gradio/pull/2413)
 * Decreased latency in iterative-output demos by making the iteration asynchronous [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2409](https://github.com/gradio-app/gradio/pull/2409)
 * Updated share link message to reference new Spaces Hardware [@abidlabs](https://github.com/abidlabs) in [PR 2423](https://github.com/gradio-app/gradio/pull/2423)
 * Automatically restart spaces if they're down by [@aliabd](https://github.com/aliabd) in [PR 2405](https://github.com/gradio-app/gradio/pull/2405)
 * Carousel component is now deprecated by [@abidlabs](https://github.com/abidlabs) in [PR 2434](https://github.com/gradio-app/gradio/pull/2434)
-* Build Gradio from source in ui tests by by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2440](https://github.com/gradio-app/gradio/pull/2440) 
+* Build Gradio from source in ui tests by by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2440](https://github.com/gradio-app/gradio/pull/2440)
 * Change "return ValueError" to "raise ValueError" by [@vzakharov](https://github.com/vzakharov) in [PR 2445](https://github.com/gradio-app/gradio/pull/2445)
 * Add guide on creating a map demo using the `gr.Plot()` component [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2402](https://github.com/gradio-app/gradio/pull/2402)
 * Add blur event for `Textbox` and `Number` components [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 2448](https://github.com/gradio-app/gradio/pull/2448)
-* Stops a gradio launch from hogging a port even after it's been killed [@aliabid94](https://github.com/aliabid94) in [PR 2453](https://github.com/gradio-app/gradio/pull/2453) 
+* Stops a gradio launch from hogging a port even after it's been killed [@aliabid94](https://github.com/aliabid94) in [PR 2453](https://github.com/gradio-app/gradio/pull/2453)
 * Fix embedded interfaces on touch screen devices by [@aliabd](https://github.com/aliabd) in [PR 2457](https://github.com/gradio-app/gradio/pull/2457)
 * Upload all demos to spaces by [@aliabd](https://github.com/aliabd) in [PR 2281](https://github.com/gradio-app/gradio/pull/2281)
 
@@ -845,18 +846,18 @@ No changes to highlight.
 
 ## New Features:
 
-### 1. Gallery Captions 🖼️ 
+### 1. Gallery Captions 🖼️
 
-You can now pass captions to images in the Gallery component. To do so you need to pass a {List} of (image, {str} caption) tuples. This is optional and the component also accepts just a list of the images. 
+You can now pass captions to images in the Gallery component. To do so you need to pass a {List} of (image, {str} caption) tuples. This is optional and the component also accepts just a list of the images.
 
-Here's an example: 
+Here's an example:
 
 ```python
 import gradio as gr
 
 images_with_captions = [
     ("https://images.unsplash.com/photo-1551969014-7d2c4cddf0b6", "Cheetah by David Groves"),
-    ("https://images.unsplash.com/photo-1546182990-dffeafbe841d", "Lion by Francesco"), 
+    ("https://images.unsplash.com/photo-1546182990-dffeafbe841d", "Lion by Francesco"),
     ("https://images.unsplash.com/photo-1561731216-c3a4d99437d5", "Tiger by Mike Marrah")
     ]
 
@@ -868,15 +869,15 @@ demo.launch()
 
 <img src="https://user-images.githubusercontent.com/9021060/192399521-7360b1a9-7ce0-443e-8e94-863a230a7dbe.gif" alt="gallery_captions" width="1000"/>
 
-### 2. Type Values into the Slider 🔢 
+### 2. Type Values into the Slider 🔢
 
-You can now type values directly on the Slider component! Here's what it looks like: 
+You can now type values directly on the Slider component! Here's what it looks like:
 
 ![type-slider](https://user-images.githubusercontent.com/9021060/192399877-76b662a1-fede-4417-a932-fc15f0da7360.gif)
 
-### 3. Better Sketching and Inpainting 🎨 
+### 3. Better Sketching and Inpainting 🎨
 
-We've made a lot of changes to our Image component so that it can support better sketching and inpainting. 
+We've made a lot of changes to our Image component so that it can support better sketching and inpainting.
 
 Now supports:
 * A standalone black-and-white sketch
@@ -917,7 +918,7 @@ demo.launch()
 ![webcam-sketch](https://user-images.githubusercontent.com/9021060/192410820-0ffaf324-776e-4e1f-9de6-0fdbbf4940fa.gif)
 
 
-As well as other fixes 
+As well as other fixes
 
 
 ## Bug Fixes:
@@ -970,7 +971,7 @@ As well as other fixes
 
 ## New Features:
 
-### 1. Iterative Outputs ⏳  
+### 1. Iterative Outputs ⏳
 
 You can now create an iterative output simply by having your function return a generator!
 
@@ -986,22 +987,22 @@ def predict(steps, seed):
 
 ![example](https://user-images.githubusercontent.com/9021060/189086273-f5e7087d-71fa-4158-90a9-08e84da0421c.mp4)
 
-### 2. Accordion Layout 🆕 
+### 2. Accordion Layout 🆕
 
-This version of Gradio introduces a new layout component to Blocks: the Accordion. Wrap your elements in a neat, expandable layout that allows users to toggle them as needed. 
+This version of Gradio introduces a new layout component to Blocks: the Accordion. Wrap your elements in a neat, expandable layout that allows users to toggle them as needed.
 
 Usage: ([Read the docs](https://gradio.app/docs/#accordion))
 
 ```python
 with gr.Accordion("open up"):
-# components here 
+# components here
 ```
 
 ![accordion](https://user-images.githubusercontent.com/9021060/189088465-f0ffd7f0-fc6a-42dc-9249-11c5e1e0529b.gif)
 
-### 3. Skops Integration 📈 
+### 3. Skops Integration 📈
 
-Our new integration with [skops](https://huggingface.co/blog/skops) allows you to load tabular classification and regression models directly from the [hub](https://huggingface.co/models). 
+Our new integration with [skops](https://huggingface.co/blog/skops) allows you to load tabular classification and regression models directly from the [hub](https://huggingface.co/models).
 
 Here's a classification example showing how quick it is to set up an interface for a [model](https://huggingface.co/scikit-learn/tabular-playground).
 
@@ -1053,24 +1054,24 @@ No changes to highlight.
 
 ## New Features:
 
-### 1. Improvements to Queuing 🥇 
+### 1. Improvements to Queuing 🥇
 
 We've implemented a brand new queuing system based on **web sockets** instead of HTTP long polling. Among other things, this allows us to manage queue sizes better on Hugging Face Spaces. There are also additional queue-related parameters you can add:
 
-* Now supports concurrent workers (parallelization) 
+* Now supports concurrent workers (parallelization)
 ```python
 demo = gr.Interface(...)
 demo.queue(concurrency_count=3)
 demo.launch()
 ```
-* Configure a maximum queue size 
+* Configure a maximum queue size
 ```python
 demo = gr.Interface(...)
 demo.queue(max_size=100)
 demo.launch()
 ```
 
-* If a user closes their tab / browser, they leave the queue, which means the demo will run faster for everyone else 
+* If a user closes their tab / browser, they leave the queue, which means the demo will run faster for everyone else
 
 ### 2. Fixes to Examples
 
@@ -1078,29 +1079,29 @@ demo.launch()
 
 ![Screen Shot 2022-08-30 at 8 29 58 PM](https://user-images.githubusercontent.com/9021060/187586561-d915bafb-f968-4966-b9a2-ef41119692b2.png)
 
-* Image and Video thumbnails are cropped to look neater and more uniform: (thanks to PR #2109) 
+* Image and Video thumbnails are cropped to look neater and more uniform: (thanks to PR #2109)
+
 
- 
 ![Screen Shot 2022-08-30 at 8 32 15 PM](https://user-images.githubusercontent.com/9021060/187586890-56e1e4f0-1b84-42d9-a82f-911772c41030.png)
 
 * Other fixes in PR #2131 and #2064  make it easier to design and use Examples
 
-### 3. Component Fixes 🧱  
+### 3. Component Fixes 🧱
 * Specify the width and height of an image in its style tag (thanks to PR #2133)
 ```python
 components.Image().style(height=260, width=300)
 ```
 * Automatic conversion of videos so they are playable in the browser (thanks to PR #2003). Gradio will check if a video's format is playable  in the browser and, if it isn't, will automatically convert it to a format that is (mp4).
-* Pass in a json filepath to the Label component (thanks to PR #2083)   
-* Randomize the default value of a Slider (thanks to PR #1935) 
+* Pass in a json filepath to the Label component (thanks to PR #2083)
+* Randomize the default value of a Slider (thanks to PR #1935)
 
 ![slider-random](https://user-images.githubusercontent.com/9021060/187596230-3db9697f-9f4d-42f5-9387-d77573513448.gif)
 
 
-* Improvements to State in PR #2100 
+* Improvements to State in PR #2100
 
-### 4. Ability to Randomize Input Sliders and Reload Data whenever the Page Loads 
-* In some cases, you want to be able to show a different set of input data to every user as they load the page app. For example, you might want to randomize the value of a "seed" `Slider` input. Or you might want to show a `Textbox` with the current date. We now supporting passing _functions_ as the default value in input components. When you pass in a function, it gets **re-evaluated** every time someone loads the demo, allowing you to reload / change data for different users. 
+### 4. Ability to Randomize Input Sliders and Reload Data whenever the Page Loads
+* In some cases, you want to be able to show a different set of input data to every user as they load the page app. For example, you might want to randomize the value of a "seed" `Slider` input. Or you might want to show a `Textbox` with the current date. We now supporting passing _functions_ as the default value in input components. When you pass in a function, it gets **re-evaluated** every time someone loads the demo, allowing you to reload / change data for different users.
 
 Here's an example loading the current date time into an input Textbox:
 
@@ -1110,7 +1111,7 @@ import datetime
 
 with gr.Blocks() as demo:
     gr.Textbox(datetime.datetime.now)
-    
+
 demo.launch()
 ```
 
@@ -1124,7 +1125,7 @@ demo = gr.Interface(lambda x:x, gr.Slider(0, 10, randomize=True), "number")
 demo.launch()
 ```
 
-### 5. New Guide 🖊️ 
+### 5. New Guide 🖊️
 * [Gradio and W&B Integration](https://gradio.app/Gradio_and_Wandb_Integration/)
 
 
@@ -1164,8 +1165,8 @@ demo.launch()
 
 ## New Features:
 
-### 1.  Embedding Demos on Any Website 💻 
- 
+### 1.  Embedding Demos on Any Website 💻
+
 With PR #1444, Gradio is now distributed as a web component. This means demos can be natively embedded on websites. You'll just need to add two lines: one to load the gradio javascript, and one to link to the demos backend.
 
 Here's a simple example that embeds the demo from a Hugging Face space:
@@ -1175,16 +1176,16 @@ Here's a simple example that embeds the demo from a Hugging Face space:
 <gradio-app space="abidlabs/pytorch-image-classifier"></gradio-app>
 ```
 
-But you can also embed demos that are running anywhere, you just need to link the demo to `src` instead of `space`. In fact, all the demos on the gradio website are embedded this way: 
+But you can also embed demos that are running anywhere, you just need to link the demo to `src` instead of `space`. In fact, all the demos on the gradio website are embedded this way:
 
 <img width="1268" alt="Screen Shot 2022-07-14 at 2 41 44 PM" src="https://user-images.githubusercontent.com/9021060/178997124-b2f05af2-c18f-4716-bf1b-cb971d012636.png">
 
 
 Read more in the [Embedding Gradio Demos](https://gradio.app/embedding_gradio_demos) guide.
 
-### 2. Reload Mode 👨‍💻 
+### 2. Reload Mode 👨‍💻
 
-Reload mode helps developers create gradio demos faster by automatically reloading the demo whenever the code changes. It can support development on Python IDEs (VS Code, PyCharm, etc), the terminal, as well as Jupyter notebooks. 
+Reload mode helps developers create gradio demos faster by automatically reloading the demo whenever the code changes. It can support development on Python IDEs (VS Code, PyCharm, etc), the terminal, as well as Jupyter notebooks.
 
 If your demo code is in a script named `app.py`, instead of running `python app.py` you can now run `gradio app.py` and that will launch the demo in reload mode:
 
@@ -1198,7 +1199,7 @@ If you're working from a Jupyter or Colab Notebook, use these magic commands ins
 
 ![Blocks](https://user-images.githubusercontent.com/9021060/178986488-ed378cc8-5141-4330-ba41-672b676863d0.gif)
 
-### 3. Inpainting Support on `gr.Image()` 🎨  
+### 3. Inpainting Support on `gr.Image()` 🎨
 
 We updated the Image component to add support for inpainting demos. It works by adding `tool="sketch"` as a parameter, that passes both an image and a sketchable mask to your prediction function.
 
@@ -1206,23 +1207,23 @@ Here's an example from the [LAMA space](https://huggingface.co/spaces/akhaliq/la
 
 ![FXApVlFVsAALSD-](https://user-images.githubusercontent.com/9021060/178989479-549867c8-7fb0-436a-a97d-1e91c9f5e611.jpeg)
 
-### 4. Markdown and HTML support in Dataframes 🔢 
+### 4. Markdown and HTML support in Dataframes 🔢
 
-We upgraded the Dataframe component in PR #1684 to support rendering Markdown and HTML inside the cells. 
+We upgraded the Dataframe component in PR #1684 to support rendering Markdown and HTML inside the cells.
 
 This means you can build Dataframes that look like the following:
 
 ![image (8)](https://user-images.githubusercontent.com/9021060/178991233-41cb07a5-e7a3-433e-89b8-319bc78eb9c2.png)
 
 
-### 5. `gr.Examples()` for Blocks 🧱 
+### 5. `gr.Examples()` for Blocks 🧱
 
-We've added the `gr.Examples` component helper to allow you to add examples to any Blocks demo. This class is a wrapper over the `gr.Dataset` component. 
+We've added the `gr.Examples` component helper to allow you to add examples to any Blocks demo. This class is a wrapper over the `gr.Dataset` component.
 
 <img width="1271" alt="Screen Shot 2022-07-14 at 2 23 50 PM" src="https://user-images.githubusercontent.com/9021060/178992715-c8bc7550-bc3d-4ddc-9fcb-548c159cd153.png">
 
 
-gr.Examples takes two required parameters: 
+gr.Examples takes two required parameters:
 
 - `examples` which takes in a nested list
 -  `inputs` which takes in a component or list of components
@@ -1257,12 +1258,12 @@ With [PR 1828](https://github.com/gradio-app/gradio/pull/1828) we now hide the s
 
 # Version 3.0
 
-### 🔥 Gradio 3.0 is the biggest update to the library, ever.  
+### 🔥 Gradio 3.0 is the biggest update to the library, ever.
 
 ## New Features:
 
 ### 1.  Blocks 🧱
- 
+
 Blocks is a new, low-level API that allows you to have full control over the data flows and layout of your application. It allows you to build very complex, multi-step applications. For example, you might want to:
 
 * Group together related demos as multiple tabs in one web app
@@ -1289,8 +1290,8 @@ with demo:
     inp = gr.Textbox(placeholder="What is your name?")
     out = gr.Textbox()
 
-    inp.change(fn=update, 
-               inputs=inp, 
+    inp.change(fn=update,
+               inputs=inp,
                outputs=out)
 
 demo.launch()
@@ -1302,16 +1303,16 @@ demo.launch()
 Read our [Introduction to Blocks](http://gradio.app/introduction_to_blocks/) guide for more, and join the 🎈 [Gradio Blocks Party](https://huggingface.co/spaces/Gradio-Blocks/README)!
 
 
-### 2. Our Revamped Design 🎨 
+### 2. Our Revamped Design 🎨
 
-We've upgraded our design across the entire library: from components, and layouts all the way to dark mode. 
+We've upgraded our design across the entire library: from components, and layouts all the way to dark mode.
 
 ![kitchen_sink](https://user-images.githubusercontent.com/9021060/168686333-7a6e3096-3e23-4309-abf2-5cd7736e0463.gif)
 
 
-### 3. A New Website 💻 
+### 3. A New Website 💻
 
-We've upgraded [gradio.app](https://gradio.app) to make it cleaner, faster and easier to use. Our docs now come with components and demos embedded directly on the page. So you can quickly get up to speed with what you're looking for. 
+We've upgraded [gradio.app](https://gradio.app) to make it cleaner, faster and easier to use. Our docs now come with components and demos embedded directly on the page. So you can quickly get up to speed with what you're looking for.
 
 ![website](https://user-images.githubusercontent.com/9021060/168687191-10d6a3bd-101f-423a-8193-48f47a5e077d.gif)
 
diff --git a/ui/packages/atoms/src/IconButton.svelte b/ui/packages/atoms/src/IconButton.svelte
index bd454bbdaa..b6a5d572e5 100644
--- a/ui/packages/atoms/src/IconButton.svelte
+++ b/ui/packages/atoms/src/IconButton.svelte
@@ -6,6 +6,7 @@
 <button
 	on:click
 	class="text-gray-500  bg-white/90 h-5 w-5 flex items-center justify-center rounded shadow-sm hover:shadow-xl hover:ring-1 ring-inset ring-gray-200 z-10 dark:bg-gray-900 dark:ring-gray-600"
+	{...$$restProps}
 >
 	<div class="m-t-1 w-[60%] h-[60%] opacity-80 dark:text-white"><Icon /></div>
 </button>
diff --git a/ui/packages/image/src/ModifySketch.svelte b/ui/packages/image/src/ModifySketch.svelte
index f2afda42dd..37cc6c0869 100644
--- a/ui/packages/image/src/ModifySketch.svelte
+++ b/ui/packages/image/src/ModifySketch.svelte
@@ -7,9 +7,10 @@
 </script>
 
 <div class="z-50 top-2 right-2 justify-end flex gap-1 absolute">
-	<IconButton Icon={Undo} on:click={() => dispatch("undo")} />
+	<IconButton Icon={Undo} aria-label="Undo" on:click={() => dispatch("undo")} />
 	<IconButton
 		Icon={Clear}
+		aria-label="Clear"
 		on:click={(event) => {
 			dispatch("clear");
 			event.stopPropagation();
diff --git a/ui/packages/image/src/SketchSettings.svelte b/ui/packages/image/src/SketchSettings.svelte
index e92249b300..c21eb54131 100644
--- a/ui/packages/image/src/SketchSettings.svelte
+++ b/ui/packages/image/src/SketchSettings.svelte
@@ -22,9 +22,14 @@
 	<!-- <IconButton Icon={Undo} on:click={() => dispatch("undo")} /> -->
 
 	<span class="absolute top-0 right-0">
-		<IconButton Icon={Brush} on:click={() => (show_size = !show_size)} />
+		<IconButton
+			Icon={Brush}
+			aria-label="Use brush"
+			on:click={() => (show_size = !show_size)}
+		/>
 		{#if show_size}
 			<input
+				aria-label="Brush radius"
 				bind:value={brush_radius}
 				class="absolute top-[2px] right-6"
 				type="range"
@@ -36,9 +41,14 @@
 
 	{#if mode !== "mask"}
 		<span class="absolute top-6 right-0">
-			<IconButton Icon={Color} on:click={() => (show_col = !show_col)} />
+			<IconButton
+				Icon={Color}
+				aria-label="Select brush color"
+				on:click={() => (show_col = !show_col)}
+			/>
 			{#if show_col}
 				<input
+					aria-label="Brush color"
 					bind:value={brush_color}
 					class="absolute top-[-3px] right-6"
 					type="color"
diff --git a/ui/packages/upload/src/ModifyUpload.svelte b/ui/packages/upload/src/ModifyUpload.svelte
index 63053d9c5c..153f46c3fc 100644
--- a/ui/packages/upload/src/ModifyUpload.svelte
+++ b/ui/packages/upload/src/ModifyUpload.svelte
@@ -18,11 +18,16 @@
 	class:m-1={!absolute}
 >
 	{#if editable}
-		<IconButton Icon={Edit} on:click={() => dispatch("edit")} />
+		<IconButton
+			Icon={Edit}
+			aria-label="Edit"
+			on:click={() => dispatch("edit")}
+		/>
 	{/if}
 
 	<IconButton
 		Icon={Clear}
+		aria-label="Clear"
 		on:click={(event) => {
 			dispatch("clear");
 			event.stopPropagation();


Code review comments:
diff_hunk: @@ -7,9 +7,10 @@
 </script>
 
 <div class="z-50 top-2 right-2 justify-end flex gap-1 absolute">
-	<IconButton Icon={Undo} on:click={() => dispatch("undo")} />
+	<IconButton Icon={Undo} aria-label="Undo" on:click={() => dispatch("undo")} />
path: ui/packages/image/src/ModifySketch.svelte
text: @user1:
Follwing on from the above, when that is done we will need to change this to `label=...`.

diff_hunk: @@ -18,11 +18,16 @@
 	class:m-1={!absolute}
 >
 	{#if editable}
-		<IconButton Icon={Edit} on:click={() => dispatch("edit")} />
+		<IconButton
+			Icon={Edit}
+			aria-label="Edit"
path: ui/packages/upload/src/ModifyUpload.svelte
text: @user1:
`label`

diff_hunk: @@ -18,11 +18,16 @@
 	class:m-1={!absolute}
 >
 	{#if editable}
-		<IconButton Icon={Edit} on:click={() => dispatch("edit")} />
+		<IconButton
+			Icon={Edit}
+			aria-label="Edit"
+			on:click={() => dispatch("edit")}
+		/>
 	{/if}
 
 	<IconButton
 		Icon={Clear}
+		aria-label="Clear"
path: ui/packages/upload/src/ModifyUpload.svelte
text: @user1:
`label`

diff_hunk: @@ -6,6 +6,7 @@
 <button
 	on:click
 	class="text-gray-500  bg-white/90 h-5 w-5 flex items-center justify-center rounded shadow-sm hover:shadow-xl hover:ring-1 ring-inset ring-gray-200 z-10 dark:bg-gray-900 dark:ring-gray-600"
+	{...$$restProps}
path: ui/packages/atoms/src/IconButton.svelte
text: @user1:
I'm not a huge fan of `$$restProps` because it is hard to work out what is being passed down and results in code that isn't as well optimised (by the Svelte compiler). It is useful when we don't know the props at build time, but that isn't the case here. 

Since we know these values ahead of time, we can just define a `label` prop in this component (`export let label`) and set that as the `aria-label` explicitly.