While it is understood that this is just an example, the visible text (label) of "Works with selects" and the `aria-label="Floating label select example"` created a [WCAG 2.5.3 Label in name](https://www.w3.org/WAI/WCAG21/quickref/#label-in-name) failure.
As the `aria-label` isn't necessary here since this `select` is already provided an accessible name by its `label` element, removing the unnecessary `aria-label` seems the best course of action as:
* removing it solves the WCAG issue
* it removes the potential implication to developers that they'd even _need_ an `aria-label` here, let alone indirectly suggesting that it's ok for the visible text and accessible name to be out of alignment
* Separate container classes from enable-grid-classes optoin
* Document the new option
* Mention in migration guide
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* docs: Add role="switch" to switches
* Tweak/expand explanation about assistive technologies
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
* Disabled link cleanup
per https://www.w3.org/TR/html-aria/#docconformance
> It is NOT RECOMMENDED to use `aria-disabled="true"` on an `a` element with an `href` attribute.
>
>NOTE
>If a link needs to be "disabled", remove the `href` attribute.
This PR removes the unnecessary `href="#"`, `tabindex="-1"`, and `aria-disabled="true"` from disabled links in both docs pages and examples. `aria-disabled="true"` *is* kept for disabled link-based buttons (that have `role="button"`) as there it's appropriate to use (you *want* to convey to assistive technologies that this thing you're claiming is a button is also disabled at the moment)
Further, the PR extends the "Link functionality caveat" to show the "proper" way (removing `href` and adding `.disabled` class only) to disable a link, but then explains what to do if that's not possible (and then keeps an example with all the traditional `href="#" tabindex="-1" aria-disabled="true"`, but explains clearly that it's not ideal). Same sort of explanation is also added to the pointer event utilities page
* Turn big note into actual normal doc text
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
- Adds grayscale colors
- Adds root and body variables
Note that some Sass variables default to `null`, so as we generate and use the CSS variable, we'll be potentially adding some lines of code.
- Adds new functions to generate additional Sass maps
- Adds new root variables for rgb() versions of our theme colors, plus a few extras
- Adds ability to change the alpha transparency of text color and background color utilities with new utilities, inline styles, or local CSS var
- Updates documentation for color and background-color utilities pages
- Deprecates .text-black-50 and .text-white-50 since those (and additional transparency levels) can be generated on the fly
Change approach slightly to prevent cascade
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Jaume Sala <jaumesala@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
- Moves the make-cssgrid() mixin to the grid mixins stylesheet
- Updates the g-start-* classes to start at 1 instead of 0 as 0 is an invalid value (fixes#34399)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Now includes mentino of the two utilities stylesheets, plus how and why to include the API stylesheet last
Fixes#34397
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* change data-dismiss, so can be outside modal, using a bs-target
* Update site/content/docs/5.0/components/modal.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
* Add maps for all colors, document how to extend color utilities
* Updates to make this more functional for v5
- Moves color maps into _variables.scss for now (felt weird to split them out when the variables are there)
- Adds a new function, map-merge-multiple(), and updates docs that reference combo-map
- Updates code snippet and docs guidance about how to extend the color utils to handle this
* Update site/content/docs/5.0/customize/color.md
Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Alert.js: Refactor code to match the other components
* Use this._element
* Remove handleDismiss method and keep its functionality on event
* Change JqueryInterface to be more generic
* Correct docs to be aligned with code, and add undocumented functionality
* Update alerts.md
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add responsive utility classes for opacity
- fix for #33483
* remove responsive opacity utils as it has impact on bootstrap.css bundle size
* Update opacity.md
* Update site/content/docs/5.0/utilities/opacity.md
Co-authored-by: Mark Otto <otto@github.com>
* Update site/content/docs/5.0/utilities/opacity.md
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Harish <halodoc@ip-192-168-1-101.ap-southeast-1.compute.internal>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
* Update dropdowns.md to reflect correct version
* Clarify content, drop the reference to versions
* Update dropdowns.md
Co-authored-by: Mark Otto <otto@github.com>
* Update documentation for badges
* Removes useless changes, as well as fixes an example
* Fixes some text with a badge example
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* placeholder changes to input value
* Fix content and add value to readOnly input
* add value in readonly input
* Update site/content/docs/5.0/forms/form-control.md
Co-authored-by: Rajesh Kumar <https://github.com/rajesh2kumar96>
Co-authored-by: Patrick H. Lauke <redux@splintered.co.uk>
Co-authored-by: Mark Otto <otto@github.com>
* docs(cards): img in horizontal card
Closes#34145
Simply adds `img-fluid` and `rounded-start` classes to horizontal card example to ensure copy-pasting from the docs matches the expectation.
* Update site/content/docs/5.0/components/card.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Fix unnecessary classes
* Removed unnecessary div
Co-authored-by: Mark Otto <otto@github.com>
* Updated centered hero primary button classes
Co-authored-by: Mark Otto <otto@github.com>
- De-duplicates bulk of the content for a migration from v4 to v5
- Adds clear breaking labels where appropriate
- Leaves room for more guidance around doing the actual migration
* Neutralise more words from placeholder text
Follow-up to https://github.com/twbs/bootstrap/pull/33726
* Match fullscreen modal to other sizes
* Ditch the lyrics outright
* Rewrite and tweak the blog example some
* update cheatsheet
* text utils copy too
* Fix the tbody validation error
* fix typo
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: alpadev <2838324+alpadev@users.noreply.github.com>
Co-authored-by: alpadev <alpa.muc@gmail.com>
* Tweak toast docs
- a few rewordings/tweaks
- add info about toasts with focusable/actionable controls (shouldn't autohide them)
* Update site/content/docs/5.0/components/toasts.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Update site/content/docs/5.0/components/toasts.md
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
* Add example: Panels stay open
* Set unique element IDs in the new example
* Update language
Co-authored-by: Mark Otto <markd.otto@gmail.com>
Co-authored-by: Mark Otto <otto@github.com>
* Update docs to use new .show behavior and clarify some copy for first example
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add updated Jumbotron example made from utilities
* Update starter template example with new design and links
* Update some existing examples and their screenshots
* Add four new snippet-based examples
* Update layout to improve things a bit
* WIP
* Add d-block to images
* Fix horizontal scroll
* move d-block to the anchor
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Accept data-bs-body option in the configuration object as well
Tweak jqueryInterface, add some more tests
* Fix Markdown table formatting and tweak the wording on backdrop
Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add a new offcanvas component
* offcanvas.js: switch to string constants and `event.key`
* Remove unneeded code
* Sass optimizations
* Fixes
Make sure the element is hidden and not offscreen when inactive
fix close icon negative margins
Add content in right & bottom examples
Re-fix bottom offcanvas height not to cover all viewport
* Wording tweaks
* update tests and offcanvas class
* separate scrollbar functionality and use it in offcanvas
* Update .bundlewatch.config.json
* fix focus
* update btn-close / fix focus on close
* add aria-modal and role
return focus on trigger when offcanvas is closed
change body scrolling timings
* move common code to reusable functions
* add aria-labelledby
* Replace lorem ipsum text
* fix focus when offcanvas is closed
* updates
* revert modal, add tests for scrollbar
* show backdrop by default
* Update offcanvas.md
* Update offcanvas CSS to better match modals
- Add background-clip for borders
- Move from outline to border (less clever, more consistent)
- Add scss-docs in vars
* Revamp offcanvas docs
- Add static example to show and explain the components
- Split live examples and rename them
- Simplify example content
- Expand docs notes elsewhere
- Add sass docs
* Add .offcanvas-title instead of .modal-title
* Rename offcanvas example to offcanvas-navbar to reflect it's purpose
* labelledby references title and not header
* Add default shadow to offcanvas
* enable offcanvas-body to fill all the remaining wrapper area
* Be more descriptive, on Accessibility area
* remove redundant classes
* ensure in case of an already open offcanvas, not to open another one
* bring back backdrop|scroll combinations
* bring back toggling class
* refactor scrollbar method, plus tests
* add check if element is not full-width, according to #30621
* revert all in modal
* use documentElement innerWidth
* Rename classes to -start and -end
Also copyedit some docs wording
* omit some things on scrollbar
* PASS BrowserStack tests
-- IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling.
* Rename '_handleClosing' to '_addEventListeners'
* change pipe usage to comma
* change Data.getData to Data.get
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Martijn Cuppens <martijn.cuppens@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
* Add an example of v4's media component in the flex utils docs
* Link to new example from Migration guide
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* docs(carousel): double-spaces out there
* docs(toasts): missing word, ins't it?
* docs(cheatsheet): use buttons for carousels and tabs ion cheatsheets too
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* WIP: Mention variables, mixins, and loops in docs
* Add Sass sections to component pages
* add sass docs for forms and content
* Update buttons.md
* Remove empty mixins sections
* Massive update to utilities and some consistency changes
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
* Add function type for `popperConfig` option
* Update .bundlewatch.config.json
* copy edits
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markdotto@gmail.com>
- Removes the &[style] selector that was used for resetting Popper styles
- Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties
Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
* Dynamic tabs: use buttons rather than links
- change docs
- add mention that tabs should be <button> elements
- tweak styles to neutralise border and background
* Update js unit and visual test accordingly
- replace links with buttons
- make one specific test that uses links instead of buttons, as we still want to support it despite it being non-semantically appropriate
- Leaving a couple of tests for now. The test for removed tabs should be redone so that tabs are removed programmatically (as the approach of having that close button inside the link is invalid and broken markup). The test for dropdowns should be removed together we actually ripping out the handling for dropdowns in the tab.js code (arguably a breaking change, though we discouraged this for a few versions and effectively "deprecated" it)
* Add isolation:isolate to prevent focus being overlapped
https://github.com/twbs/bootstrap/pull/32630#issuecomment-756015766
